Underline nav

The underline nav is used to display navigation in a horizontal tabbed format.

v0.36.1AlphaNot reviewed for accessibility

Description

Use UnderlineNav to style navigation links with a minimal underlined selected state, typically placed at the top of the page.

For panel navigation, use UnderlinePanels instead.

Accessibility

  • By default, UnderlineNav 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

NameTypeDefaultDescription
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.

align
Symbol

:left

One of :left or :right. - Defaults to left

body_arguments
Hash

{}

System arguments for the body wrapper.

system_arguments
Hash

N/A

Examples

Slots

tabs

Use the tabs to list page links.

NameTypeDefaultDescription
selected
Boolean

N/A

Whether the tab is selected.

system_arguments
Hash

N/A

actions

Use actions for a call to action.

NameTypeDefaultDescription
tag
Symbol

:div

One of :div or :span.

system_arguments
Hash

N/A