Tabs should be used in conjunction with cards to give the user multiple views.
Tabs should ideally be applied to information within a card that can be split evenly and easily digestible, for example multiple tables for one entity.
Write short tab labels and use plain language. Tab labels should usually be 1–2 words. Short labels are more scannable; if you need longer labels, it’s a sign that the choices are too complicated for a tab control.
Tabs consist of two or more text links with a visual indicator of which tab is currently selected.
To maintain an uncluttered UI no more than 6 tabs should be used together.
Use the appropriate ARIA attributes for screen readers where applicable.
Tabs can be clicked, tapped and selected by tabbing on a keyboard. Typically the first tab will be selected by default.
If the user navigates back using the breadcrumb, the previously selected tab should be selected. i.e. if I navigate forward from Tab 2, then it should be selected if I reverse my navigation.
If the users refreshes the page the current selected tab should remain selected. (Eg through query params).
import { Tabs } from '@shieldpay/bumblebee/tabs'; <Tabs> <Tabs.Item to="/components/tabs/1">Tab one</Tabs.Item> <Tabs.Item to="/components/tabs/2"> The long title of tab two </Tabs.Item> <Tabs.Item to="/components/tabs/3">The third tab</Tabs.Item> <Tabs.Item to="/" disabled> A disabled tab </Tabs.Item> </Tabs> <Tabs> <Tabs.Item id="tab-1" onClick={handleClick} selectedTab={selectedTab}> Tab one </Tabs.Item> <Tabs.Item id="tab-2" onClick={handleClick} selectedTab={selectedTab}> The long title of tab two </Tabs.Item> <Tabs.Item id="tab-3" onClick={handleClick} selectedTab={selectedTab}> The third tab </Tabs.Item> <Tabs.Item disabled id="tab-4" onClick={handleClick} selectedTab={selectedTab} > A disabled tab </Tabs.Item> </Tabs> </Tabs>