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.

Property	Current value
tbd	see discussion

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.

Property	Current value
tbd	see discussion

Focus

Helpful tip

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

Property	Current value
tbd	see discussion

Active

Helpful tip

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

Property	Current value
tbd	see discussion