Skip to main content

Bottom Navbars

Bottom navigation bars allow movement between primary destinations in an app.

Bottom Navbar Example


Bottom navigation bar allows movement between primary destinations in an app. It is fixed to the bottom of screens for convenient access. Each destination should be represented by an icon, ideally with a label.


Use when

  • Needing navigation for top-level destinations accessible from anywhere in the app.
  • You have three to five destinations.

Don’t use when

  • There are fewer than three destinations. Instead use Tabs.
  • You need users to navigate to a single task.
  • You need to navigate to user preferences or settings.
What's changed
Date Version Notes Contributors
01/16/2023 1.0.0 New component added. D. Bedick, E. Bohn, N. Cadsawan, E. Gunther, I. Perez, J. A. Provin Silva, L. Saenz, C. Starbird, R. Stillwell, S. Kaukonen, N. Byati