Bugcrowd Design System

Bugcrowd Design System

Search/

Tabbed nav

Last modified:

Tabs help switch between different sets of content at the same level of hierarchy. 

<BcTabs>
  <BcTabs.List>
    <BcTabs.Tab>One</BcTabs.Tab>
    <BcTabs.Tab>Two</BcTabs.Tab>
    <BcTabs.Tab>Three</BcTabs.Tab>
  </BcTabs.List>
  <BcTabs.Panels>
    <BcTabs.Panel>
      <p>Click the tabs </p>
    </BcTabs.Panel>
    <BcTabs.Panel>
      <p>Yeah yeah. Whats up?</p>
    </BcTabs.Panel>
    <BcTabs.Panel>
      <p>Oh, hello there.</p>
    </BcTabs.Panel>
  </BcTabs.Panels>
</BcTabs>
Open in Playroom

React documentation

Last modified:

BcTabs Props

A set of tab elements and their associated tab panels.

PropTypeRequired?DefaultDescription
onTabClickfuncfalse() => nullA callback function on tab click.
activeTabReactTextfalse0Sets the active tab, custom value of Tab component is compared against this prop to toggle the active tab state. If activeTab prop is not passed, active tab state is toggled by index of the tab
classNamestringfalseTo add additional classes to the root element.

Any extended types?

React.HTMLAttributes<HTMLDivElement>

BcTabs.Tab Props

An element in the tab list that serves as a label for one of the tab panels and can be activated to display that panel.

Any children passed to this component will be wrapped inside <button> element.

PropTypeRequired?DefaultDescription
childrenReactNodetrueChildren are either tab labels or custom tab components.
isDisabledbooleanfalseApplies disabled styling and accessibility attributes to the underlying elements
tabPrefixstringfalsetabPrefix will be used to prefix the id and aria attributes for the underlying elements - button and tabpanel. Make sure it is unique.
valueReactTextfalseAssociate a custom value to the Tab component, BcTabs['activeTab'] will be compared against this props to toggle the active tab state.

BcTabs.TabNav Props

An element in the tab list that serves as a label for tab navigation and can be activated to display respective panel.

If href props is passed, children will get wrapped inside <a> element.

PropTypeRequired?DefaultDescription
childrenstring or ReactNodetrueChildren are either tab labels or custom tab components.
hrefstringfalseTo navigate between pages on tab click.
isDisabledbooleanfalseApplies disabled styling and accessibility attributes to the underlying elements
valueReactTextfalseAssociate a custom value to the Tab component, BcTabs['activeTab'] will be compared against this props to toggle the active tab state.

BcTabs.List

A set of tab elements.

BcTabs.Panels

A set of panel elements.

BcTabs.Panel

The element that contains the content associated with a tab.

When a tabbed interface is initialized, one tab panel is displayed and its associated tab is styled to indicate that it is active. When the user activates one of the other tab elements, the previously displayed tab panel is hidden, the tab panel associated with the activated tab becomes visible, and the tab is considered “active”.

HTML

Last modified:

Add .bc-tabbed-nav to an <nav> element.

Design

Last modified:

Using Tabbed navs

  • The first tab should be “active” by default --- it should be the most important or relevant tab
  • Use simple and short labels
  • Avoid disabling any tab(s) --- this is confusing to end users
  • Avoid long sets of tabs as they will wrap poorly at ≥md viewport breakpoint
  • Do not mix anchor and button tabs in the same tabbed nav

Disabled tabs

  • If an item anchor is disabled, set aria-disabled="true" on the anchor and omit its href. This will style the disabled anchor.
  • If an button is disabled, set disabled attribute to the button.

A backup .bc-tabbed-nav__item--disabled class is also provided if this is not possible.

Tabbed navs and JavaScript

Use JavaScript to dynamically change the active tab and its contents.

Two methods exist, using:

  • Anchors, for:
    • Separate web pages/endpoints
    • Content regions already existing on the page, linking each respective content container’s ID
  • Buttons for dynamic loading and/or hiding of content regions into the DOM.

When using anchors to link to other web pages set aria-current="page" on the current/selected anchor. Wrap the anchor list in a <nav>.

When using Javascript with either anchors or buttons to dynamically toggle tab content without page refreshes:

  • Set role="tablist" on the list
  • On each “Tab”:
    • Set role="tab" on each anchor or button
    • Set aria-controls on each anchor or button, linking its respective tabpanel ID
    • When using buttons, set the aria-selected boolean
    • When using anchors, set aria-current="true" on the current/selected tab.
  • On each “Tab panel”/content region:
    • Set role="tabpanel" on each content region
    • Set hidden on non-active content regions.

This is not required by using <button>s for dynamic route changes.

Usage guidance adapted from GOV.UK’s Tabs Design System entry and Chakra UI’s Tabs component.

Accessibility

Last modified:

Tabs are use to provide more visibility of sub sections of content there are in a page rather than dropdowns.

BcTabs provide 2 sub-components to render tabs - Tab and TabNav.

The Tab and TabNav component have been designed for different use cases. So providing custom components as children to each will behave differently.

First and foremost, if you want custom items inside the tab, we recommend using Tab component. 👈

For components that will trigger a change in window location, such as React router <Link> or anchor elements with an href, please use TabNav. TabNav is designed to work as an anchor element with an href attributes.

If you are implementing a custom component that does not do that:

  1. Prefer using Tab instead 👆
  2. If you really want your own component not to be wrapped inside a button element, you will need to fully control the state of the active tab by having an onClick handler on your custom component. You will also lose any styling on the tab.

Rationale

Last modified:

Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.

Each tab panel has an associated tab element, that when activated, displays the panel.

The list of tab elements is arranged along one edge of the currently displayed panel, most commonly the top edge.

See also

Last modified: