Skip to content

UnderlineNav

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

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

Examples

Default

<%= render(Primer::UnderlineNavComponent.new(label: "Default")) do |component| %>
<% component.tab(href: "#", selected: true) { "Item 1" } %>
<% component.tab(href: "#") { "Item 2" } %>
<% component.actions do %>
<%= render(Primer::ButtonComponent.new) { "Button!" } %>
<% end %>
<% end %>

With icons and counters

<%= render(Primer::UnderlineNavComponent.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 %>
<% component.actions do %>
<%= render(Primer::ButtonComponent.new) { "Button!" } %>
<% end %>
<% end %>

Align right

<%= render(Primer::UnderlineNavComponent.new(label: "Align right", align: :right)) do |component| %>
<% component.tab(href: "#", selected: true) do |t| %>
<% t.text { "Item 1" } %>
<% end %>
<% component.tab(href: "#") do |t| %>
<% t.text { "Item 2" } %>
<% end %>
<% component.actions do %>
<%= render(Primer::ButtonComponent.new) { "Button!" } %>
<% end %>
<% end %>

As a list

<%= render(Primer::UnderlineNavComponent.new(label: "As a list", body_arguments: { tag: :ul })) do |component| %>
<% component.tab(href: "#", selected: true) do |t| %>
<% t.text { "Item 1" } %>
<% end %>
<% component.tab(href: "#") do |t| %>
<% t.text { "Item 2" } %>
<% end %>
<% component.actions do %>
<%= render(Primer::ButtonComponent.new) { "Button!" } %>
<% end %>
<% end %>

With panels

Panel 1
<%= render(Primer::UnderlineNavComponent.new(label: "With panels", with_panel: true)) do |component| %>
<% component.tab(selected: true) do |t| %>
<% t.text { "Item 1" } %>
<% t.panel do %>
Panel 1
<% end %>
<% end %>
<% component.tab do |t| %>
<% t.text { "Item 2" } %>
<% t.panel do %>
Panel 2
<% end %>
<% end %>
<% component.actions do %>
<%= render(Primer::ButtonComponent.new) { "Button!" } %>
<% end %>
<% end %>

Arguments

NameTypeDefaultDescription
labelStringN/AThe aria-label on top level <nav> element.
with_panelBooleanfalseWhether the TabNav should navigate through pages or panels.
alignSymbol:leftOne of :left and :right. - Defaults to left
body_argumentsHash{ tag: BODY_TAG_DEFAULT }System arguments for the body wrapper.
system_argumentsHashN/ASystem arguments

Slots

Tabs

Use the tabs to list navigation items. For more information, refer to NavigationTab.

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

Actions

Use actions for a call to action.

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments