Tab nav

Tab nav contains a set of links that let users navigate between different views in the same context.

v0.21.0AlphaNot reviewed for accessibility

Description

Use TabNav to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page. For panel navigation, use TabPanels instead.

Accessibility

  • By default, TabNav renders links within a <nav> element. <nav> has an implicit landmark role of navigation which should be reserved for main links. For all other set of links, set tag to :div.
  • See Primer::Alpha::Navigation::Tab for additional accessibility considerations.

Arguments

NameDefaultDescription
tag

:nav

Symbol

One of :div or :nav.

label

N/A

String

Sets an aria-label that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements.

body_arguments

{}

Hash

System arguments for the body wrapper.

system_arguments

N/A

Hash

Examples

Slots

tabs

Tabs to be rendered. For more information, refer to Primer::Alpha::Navigation::Tab.

NameDefaultDescription
selected

N/A

Boolean

Whether the tab is selected.

system_arguments

N/A

Hash

extra

Renders extra content to the TabNav. This will be rendered after the tabs.

NameDefaultDescription
align

N/A

Symbol

One of :left or :right.