Tab

Tab Figma

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 elements inside of a wrapping element with class .hc-tabs.

We recommend the wrapping element is a <menu> and the inner elements <li>. The link, if any, goes inside of this list item. This is an update as of March 2026 for accessibility purposes.

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.

html
Expand Edit in Playground Copy 

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

If you’re using links as the .hc-tab elements, they 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.

html
Expand Edit in Playground Copy 

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

html
Expand Edit in Playground Copy 

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

Adding icons or avatars

Add a relevant icon, avatar, or other decoration before the tab’s label by placing that component inline before the label text. It can be helpful to wrap the label in a <span> but it’s not necessary.

When using icons or avatars, size classes will not work as the size is set directly on these within the tab component itself.

The following example shows icons and avatars, but any relevant component will work.

html
Expand Edit in Playground Copy 

<menu class="hc-tabs" role="tablist" aria-label="Decorated tabs">
  <li class="hc-tab" role="tab">
    <a href="javascript:;">
      <i class="hc-icon hc-icon--16 hc-icon--dashboard"></i>
      <span>Dashboard</span>
    </a>
  </li>
  <li class="hc-tab" role="tab">
    <a href="javascript:;">
      <i class="hc-icon hc-icon--16 hc-icon--calendar"></i>
      <span>Calendar</span>
    </a>
  </li>
  <li class="hc-tab hc-is--active" role="tab" aria-selected="true">
    <a href="javascript:;">
      <i class="hc-icon hc-icon--16 hc-icon--user-circle"></i>
      <span>Profile</span>
    </a>
  </li>
  <li class="hc-tab" role="tab">
    <a href="javascript:;">
      <span class="hc-avatar hc-avatar-image hc-avatar-image--calculator">Math 101 avatar</span>
      <span>Math 101</span>
    </a>
  </li>
  <li class="hc-tab" role="tab">
    <a href="javascript:;">
      <span class="hc-avatar hc-avatar-image hc-avatar-image--earth">Science Lab avatar</span>
      <span>Science Lab</span>
    </a>
  </li>
</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.

html
Expand Edit in Playground Copy 

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