UnderlineNav

Alpha

View source View storybook

On this page

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

Name	Type	Default	Description
`tag`	`Symbol`	`:nav`	One of `:div` and `:nav`.
`label`	`String`	N/A	Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements.
`align`	`Symbol`	`:left`	One of `:left` and `:right`. - Defaults to left
`body_arguments`	`Hash`	`{}`	System arguments for the body wrapper.
`system_arguments`	`Hash`	N/A	System arguments

Slots

`Tabs`

Use the tabs to list page links.

Name	Type	Default	Description
`selected`	`Boolean`	N/A	Whether the tab is selected.
`system_arguments`	`Hash`	N/A	System arguments

`Actions`

Use actions for a call to action.

Name	Type	Default	Description
`tag`	`Symbol`	`:div`	One of `:div` and `:span`.
`system_arguments`	`Hash`	N/A	System 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: :accent_emphasis })) do |c| %>
  <% c.tab(selected: true, href: "#") { "Tab 1" }%>
  <% c.tab(href: "#") { "Tab 2" } %>
  <% c.tab(href: "#") { "Tab 3" } %>
<% end %>

Edit this page on GitHub