Tabs

Semantic tabs are an easy way to organise content by grouping similar information on the same page. This allows content to be viewed without having to navigate away from that page.

Our semantic tabs are built using parts of Radix UI's Primitive Tabs which provides all the context handling, accessibility and keyboard navigation.

Easily build fully functioning semantic tabs by using the following components from the @eds/tabs package;

• <Tabs /> - Provides context and state for all sub-components.
• <TabList /> - Sub-component that should wrap the tab items. It handles overflow and bottom divider offset.
• <TabItem /> - The tab element that contains a label and can be triggered to show a tab panel.
• <TabPanel /> - Sub-component that contains the content of each tab item.

Show codeCopy code

Simply pass the same string to the value prop of both tab item and tab panel to connect them with each other, and also the defaultValue prop on the <Tabs /> component to set which tab to be initially rendered.

If you need to control the state of the tabs you can use the value and onValueChange props on the <Tabs /> wrapper component.

Navigational tabs are merely links that look exactly like semantic tabs. They are used for sub-page navigation within the same parent context.

For navigation tabs you don't need to wrap everything with the <Tabs /> component, or have any <TabPanel />'s. All you need are <TabItem />s as children of a <TabList />. As soon as you define the href prop the tab item becomes a "navigational tab". Use the isCurrentPage prop to indicate which page the user is currently on.

It also supports any global link override passed down via the @eds/core context. See an example of this at Global link override.

Show codeCopy code

Change the alignment of the tab items inside the tab list by setting the alignment prop to "start" | "center" | "stretch". It defaults to start.

Show codeCopy code

When placing the tabs in a layout that has padding, you can use the containerPadding responsive prop to make the tab list's divider and scroll container fill the width of the container. Prefer to use space tokens, but this prop also supports any padding value you want (using rem is highly recommended). It also supports the responsive prop syntax.

NOTE: In the example, the tab list's divider stretches out to the full width of the container.

Show codeCopy code

Communicate the status or tally of a tab's content using the badge or numberBadge prop, by passing in an object of supported props which in turn renders either a <Badge /> or <NumberBadge />. NOTE: You can not use both in the same <TabItem />.

Show codeCopy code

The <TabList /> utilises the ScrollWrap component to automatically support indicated horizontal scrolling when the tab list's width overflows the container.

Show codeCopy code

The <TabItem /> has a labelMaxWidth prop that defaults to 11rem, which truncates the label if the text exceeds its value. It's recommended to keep the tab item's label as short as possible, but for special cases where that's not possible you can set the max width to a larger value, or 100% to remove the truncation.

Show codeCopy code