Slider
Bottom navigation bars are fixed at the bottom of the page and can have 3 to 5 options. They are typically used only on mobile phones. Each page can have only one bottom navigation bar.
Usage
Only HTML is needed for it to take effect.
Material Design Guidelines: Components - Bottom navigation
Basic style
Related Reading
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100"/>
</label><label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100"/>
</label>Background color
Auto-hide
The following example shows both icon and text, typically used when there are only 3 navigation items.
<!-- Navigation items with class <code>.mdui-bottom-nav-active</code> will be active by default. -->
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100" value="0" disabled/>
</label>
<!-- Add class <code>.mdui-bottom-nav-text-auto</code> to the <code><div class="mdui-bottom-nav"></div></code> element to achieve this effect. -->
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100" value="50" disabled/>
</label>Usually used when there are 4 to 5 navigation items. Only icons are shown by default, and text is shown after the navigation item is active.
<!-- Navigation items with class <code>.mdui-bottom-nav-active</code> will be active by default. -->
<label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100" value="0" disabled/>
</label>
<!-- Add class <code>.mdui-bottom-nav-text-auto</code> to the <code><div class="mdui-bottom-nav"></div></code> element to achieve this effect. -->
<label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100" value="50" disabled/>
</label>Fixed to bottom
Add the class .mdui-color-[color] to the <div class="mdui-bottom-nav"></div> element to give the bottom navigation bar a background color.
Add the class .mdui-bottom-nav-fixed to the body element to fix the bottom navigation bar at the bottom of the page, so it doesn't scroll with the scrollbar.
CSS Classes
| Class Name | Description |
|---|---|
.mdui-slider | This class should be added to the <code>body</code> element, not the <code>.mdui-bottom-nav</code> element, because in addition to fixing the bottom navigation bar, it also adds <code>padding-bottom</code> to the <code>body</code> so the bottom navigation bar doesn't cover page content. |
.mdui-slider-discrete | Add the class <code>.mdui-bottom-nav-scroll-hide</code> to hide the bottom navigation bar when scrolling down and show it when scrolling up. |