Top navigation bar

The navigation bar displays common navigation, a global search bar, page titles, and page-level actions.

Anatomy

"A top navigation diagram displaying anatomy."
  1. Primary toolbar
  2. Secondary toolbar
  3. Leading button
  4. Content area
  5. Trailing buttons

Properties

Container

The container bounds the primary and secondary toolbars and automatically handles the devices safe zones.

"A stylized mobile screen with a top navigation bar titled “address” with a dotted pink outline."

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.

"A stylized mobile screen with a top navigation bar titled “address”."

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.

"Four unique layouts of top navigation."

Leading buttons

The leading button area of the primary toolbar contains the back button when viewing subpages and detail views.

"A stylized mobile screen with a top navigation bar titled “Security” and security content."

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.

""

Behavior

Title overflow

Titles are truncated in the default title layout when wider than the available space. Stacked titles are truncated at two lines.

A stylized mobile screen with a top navigation bar with a long German title.

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.

A stylized mobile screen with a top navigation bar with no title.

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.

A stylized mobile screen with a top navigation bar titled “Saved” with tabs and page content.

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.

A stylized mobile screen without a top navigation bar.

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.

A stylized mobile screen with an overlayed navigation bar.

Responsive layout

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.

A stylized mobile screen with a top navigation bar titled “deals” with tabs and a marketing banner below.

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.

A stylized tablet screen with a top navigation bar titled “deals” with tabs and a marketing banner below.

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.

A stylized large screen with a top navigation bar titled “deals” with tabs and a marketing banner below.

Best practices

Title length

Do use a large navigation bar when the title is long and would lead to wrapping.

A stylized mobile screen with a top navigation bar with a long German title.

Don’t use the smaller navigation bar if the title is likely to truncate.

A stylized mobile screen with a top navigation bar with a long German title that is truncated.

Trailing button style

Do use icon buttons as trailing buttons.

A stylized mobile screen with a top navigation bar titled “Address” with page content below.

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.

A stylized mobile screen with a top navigation bar titled “Address” including a “save” link button and page content below.

Amount of buttons

Do use icon buttons as trailing buttons.

A stylized mobile screen with a top navigation bar including three icon 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.

A stylized mobile screen with a top navigation bar including four icon buttons

Size

Do maintain the size and padding within the top navigation bar.

A stylized mobile screen with a top navigation bar titled “Selling”.

Don’t alter the size or padding of the navigation bar.

A stylized mobile screen with a top navigation bar titled “Selling” with decreased padding.

Specs

Spec for a top navigation bar. The padding on the left and right is 16px, top and bottom is 8px, in-between elements is 8px.