Tabs

Tabs allow users to easily navigate between sections within the same window. Each tab contains related information, settings and actions.

• Interactive Playground
• Anatomy
• States
• Type
• Behavior
• Specs
• Keyboard Interactions
• Related Content

The Interactive Playground allows you to experiment with various switch styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

<div>
  <div class="neo-tabs">
    <div
      class="neo-tabs__nav"
      role="tablist"
      aria-owns="1 2"
      aria-orientation="horizontal"
    >
      <div class="neo-tabs__item neo-tabs__item--active">
        <a
          aria-controls="03a2709b-a95e-41ae-aade-446c727d5aa7"
          aria-disabled="false"
          aria-selected="true"
          aria-label="Tab item $1"
          role="tab"
          class
          href="#noop"
          id="1"
          rel="noreferrer"
          tabindex="0"
        >
          Tab item $1
        </a>
      </div>
      <div class="neo-tabs__item">
        <a
          aria-controls="6c2c4feb-9b25-450e-ac88-9b8acdfaf47c"
          aria-disabled="false"
          aria-selected="false"
          aria-label="Tab item $2"
          role="tab"
          class
          href="#noop"
          id="2"
          rel="noreferrer"
          tabindex="-1"
        >
          Tab item $2
        </a>
      </div>
    </div>
  </div>
  <div
    id="03a2709b-a95e-41ae-aade-446c727d5aa7"
    aria-labelledby="1"
    role="tabpanel"
    class="neo-tabs__container--active"
  >
    <p style="margin-top:1rem">
      content 1
    </p>
  </div>
  <div
    id="6c2c4feb-9b25-450e-ac88-9b8acdfaf47c"
    aria-labelledby="2"
    role="tabpanel"
    class="neo-tabs__container"
  >
    <p style="margin-top:1rem">
      content 2
    </p>
  </div>
</div>

<Tabs
  defaultIndex={0}
  orientation="horizontal"
>
  <TabList>
    <Tab
      icon={undefined}
      id="1"
    >
      Tab item $1
    </Tab>
    <Tab
      icon={undefined}
      id="2"
    >
      Tab item $2
    </Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p
        style={{
          marginTop: '1rem'
        }}
      >
        content 1
      </p>
    </TabPanel>
    <TabPanel>
      <p
        style={{
          marginTop: '1rem'
        }}
      >
        content 2
      </p>
    </TabPanel>
  </TabPanels>
</Tabs>

Tabs appear horizontally across the top, or vertically down the left of the panel. A tab bar is left justified or top justified according to the direction of the bar.

• Icon (Optional):

  An icon can help users to quickly identify the purpose of the tab. Icons should be used on all tabs or none. They should never be added purely for decoration, but should convey information to the user.

• Title:

  This text field shows the purpose of the tab and its contents.

• Line Details:

  A line appears beneath or beside the currently active tab.

A tab can exist in one of four states.

Enabled

Active

Hover

Disabled

• Enabled:

  A tab that is Enabled can be selected and it’s content will be displayed. It is not the tab currently shown.

• Active:

  The Active tab is the one currently displayed on the screen. It has a line drawn beneath or beside the text to show this status. The text is also blue and bold to further emphasize the Active status.

• Hover:

  When moving the mouse over a tab, it changes to the Hover state. It returns to its previous state when the mouse moves away.

• Disabled:

  A tab in this state cannot be selected or displayed. Some other action or setting must be altered to enable the tab.

Tabs can be arranged either horizontally across the panel, or stacked vertically on the left side of the panel.

Horizontal

Horizontal tabs appear across the top of the panel and are left-justified. Click the text to switch to that tab. The currently displayed tab will be underlined.

Vertical

Vertical tabs appear down the left side of the panel and are top-justified. Click the text to switch to that tab. The currently displayed tab will have a line to the left of the text.

Tabs conform to the following rules.

Spacing

Each horizontal tab will expand in width to fit the text label. The text is center-justified within the tab. Vertical tabs are all the same height with the text left justified.

DO: Tabs are connected together without any padding in-between.

DON'T: Do not add any padding in between each tab.

Labels

Labels describe the function of the options under each tab. They should be descriptive but short so the tab doesn’t get too big.

DO: Use tabs to categorize items with an equal level of importance.

DON'T: Do not wrap text to a second line in horizontal tabs. Shorten the label instead.

DO: Wrap text onto a second line in vertical tabs to make the width manageable.

DON'T: Do not truncate text. Shorten the label instead.

Icons

Add icons to help the user easily determine the function of each tab. They should never be used purely for decoration, but must provide a recognizable and understandable representation of what the tab does. Icons are optional.

DO: Use icons where there is value, and where there is a strong association with the label.

DON'T: Do not add icons on only some tabs within a group. Do not add them only for decoration.

Carousel

A list of tabs that is too long to fit within the panel is scrollable using the Carousel component. This applies to both vertical and horizontal tab bars. Clicking the arrows rotates the hidden tabs into view.

Each tab has a height of 36 pixels with 8 pixels of padding above and below the text.

Vertical Tab

Horizontal Tab

Accessibility requires that each item on the screen is reachable using the keyboard alone. The mouse is not always an option for some users.

Keyboard navigation employs the following shortcuts.