Skip to content

NavigationTab

This component is part of navigation components such as Primer::TabNavComponent and Primer::UnderlineNavComponent and should not be used by itself.

Accessibility

TabComponent renders the selected anchor tab with aria-current="page" by default. When the selected tab does not correspond to the current page, such as in a nested inner tab, make sure to use aria-current="true"

Arguments

NameTypeDefaultDescription
listBooleanfalseWhether the Tab is an item in a <ul> list.
selectedBooleanfalseWhether the Tab is selected or not.
with_panelBooleanfalseWhether the Tab has an associated panel.
icon_classesBoolean""Classes that must always be applied to icons.
wrapper_argumentsHash{}System arguments to be used in the <li> wrapper when the tab is an item in a list.
system_argumentsHashN/ASystem arguments

Slots

Panel

Panel controlled by the Tab. This will not render anything in the tab itself. It will provide a accessor for the Tab's parent to call and render the panel content in the appropriate place. Refer to UnderlineNavComponent and TabNavComponent implementations for examples.

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

Icon

Icon to be rendered in the Tab left.

NameTypeDefaultDescription
kwargsHashN/AThe same arguments as Octicon.

Text

The Tab's text.

NameTypeDefaultDescription
kwargsHashN/AThe same arguments as BetaText.

Counter

Counter to be rendered in the Tab right.

NameTypeDefaultDescription
kwargsHashN/AThe same arguments as Counter.

Examples

Default

<%= render(Primer::Navigation::TabComponent.new(selected: true)) do |c| %>
<% c.text { "Selected" } %>
<% end %>
<%= render(Primer::Navigation::TabComponent.new) do |c| %>
<% c.text { "Not selected" } %>
<% end %>

With icons and counters

<%= render(Primer::Navigation::TabComponent.new) do |c| %>
<% c.icon(:star) %>
<% c.text { "Tab" } %>
<% end %>
<%= render(Primer::Navigation::TabComponent.new) do |c| %>
<% c.icon(:star) %>
<% c.text { "Tab" } %>
<% c.counter(count: 10) %>
<% end %>
<%= render(Primer::Navigation::TabComponent.new) do |c| %>
<% c.text { "Tab" } %>
<% c.counter(count: 10) %>
<% end %>

Inside a list

<%= render(Primer::Navigation::TabComponent.new(list: true)) do |c| %>
<% c.text { "Tab" } %>
<% end %>

With custom HTML

<%= render(Primer::Navigation::TabComponent.new) do %>
<div>
This is my <strong>custom HTML</strong>
</div>
<% end %>