Top navigation bar
The navigation bar displays common navigation, a global search bar, page titles, and page-level actions.
- Skin
- Marko
- React
- Primary toolbar
- Secondary toolbar
- Leading button
- Content area
- Trailing buttons
Container
The container bounds the primary and secondary toolbars and automatically handles the devices safe zones.
Title
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.
Layout
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.
Leading buttons
The leading button area of the primary toolbar contains the back button when viewing subpages and detail views.
Trailing buttons
Up to 3 trailing buttons can be visible in the primary toolbar. Additional buttons are collapsed into an overflow menu.
Secondary toolbar
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.
Title overflow
Titles are truncated in the default title layout when wider than the available space. Stacked titles are truncated at two lines.
Button overflow
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.
Cart button
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.
Hide on scroll
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.
Scrolled state
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.
Small screens
The inline title configuration is the default on smaller screens. Small screens can use the larger layout when a page title is larger.
Medium screens
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.
Large screens
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.
Title length
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.
Trailing button style
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.
Amount of buttons
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.
Size
Do maintain the size and padding within the top navigation bar.
Don’t alter the size or padding of the navigation bar.
