For components used to display contextual actions or page controls, see Toolbar.
Anatomy
- Container: holds all navigation items and has a rounded surface background.
- Navigation item: indicates the available sections of an app and shows users which one is currently active. It consists of:
- Icon: visually represents the destination or section.
- Label: a single-line text displayed beneath icon and indicates the name of the destination or section.
- Notification indicator (Optional): Indicates if the navigation item has changes from the last time the user was there. It can have 2 variants:
- Dot: for passive notifications like new items in the section.
- Counter: for trackable notification counts.
Usage Guidelines
When to use this component
Use the Nav bar for:
- The app contains between 2 and 5 equally important destinations
- Top-level app sections
- Persistent primary navigation
When not to use this component
Do not use the Nav bar for:
- Contextual page actions, use toolbar for that case.
- Secondary navigation
- For placing secondary sections in the app. Use drawer or popout menus for that purpose.
- More than 5 sections
- Deep hierarchical navigation
Best Practices
Use the Nav bar only for top-level sections in the app
Do not use the Nav bar for secondary actions or navigation items
Keep labels concise and easy to understand
Do not use multiline labels
Use recognizable icons.
Do not use unclear or ambiguous icons
Make sure all menu items have the same width.
Do not resize navigation items width.
Ensure only one item is active at a time
Do not use the “disabled” state for sections. If a section has no content, use the ‘empty’ state, but never the “disabled” state.
Keep item order consistent across the app
Do not change item order dynamically
Whenever possible, use solid icons for active elements and outline icons for inactive elements.
General Component Behaviors
The Nav bar is a persistent bottom navigation component used to provide quick access to the primary destinations of an application.
It is designed for:
- Frequent navigation between top-level sections, as main sections remain visible
- One-tap access to primary destinations
- Mobile thumb-friendly interaction, it sits within the natural thumb zone
- Persistent visibility across the app experience
- Users do not need to memorize hidden menus
The navigation bar should always remain visible while users navigate through primary sections of the app.
Structure rules
The minimum number of allowed items are 2, but the recommended average is between 3 and 5, considering 5 items as the maximum number allowed.
If additional items are required, lower-priority destinations can be grouped into a “More” item that should appears at the end of the navigation
Placement
The Nav bar is intended for mobile navigation patterns and should remain anchored to the bottom of the screen and visible while users navigate between primary sections.
Some other considerations are:
- The Nav bar should respect operating system safe area insets on both iOS and Android
- The component should never overlap system gestures or home indicators
- Horizontal margins should remain consistent, maintaining 16px horizontal margin across screen sizes
Width and growing behavior
The Nav bar should behave as a responsive full-width container, maintaining 16px horizontal margins on both sides.
Navigation items should distribute evenly across the available width and should stretch responsively across device sizes, preservering equal spacing between items to maintain balanced visual proportions regardless of item count.
Height
The Nav bar height should not grow vertically and it should remain stable across different sections and states, preserving touch comfort.
Item distribution
Navigation items should share available width equally, maintain centered alignment and preserve touch target consistency.
Labels
Labels in navigation items must always remain on a single line. When reaching the max-width, an ellipsis is displayed and text is truncated.
Notifications
A dot should be used to indicate that new content is available in a section, and a counter to show the number of items that can be tracked. The counter would have a maximum of 99; if this number is exceeded, “99+” would be displayed.
Scroll behavior
By default, the Nav bar remains always persistent and visible. It would be sticky to the bottom of the screen if the content is scrolled.
Layering
Nav bar should remain above the entire content of the pages, but it should not overlap with overlay components, such as bottomsheets or alert dialogs.
Nav items states
Default
The default state represents an inactive navigation item. It has no background, a secondary foreground color and an outline icon. It supports a notification indicator.
Pressed
The pressed state appears while the user is interacting with an item. It has a background, a primary foreground color and an outline icon. It supports a notification indicator.
Active
The active state indicates the currently selected section. It has a background, a primary foreground color and a filled icon. It doesn’t support a notification indicator, because once the user accesses that section, the notifications are marked as read.
Notification variants
Counter
Used when the number of new items can be tracked, like in messages, notifications or pending tasks. If it reaches more than 99 items, the text displayed must be “99+”.
Dot
Used when new content exists but the amount cannot be quantified, like new updates or generic attention indicator.
Content Guidelines
Labels
Labels should:
- Be short and descriptive
- Use sentence case
- Prefer one-word destinations when possible
- Home
- Inbox
- Profile
- Activity
- Very long labels
- Technical wording
- Ambiguous terminology
For further information, see the Content Styleguide.