Description Usage Arguments Examples
View source: R/shiny-material-side-nav.R
UI content can be placed in side-nav.
1 2 3 4 5 6 | material_side_nav(
...,
fixed = FALSE,
image_source = NULL,
background_color = NULL
)
|
... |
The UI elements to place in the side-nav. |
fixed |
Boolean. Set to TRUE to keep side-nav open on large screens. |
image_source |
String. The background image file name. Place the image in a folder labeled 'www' at the same level as the application (server.R & ui.R). |
background_color |
Side-nav background color. Leave blank for the default color. Visit https://materializecss.com/color.html for a list of available colors. |
1 2 3 4 5 6 | material_side_nav(
fixed = FALSE,
image_source = "example_image.jpg",
background_color = "blue lighten-4",
shiny::tags$h1("Side-Nav Content")
)
|
<style type="text/css"></style>
<ul id="slide-out" class="side-nav blue lighten-4">
<li>
<div style="height:160px" class="userView">
<div class="background">
<img style="height:160px;width:300px" src="example_image.jpg"/>
</div>
</div>
</li>
<h1>Side-Nav Content</h1>
</ul>
<script> $(document).ready(function () {
$('.nav-wrapper').prepend('<a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>');
$(".button-collapse").sideNav();
})</script>
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.