Top navigation bar
v2.0
The navigation bar displays common navigation, a global search bar, page titles, and page-level actions.
- CSS
- Marko
- React
The container bounds the primary and secondary toolbars and automatically handles the devices safe zones.
The title is available in the primary toolbar and should succinctly describe the page’s purpose. If the title isn’t visible, an accessible title must be provided for screen readers.
The top navigation bar is available in multiple layouts.
Inline: the default layout with the title inline between the navigation buttons.
Stacked: for larger titles and expressive moments.
No title: For detail views where a title on the page acts as the page title.
Search only: For search views and search results pages.
The leading button area of the primary toolbar contains the back button when viewing subpages and detail views.
Up to 3 trailing buttons can be visible in the primary toolbar. Additional buttons are collapsed into an overflow menu.
A secondary toolbar can be stacked below the primary toolbar. By default, the secondary toolbar hides and reveals with the primary toolbar when set to hide on scroll. However, the secondary toolbar can remain visible on scroll when providing convenient page navigation controls.
The secondary toolbar can include tabs, chips, a segmented button, a search field, or other related navigation elements.
Titles are truncated in the default title layout when wider than the available space. Stacked titles are truncated at two lines.
When there are more than 3 actions in the primary toolbar, the lower-priority actions are collapsed into an overflow menu. The overflow button is always on the trailing edge of the primary toolbar.
The cart button is the last button of the primary toolbar unless an overflow button is present. Only remove the cart button in focused flows or form pages.
The top navigation bar hides when scrolling downward and reveals when scrolling upward to maximize visible screen space.
If a secondary toolbar is present, it hides and reveals along with the primary toolbar by default, but can be configured to remain visible.
A drop shadow is applied to the top navigation bar when the page is scrolled. For the large navigation bar, the title collapses into the smaller layout when scrolled. It transitions back to the large layout when the page is scrolled to the top.
The inline title configuration is the default on smaller screens. Small screens can use the larger layout when a page title is larger.
The inline title with a larger font size is the default configuration on medium screens. Elements that would normally stack on smaller screens can move into the primary toolbar as space allows.
If a navigation rail is present, the navigation bar will stack below the rail.
The inline title with a larger font size is the default configuration on large screens. Elements that would normally stack on smaller screens can move into the primary toolbar as space allows.
If a navigation rail is present, the navigation bar will stack below the rail.
Do use a large navigation bar when the title is long and would lead to wrapping.
Don’t use the smaller navigation bar if the title is likely to truncate.
Do use icon buttons as trailing buttons.
Don’t use a CTA or Link button as a trailing button. Place primary actions like “Done” or “Save” within the page content or in a sticky footer.
Do use icon buttons as trailing buttons.
Don’t use a CTA or Link button as a trailing button. Place primary actions like “Done” or “Save” within the page content or a sticky footer.
Do maintain the size and padding within the top navigation bar.
Don’t alter the size or padding of the navigation bar.
