Skip to main content

Tabs

Use Tabs to organize related content into distinct views that users navigate one at a time. Selecting a tab replaces the entire content area.

OverviewPropertiesUsage

Import​

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

Demo​

Use icons​

By using prefixIcon you can add icons to each tab.

Disable a tab​

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

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.

Control state​

Change panel overflow​

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

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 Tab content in the DOM to preserve the state, you can set the keepMounted prop on the component.

Still have questions?
Find answers in the Dynatrace Community