Tab nav

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

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 <%= link_to_component(Primer::Alpha::Navigation::Tab) %> for additional accessibility considerations.

Arguments

Name	Default	Description
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` System arguments

Examples

Slots

`tabs`

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

Name	Default	Description
selected	N/A	`Boolean` Whether the tab is selected.
system_arguments	N/A	`Hash` System arguments

`extra`

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

Name	Default	Description
align	N/A	`Symbol` One of `:left` or `:right`.

Primer Design System

Site navigation