class Primer::Alpha::TabNav
accessibility considerations.
- See <%= link_to_component(Primer::Navigation::TabComponent) %> for additional
For all other set of links, set tag to ‘:div`.
implicit landmark role of `navigation` which should be reserved for main links.
- By default, `TabNav` renders links within a `<nav>` element. `<nav>` has an
@accessibility
For panel navigation, use <%= link_to_component(Primer::Alpha::TabPanels) %> instead.
Use `TabNav` to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
def initialize(label:, tag: TAG_DEFAULT, body_arguments: {}, **system_arguments)
-
system_arguments(Hash) -- <%= link_to_system_arguments_docs %> -
body_arguments(Hash) -- <%= link_to_system_arguments_docs %> for the body wrapper. -
label(String) -- Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements. -
tag(Symbol) -- <%= one_of(Primer::Alpha::TabNav::TAG_OPTIONS) %>
Other tags:
- Example: Customizing the body -
Example: Adding extra content after the tabs -
Example: With extra content -
Example: With icons and counters -
Example: Default with `
` -
Example: Default with `
Example: Default with `
def initialize(label:, tag: TAG_DEFAULT, body_arguments: {}, **system_arguments) @align = EXTRA_ALIGN_DEFAULT @system_arguments = system_arguments @body_arguments = body_arguments @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT) @system_arguments[:classes] = tab_nav_classes(system_arguments[:classes]) @body_arguments[:tag] = BODY_TAG_DEFAULT @body_arguments[:classes] = tab_nav_body_classes(body_arguments[:classes]) aria_label_for_page_nav(label) end