menu MDUI Documentation
color_lens
near_me
Start
keyboard_arrow_down
Instalation Compatibility JavaScript tool library JavaScript global methods
layers
Style
keyboard_arrow_down
Colors and themes Font Grid layout Typography Icon Media Helper class Shadow
widgets
Component
keyboard_arrow_down
Ripple animation effect Button Floating operation button Drop-down selection Divider Expandable panel Text box Select control Slider List List control Grid list Tab Tab toolbar App bar Navigation drawer Bottom navigation bar Card Scrap of paper Tooltip Snackbar Table Dialog box Menu Progress indicator
view_carousel
JavaScript Plug-in
keyboard_arrow_down
Collapse Headroom
local_mall
Resources
keyboard_arrow_down
Material icon

Bottom navigation bar

The bottom navigation bar is fixed at the bottom of the page, you can have 3 - 5 Options. It is usually only used on mobile phones. Each page can only have one bottom navigation bar.

Call method

Just write HTML To take effect.

Related Reading

Material Design Design Guidelines: Components - Bottom navigation

style

Basic style

The following example displays both the icon and the text, usually when only 3 Used for navigation items.

Containing class .mdui-bottom-nav-active The navigation items of will be activated by default.

codeplay_arrow
Example
history favorite location_on 
<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>

Only show icons

codeplay_arrow
Example
history favorite location_on 
<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>

Text only

codeplay_arrow
Example
Recents Favorites Nearby 
<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</label></a>
</div>

Only display text in active state

in <div class="mdui-bottom-nav"></div> Add a class to the element .mdui-bottom-nav-text-auto This effect can be achieved.

Generally in possession 4 - 5 This method is used for navigation items. By default, only icons are displayed, and text is displayed after activating the navigation item.

codeplay_arrow
Example
live_tv music_note book library_books 
<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

in <div class="mdui-bottom-nav"></div> Add a class to the element .mdui-color-[color] You can assign a background color to the bottom navigation bar.

codeplay_arrow
Example
live_tv music_note book library_books 
<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>

Pin to the bottom of the page

in body Add a class to the element .mdui-bottom-nav-fixed You can fix the bottom navigation bar at the bottom of the page and not scroll with the scroll bar.

This class needs to be added in body Element, insteaElement, because in addition to fixing the application bar, it will also bettom-nav Element, because in addition to fixing the application bar, it will also be body 添加 padding-bottom, So that the bottom navigation bar does not cover the content of the page.

Auto hide

Add class .mdui-bottom-nav-scroll-hide

note：

  • If the bottom navigation bar is not fixed at the bottom of the page, this function will not take effect.
  • If the element is dynamically generated, you need to call mdui.mutation() Initialize.

<body class="mdui-bottom-nav-fixed">
  <div class="mdui-bottom-nav mdui-bottom-nav-scroll-hide">
    ......
  </div>
</body>
run

event

Event name the goal description parameter
change.mdui.bottomNav <div class="mdui-bottom-nav"></div> This event is triggered when the navigation item is switched. event._detail.index: The index number of the activated navigation item.

CSS List of class names

Class name effect
.mdui-bottom-nav Define the bottom navigation bar component.
.mdui-bottom-nav-active Make the navigation item active.
.mdui-bottom-nav-text-auto Make the navigation bar only display text in the active state.
.mdui-bottom-nav-fixed Make the navigation bar fixed to the bottom of the page.
.mdui-bottom-nav-scroll-hide The bottom navigation bar is hidden when the page is scrolled down, and the bottom navigation bar is displayed when scrolling up.
arrow_back Previous
Navigation drawer
arrow_forward Next
card
Set document theme

Theme color

Main color

Accent color