Skip to content

UnderlineNav

Alpha
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.

Arguments

NameTypeDefaultDescription
labelStringN/AThe aria-label on top level <nav> element.
with_panelBooleanfalseWhether the UnderlineNav should navigate through pages or panels. When true, TabContainer is rendered along with JavaScript behavior.
alignSymbol:leftOne of :left and :right. - Defaults to left
body_argumentsHash{ tag: BODY_TAG_DEFAULT }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

Use the tabs to list navigation items. When with_panel is set on the parent, a button is rendered for panel navigation. Otherwise, an anchor tag is rendered for page navigation. For more information, refer to NavigationTab.

NameTypeDefaultDescription
panel_idStringN/AOnly applies if with_panel is true. Unique id of panel.
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

<%= 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, id: "tab-1", panel_id: "panel-1") do |t| %>
<% t.text { "Item 1" } %>
<% t.panel do %>
Panel 1
<% end %>
<% end %>
<% component.tab(id: "tab-2", panel_id: "panel-2") do |t| %>
<% t.text { "Item 2" } %>
<% t.panel do %>
Panel 2
<% end %>
<% end %>
<% component.actions do %>
<%= render(Primer::ButtonComponent.new) { "Button!" } %>
<% end %>
<% end %>

Customizing the body

<%= render(Primer::UnderlineNavComponent.new(label: "Default", body_arguments: { tag: :ul, 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::UnderlineNavComponent.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 %>