Tab Figma Code Connected

The Tab component is a horizontal navigation bar designed to be used within a page, to organize its content or sections without leaving that page context.

We also refer to the main group as a tab bar and the individual links as tabs.

Default tabs

Create a standard tab bar by wrapping a number of .hc-tab links inside of a wrapping element with class .hc-tabs.

Append the class .hc-is--active to the active tab to give it prominence. See the accessibily note and the code below for the appropriate ARIA attributes as well.

<menu class="hc-tabs" role="tablist" aria-label="Dashboard tabs">
  <a href="javascript:;" class="hc-tab hc-is--active" role="tab" aria-selected="true">
    Active tab
  </a>
  <a href="javascript:;" class="hc-tab" role="tab">
    Second tab
  </a>
  <a href="javascript:;" class="hc-tab" role="tab">
    Third tab
  </a>
  <a href="javascript:;" class="hc-tab" role="tab">
    Fourth tab
  </a>
  <a href="javascript:;" class="hc-tab" role="tab">
    Fifth tab
  </a>
</menu>

Accessibility note

The .hc-tabs wrapper element should have role="tablist" as well as an appropriate aria-label describing the tab group or what it’s used for.

Each of the .hc-tab links inside the menu should have role="tab" as well. For the active tab, add aria-selected="true". Note that this should not be aria-current, which identifies the currently selected item for all elements other than gridcell, option, row, and tab. These four take aria-selected.

Full bleed tab bar

You can expand the tab bar to the edge of the main content section to create more of a dilineation. This should be reserved for tab bars that are at the top of the screen and represent major content sections on a page.

Append the class .hc-tabs--expanded to the .hc-tabs element for this effect.

<menu class="hc-tabs hc-tabs--expanded" role="tablist" aria-label="Dashboard tabs">
  <a href="javascript:;" class="hc-tab">
    Active tab
  </a>
  <a href="javascript:;" class="hc-tab" role="tab">
    Second tab
  </a>
  <a href="javascript:;" class="hc-tab hc-is--active" role="tab" aria-selected="true">
    Third tab
  </a>
  <a href="javascript:;" class="hc-tab" role="tab">
    Fourth tab
  </a>
  <a href="javascript:;" class="hc-tab" role="tab">
    Fifth tab
  </a>
</menu>

This modifier extends the tab bar out 2rem to the right and left, which is the horizontal padding on the .hc-app-content content used in the Layout framework.