NavigationTab

Alpha

View source View storybook

On this page

Accessibility
Arguments
Slots
Examples

This component is part of navigation components such as Primer::Alpha::TabNav and Primer::Alpha::UnderlineNav 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

Name	Type	Default	Description
`list`	`Boolean`	`false`	Whether the Tab is an item in a `<ul>` list.
`selected`	`Boolean`	`false`	Whether the Tab is selected or not.
`with_panel`	`Boolean`	`false`	Whether the Tab has an associated panel.
`panel_id`	`String`	`""`	Only applies if `with_panel` is `true`. Unique id of panel.
`icon_classes`	`Boolean`	`""`	Classes that must always be applied to icons.
`wrapper_arguments`	`Hash`	`{}`	System arguments to be used in the `<li>` wrapper when the tab is an item in a list.
`system_arguments`	`Hash`	N/A	System 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 UnderlineNav and TabNav implementations for examples.

Name	Type	Default	Description
`system_arguments`	`Hash`	N/A	System arguments

`Icon`

Icon to be rendered in the Tab left.

Name	Type	Default	Description
`kwargs`	`Hash`	N/A	The same arguments as Octicon.

`Text`

The Tab's text.

Name	Type	Default	Description
`kwargs`	`Hash`	N/A	The same arguments as Text.

`Counter`

Counter to be rendered in the Tab right.

Name	Type	Default	Description
`kwargs`	`Hash`	N/A	The same arguments as Counter.

Examples

Default

Selected Not selected

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

Tab Tab 10 Tab 10

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

Tab

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

With custom HTML

This is my custom HTML

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

Edit this page on GitHub