Skip to content

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 NavigationTab for additional accessibility considerations.

Arguments

NameTypeDefaultDescription
tagSymbol:navOne of :div and :nav.
labelStringN/ASets an aria-label that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements.
body_argumentsHash{}System arguments for the body wrapper.
system_argumentsHashN/ASystem arguments

Slots

Tabs

Tabs to be rendered. For more information, refer to NavigationTab.

NameTypeDefaultDescription
selectedBooleanN/AWhether the tab is selected.
system_argumentsHashN/ASystem arguments

Extra

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

NameTypeDefaultDescription
alignSymbolN/AOne of :left and :right.

Examples

Default with <nav>

<nav> is a landmark and should be reserved for main navigation links. See Accessibility.

<%= render(Primer::Alpha::TabNav.new(label: "Default")) do |c| %>
<% c.tab(selected: true, href: "#") { "Tab 1" } %>
<% c.tab(href: "#") { "Tab 2" } %>
<% c.tab(href: "#") { "Tab 3" } %>
<% end %>

Default with <div>

<%= render(Primer::Alpha::TabNav.new(label: "Default")) do |c| %>
<% c.tab(selected: true, href: "#") { "Tab 1" } %>
<% c.tab(href: "#") { "Tab 2" } %>
<% c.tab(href: "#") { "Tab 3" } %>
<% end %>

With icons and counters

<%= render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |component| %>
<% component.tab(href: "#", selected: true) do |t| %>
<% t.icon(icon: :star) %>
<% t.text { "Item 1" } %>
<% end %>
<% component.tab(href: "#") do |t| %>
<% t.icon(icon: :star) %>
<% t.text { "Item 2" } %>
<% t.counter(count: 10) %>
<% end %>
<% component.tab(href: "#") do |t| %>
<% t.text { "Item 3" } %>
<% t.counter(count: 10) %>
<% end %>
<% end %>

With extra content

<%= render(Primer::Alpha::TabNav.new(label: "With extra content")) do |c| %>
<% c.tab(selected: true, href: "#") { "Tab 1" }%>
<% c.tab(href: "#") { "Tab 2" } %>
<% c.tab(href: "#") { "Tab 3" } %>
<% c.extra do %>
<%= render(Primer::ButtonComponent.new(float: :right)) { "Button" } %>
<% end %>
<% end %>

Adding extra content after the tabs

<%= render(Primer::Alpha::TabNav.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |c| %>
<% c.tab(selected: true, href: "#") { "Tab 1" }%>
<% c.tab(href: "#") { "Tab 2" } %>
<% c.tab(href: "#") { "Tab 3" } %>
<% c.extra(align: :right) do %>
<div>
<%= render(Primer::ButtonComponent.new) { "Button" } %>
</div>
<% end %>
<% end %>

Customizing the body

<%= render(Primer::Alpha::TabNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
<% c.tab(selected: true, href: "#") { "Tab 1" }%>
<% c.tab(href: "#") { "Tab 2" } %>
<% c.tab(href: "#") { "Tab 3" } %>
<% end %>