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.

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.
body_argumentsHash{}System arguments for the body wrapper.
wrapper_argumentsHash{}System arguments for the TabContainer wrapper. Only applies if with_panel is true.
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

<%= 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 %>

With extra content

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

Customizing the wrapper

<%= render(Primer::TabNavComponent.new(label: "Default", wrapper_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 %>