Skip to content
4.2.2

Tabs

Tabs make it easy to view and navigate stacked panels of related content. They are especially useful when you need to show a lot of content in a small space.

Installation

bash
npm install @nib-components/tabs

Usage

jsx
import {Tabs, Tab, TabList, TabPanel} from '@nib-components/tabs';

This package contains a number of components built on top of the react-tabs library built by React.

Tabs

The wrapping component.

This is an implementation of the react-tabs Tabs component.

TabList

The list of tabs. The tabs are stacked below our lg breakpoint and inline-flex for screen sizes above this. If tabs do not fit within the container space on one line, tabs become horizontally scrollable.

Gradients are conditionally added to offer visual affordance.

This component is where we add our own custom props for styling.

This is an implementation of the react-tabs TabList component.

Tab

The individual tab component.

This is an implementation of the react-tabs Tab component.

TabPanel

The content related to the tab. Only one is visible at a time.

We do not supply any styling to the TabPanel component to support a wide range of implementations.

This is an implementation of the react-tabs TabPanel component.

Interactive demo

Any content 2

Natoque iaculis a id ullamcorper lobortis aliquam magna massa nec ut scelerisque phasellus potenti torquent consectetur natoque.

Ac adipiscing nulla facilisi ullamcorper ut ultricies scelerisque.

jsx

Props

Tabs

See react-tabs documentation for Tabs props.

TabList

The following props are in addition to the react-tabs TabList props.

PropTypeDefaultDescription
backgroundA string or a function that returns a color (see our color selectors in Theme)whiteDue to a limitation of our responsive styling, it is required that a background color is set for the TabList. If no background is specified it defaults to white.
centerbooleanfalseAbove the lg breakpoint, when tabs do not take up the full width of the TabList they are left-aligned. This cannot be used alongside the fill prop.
fillbooleanfalseAbove the lg breakpoint, we can force the tabs to expand to take up the full width of the TabList by setting the fill prop to true. This cannot be used alongside the center prop.
invertbooleanfalseWhen rendered on a darker background the invert prop can be used to render the TabList in white.

Tab

See react-tabs documentation for Tabs props.

TabPanel

See react-tabs documentation for TabPanel props.

Design

By default, tabs are left aligned. They can be set to centre themselves within the TabList, or can also be set to fill the entire horizontal space.

To assist user understanding, as a default, there must always be one tab pre-selected, and the panel below it must be visible. Only a single content panel can be shown at a time. Tabs should always be placed above the content they relate to, never underneath. Additionally, the order of the tabs from left to right should never change, only the content panel should change.

You can use a minimum of two tabs at a time, but should be sure to only use a single row of tabs. Each of these things provide the visual cues and context to help a user understand tabs and their related content.

Responsive design

Above the lg breakpoint, tabs are displayed inline. If they do not fit within the viewport they are horizontally scrollable, with a gradient displayed as a visual cue to show the user there is more content available.

On screens below the lg breakpoint, tabs are vertically stacked.

Icons

Tabs should not include icons - we do not currently support adding icons to communicate the type of content a tab represents.

Touch UI

The tap area of the tabs are above the minimum recommended size requirements as referenced in Apple's Human Interface Guidelines.

Labels

Tab labels should provide clear and concise explanations of the content within. They should be no longer than one or two words and should be accurate in their description.

Each tab's content is independently categorised and mutually exclusive of the content of other tabs. Be sure to check your tabs make sense when read in isolation, especially in the context of screen reader usage.

Accessibility

If you are using a screen reader with Javascript turned on, you should be able to navigate the tabs pattern in the following way:

  • You can use left/right arrow, or up/down arrow to switch tabs
  • You can also use the TAB key to focus the tabs

The tab panel should have a heading to reduce confusion for people using screen readers, though this heading can be visually hidden.