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 Primer::Alpha::Navigation::Tab for additional accessibility considerations.

Arguments

Name	Type	Default	Description
tag	`Symbol`	`:nav`	One of `:div` or `:nav`.
label	`String`	N/A	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	`Hash`	N/A	System arguments

Examples

Slots

`tabs`

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

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

`extra`

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

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

Primer Design System

Site navigation