Subnavigation

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Style
  2. Theme
  3. Configuration
  4. Space
  5. Interaction states
  1. Style
  2. Theme
  3. Configuration
  4. Space
  5. Interaction states

Style

A subnavigation is visually similar to tabs, but the text labels are links instead. They are arranged horizontally on a thin bar with no other styling except for the active page accent.

Anatomy

Anatomy image showing a subnavigation with various annotation numbers
  1. Active page
  2. Active page accent
  3. Inactive page
  4. Surface
  5. Overflow button - left
  6. Overflow button - right

Theme

A subnavigation is available in the light theme only right now.

Image of light theme desktop and mobile subnavigations

Configuration

Each link container is the same height as the bar.

Image of desktop and mobile subnavigations with various specs like height, width, and more

Space

Helpful tip

To view inset spacing when a subnavigation is used below the primary navigation or a heading, go to the Guidelines page.

 Image of desktop and mobile subnavigations with spacing values in between

Interaction states

Interactive elements include inactive links and overflow buttons.

Hover

Inactive links and overflow buttons have the same hover state.

Image of light theme hover states

Focus

Helpful tip

The Focus state has the same styles as the Hover state.

 Image of light theme focus states

Active

Helpful tip

The Active state has the same styles as the Hover state.

 Image of light theme active states
Edit this page on GitHub