Tabs

Tabs are a set of layered sections of content that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel.

fluent-tabs

Setup

import {
    provideFluentDesignSystem,
    fluentTab,
    fluentTabPanel,
    fluentTabs
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentTab(),
        fluentTabPanel(),
        fluentTabs()
    );

Example

Please see the Blazor documentation and demo site for more information.

Additional Resources

Code in GitHub W3C Component Aria Practices