Bottom Navigations

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 scrolls up.

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.

network_wifinetwork_cellbattery_full12:30

Recent

  • star
    Aloo pie
    Wowza
  • star
    Bakpia Pathok
    Wowza
  • star
    Bizcocho
    Wowza
  • star
    Banket
    Wowza
  • star
    Bundevara
    Wowza
  • star
    Croissant
    Wowza
  • star
    Burek
    Wowza
  • star
    Cherry pie
    Wowza

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 upwards.

NOTE: The BottomNavigation is a MOBILE ONLY component so it only has event listeners for touch events.

network_wifinetwork_cellbattery_full12:30

New Releases

    Countryside Veterinarian

    Drama

    Town of Golds

    Action & Adventure

Recommended

    Terminator

    Science Fiction

    Shrek 2

    Reality TV

    Running Man

    Heartfelt drama

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.

View Demo