Subnavigation

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

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.

Configuration

Each link container is the same height as the bar.

Space

Helpful tip

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

Interaction states

Interactive elements include inactive links and overflow buttons.

Hover

Inactive links and overflow buttons have the same hover state.

Focus

Helpful tip

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

Active

Helpful tip

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