Bottom Navigation
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.
Related Reading
Style
Basic style
The following example shows both icon and text, typically used when there are only 3 navigation items.
Navigation items with class .mdui-bottom-nav-active will be active by default.
<div class="mdui-bottom-nav">
<a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
<i class="mdui-icon material-icons">history</i>
<label>Recents</label>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">favorite</i>
<label>Favorites</label>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">location_on</i>
<label>Nearby</label>
</a>
</div><div class="mdui-bottom-nav">
<a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
<i class="mdui-icon material-icons">history</i>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">favorite</i>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">location_on</i>
</a>
</div><div class="mdui-bottom-nav">
<a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">Recents</a>
<a href="javascript:;" class="mdui-ripple">Favorites</a>
<a href="javascript:;" class="mdui-ripple">Nearby</a>
</div>Only show text on active
Add class .mdui-bottom-nav-text-auto to the <div class="mdui-bottom-nav"></div> element to achieve this effect.
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.
<div class="mdui-bottom-nav mdui-bottom-nav-text-auto">
<a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
<i class="mdui-icon material-icons">live_tv</i>
<label>Movies</label>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">music_note</i>
<label>Music</label>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">book</i>
<label>Books</label>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">library_books</i>
<label>Newsstand</label>
</a>
</div>Background color
Add the class .mdui-color-[color] to the <div class="mdui-bottom-nav"></div> element to give the bottom navigation bar a background color.
<div class="mdui-bottom-nav mdui-bottom-nav-text-auto mdui-color-brown">
<a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white mdui-bottom-nav-active">
<i class="mdui-icon material-icons">live_tv</i>
<label>Movies</label>
</a>
<a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
<i class="mdui-icon material-icons">music_note</i>
<label>Music</label>
</a>
<a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
<i class="mdui-icon material-icons">book</i>
<label>Books</label>
</a>
<a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
<i class="mdui-icon material-icons">library_books</i>
<label>Newsstand</label>
</a>
</div>Fixed to bottom
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.
This class should be added to the body element, not the .mdui-bottom-nav element, because in addition to fixing the bottom navigation bar, it also adds padding-bottom to the body so the bottom navigation bar doesn't cover page content.
Auto-hide
Add the class .mdui-bottom-nav-scroll-hide to hide the bottom navigation bar when scrolling down and show it when scrolling up.
- This feature will not work if the bottom navigation bar is not fixed at the bottom of the page.
- If elements are dynamically generated, you need to call
mdui.mutation()to initialize them.
<body class="mdui-bottom-nav-fixed">
<div class="mdui-bottom-nav mdui-bottom-nav-scroll-hide">
......
</div>
</body>Event
| Event Name | Target | Description | Params |
|---|---|---|---|
change.mdui.bottomNav | <div class="mdui-bottom-nav"></div> | This event is triggered when switching navigation items. | event._detail.index: Index of the activated navigation item. |
CSS Classes
| Class Name | Description |
|---|---|
.mdui-bottom-nav | Define the bottom navigation bar component. |
.mdui-bottom-nav-active | Make the navigation item active. |
.mdui-bottom-nav-text-auto | Show text only when the navigation item is active. |
.mdui-bottom-nav-fixed | Fix the navigation bar to the bottom of the page (must be added to the body element). |
.mdui-bottom-nav-scroll-hide | Hide the bottom navigation bar when scrolling down and show it when scrolling up. |