The BottomNavigation component is a mobile/tablet only alternative to a NavigationDrawer
for handling navigation. It should only be used when there are 3 to 5 links within your app.
The bottom navigation can be static or dynamic. When it is static, it will always be visible
while a dynamic navigation will disappear when the user scrolls down and appears when the user
There are two types of bottom navigations: fixed and shifting. A fixed bottom navigation will
be used when there are exactly 3 links. Each icon and label will always be visible. A shifting
bottom navigation will be used when there are more than 3 links. An inactive link will only display
an icon and the active link will include a label.
Since the BottomNavigation is only supposed to be used for mobile devices, the examples below
have been modified to be emulated in desktop browsers.
This example shows a fixed BottomNavigation. This means that all the labels and icons will always be visible
instead of dynamically hiding when the user scrolls or only showing the label for the active tab. The
active tab will change its color to the $md-primary-color and increase the font size to show prominence.
When a tab is clicked, the ink effect will only stay within the tab itself.
When using the BottomNavigation, you can apply the .md-bottom-navigation-offset class name to an element
to add padding-bottom to offset the content for the BottomNavigation.
When using an icon, the inherit prop will be cloned into it to get correct styling. If you do not use the base
FontIcon or SVGIcon, make sure to pass props to your icon, or provide the inherit prop yourself.
This example shows a shifting BottomNavigation. This means that only the active tab will display a label. With
the help of the react-md-theme-bottom-navigations-colored mixin, you can even have the theme of the bottom
navigation change with each click. Just for funs.
If you have a mobile device or an emulator, this example also shows off the dynamic version of the bottom navigation.
When the user scrolls down the page, the navigation will hide. The navigation can be viewed again after a small scroll
NOTE: The BottomNavigation is a MOBILE ONLY component so it only has event listeners for touch events.
Since this is a navigation component, the bottom navigation can be updated to be used with react-router.
This example will be exactly the same as the shifting example above, just using react-router's Link and
Route components to change the index and figure out which components to render.
Since my site uses path params to fetch documentation/examples/SassDoc, you will need to navigate to a different
route to actually view the demo. Please click the link below to see this example in action. The code for the example
is still available here by clicking the code expander button.