Ariadne

Your awesome title docs

TabNavComponent

import Example from ‘../../src/@primer/gatsby-theme-doctocat/components/example’ import RequiresJSFlash from ‘../../src/@primer/gatsby-theme-doctocat/components/requires-js-flash’

Use TabNavComponent to style navigation links, typically placed at the top of the page.

For panel navigation, use TabContainerComponent instead.

Accessibility

  • By default, TabNavComponent 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.
  • See TabComponent for additional accessibility considerations.

Arguments

Name Type Default Description
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.
tag Symbol, String :nav The rendered tag name.
classes String "" Classes and attributes
attributes Hash {} Classes and attributes

Slots

Tabs

Tabs to be rendered. Use the tabs to list page links.

Name Type Default Description
selected Boolean N/A Whether the tab is selected.
classes String N/A Classes and attributes
attributes Hash N/A Classes and attributes

Examples

Default with <nav>

<nav> is a landmark and should be reserved for main navigation links. See Accessibility.

<%= render(Ariadne::TabNavComponent.new(label: "Nav")) do |c| %>
  <% c.tab(selected: true, href: "#") { "Tab 1" } %>
  <% c.tab(href: "#") { "Tab 2" } %>
  <% c.tab(href: "#") { "Tab 3" } %>
<% end %>

Have questions?

Still have questions? Talk to support.

Previous
TabContainerComponent
Next
TableNavComponent