Bottom Navigation

Bottom navigation bars allow users to navigate between top-level destinations. Docked at the bottom of a screen, the component displays three to five destinations for lateral navigation. An icon and a text label represent each destination in the component.

Usage

The bottom navigation bar should be used for top-level navigation across primary destinations. The bottom navigation bar consists of an icon and a text label and allows for click/tap interaction. Tapping an icon (and label) takes the user to the top-level navigation destination associated with that icon.

It should be used for

Top-level destinations that need to be accessible from anywhere
Three to five destinations

Behaviour

When you select a bottom navigation item, the destination should reflect the user’s prior interaction. Thus, if the user has previously visited a particular section in one of the screens pertaining to a bottom navigation item, they should return to that view state (with its previous state preserved, if possible). Otherwise, the app should navigate to the top-level screen.

Do's & Don'ts

Anatomy

Alert

                          
                            .vertical-align-box {
                              height: 100vh;
                              min-height: 100%;
                              display: flex;
                              align-items: center;
                              scroll-snap-align: start;
                              scroll-snap-stop: always;
                            }