Skip to content

TabNav

Table of contents
Table of contents
This component requires JavaScript to function. Please refer to the Installation section to set it up.

Use TabNav to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.

Examples

Default

<%= render(Primer::TabNavComponent.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::TabNavComponent.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 panels

Panel 1
<%= render(Primer::TabNavComponent.new(label: "With panels", with_panel: true)) do |c| %>
<% c.tab(selected: true) do |t| %>
<% t.text { "Tab 1" } %>
<% t.panel do %>
Panel 1
<% end %>
<% end %>
<% c.tab do |t| %>
<% t.text { "Tab 2" } %>
<% t.panel do %>
Panel 2
<% end %>
<% end %>
<% c.tab do |t| %>
<% t.text { "Tab 3" } %>
<% t.panel do %>
Panel 3
<% end %>
<% end %>
<% end %>

Arguments

NameTypeDefaultDescription
labelStringN/AUsed to set the aria-label on the top level <nav> element.
with_panelBooleanfalseWhether the TabNav should navigate through pages or panels.
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