Skip to content

UnderlineNav

Use the UnderlineNav component 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) do |component| %>
<% component.body do %>
<%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
<% end %>
<% component.actions do %>
<%= render(Primer::ButtonComponent.new) { "Button!" } %>
<% end %>
<% end %>

Align right

<%= render(Primer::UnderlineNavComponent.new(align: :right)) do |component| %>
<% component.body do %>
<%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
<% end %>
<% component.actions do %>
<%= render(Primer::ButtonComponent.new) { "Button!" } %>
<% end %>
<% end %>

Arguments

NameTypeDefaultDescription
alignSymbol:leftOne of :left and :right. - Defaults to left
system_argumentsHashN/ASystem arguments

Slots

Body

Use the body for the navigation items

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

Actions

Use actions for a call to action

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments