Skip to content

UnderlineNav

Alpha

Use UnderlineNav to style navigation links with a minimal underlined selected state, typically placed at the top of the page. For panel navigation, use UnderlinePanels instead.

Accessibility

  • By default, UnderlineNav 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.
alignSymbol:leftOne of :left and :right. - Defaults to left
body_argumentsHash{}System arguments for the body wrapper.
system_argumentsHashN/ASystem arguments

Slots

Tabs

Use the tabs to list page links.

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

Actions

Use actions for a call to action.

NameTypeDefaultDescription
tagSymbol:divOne of :div and :span.
system_argumentsHashN/ASystem arguments

Examples

Default with <nav>

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

<%= render(Primer::Alpha::UnderlineNav.new(label: "Default with nav element")) 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 <div>

<%= render(Primer::Alpha::UnderlineNav.new(tag: :div, label: "With div element")) 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::Alpha::UnderlineNav.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::Alpha::UnderlineNav.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 %>

Customizing the body

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