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