Tabs

Tabs organize related content by grouping similar information into views or tab panels that are displayed one at a time.

OverviewPropertiesUsage

Import

import { Tab, Tabs } from '@dynatrace/strato-components-preview/navigation';

Use cases

CodeSandbox

Use icons in tabs

By using prefixIcon you can add icons to each tab.

CodeSandbox

Disable tab

The disabled prop allows you to disable specific tabs. In the example below, the third tab is disabled.

CodeSandbox

Default open tab

Allows you to open a specific tab when the component is loaded. In the example below, the third tab is open when component is loaded.

CodeSandbox

Control the state

CodeSandbox

Change the panel overflow

The panelOverflow prop allows you to enable/disable vertical scrolling when the content would overflow the tab panel.

CodeSandbox

Keep Tabs mounted

By default, when the Tab content is not visible to the user, it will also be removed from the DOM to prevent unwanted component updates on hidden elements. If you want to keep the Tabs content in the DOM to preserve the state, you can set the keepMounted prop on the component.

CodeSandbox