Skip to main content

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/navigation';

    Demo​

    CodeSandbox

    Use icons​

    By using prefixIcon you can add icons to each tab.

    CodeSandbox

    Disable a 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 state​

    CodeSandbox

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

    CodeSandbox
    Still have questions?
    Find answers in the Dynatrace Community