Tab FigmaFigma 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>

By default, the tab menu will not allow individual tabs to break to a new line. If the screen is smaller than the tab menu is wide, it will scroll horizontally. This is ideal for mobile handling.

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 for screens at md and above, which is the horizontal padding on the .hc-app-content content used in the Layout framework.

This is reduced to 1rem for smaller screen sizes, so please account for this with your media queries.

Disabled state

If a tab is disabled, simply add the attribute disabled to the .hc-tab element. Optionally (or additionally) append the class .hc-tab--disabled. Both achieve the same result but the disabled attribute is preferred as it’s semantic.

<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" disabled>
    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>

Applying a brand theme

If you’d like the active tab to take the brand color in the applied theme, simply append the class .hc-theme to the main .hc-tabs menu element.

<menu class="hc-tabs hc-theme" 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>