Organizes content into selectable, horizontally laid out sections.

Create tabs from an array to keep labels and panel content in sync.

Control the active tab with the value property.

Long tab lists are navigable by default; previous and next buttons appear automatically when the tabs overflow the available width.

Set selectOnFocus to activate tabs on focus.

By default, inactive tab's content is rendered (but hidden). You can use the lazy property (either globally on Tabs or individually on a TabPanel) to change this behavior so that content is only rendered when the tab becomes active. This is useful when a tab contains complex components that should only be initialized once the tab is activated.

Set disabled on a Tab to prevent selection.

The active tab highlight can be restyled into a custom indicator through the activeBar pass through option, using the --px-active-bar-* CSS variables that hold the active tab's position and size.

Use custom markup inside tabs and panels to build richer tab content.

A navigation menu is implemented using tabs without the panels where the content of a tab is provided by a route component like router-view. For the purpose of this demo, router-view is not included.

Screen Reader

The tabs container in TabList is defined with the tablist role, as any attribute is passed to the container element aria-labelledby can be optionally used to specify an element to describe the Tabs. Each Tab has a tab role along with aria-selected state attribute and aria-controls to refer to the corresponding TabPanel. TabPanel has tabpanel role, an id to match the aria-controls of Tab and aria-labelledby reference to Tab as the accessible name.

Tab Keyboard Support