Tabs

Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.

Installation

The Tabs component consists of a <nve-tabs> parent element and many <nve-tabs-item> elements slotted as children. The selected attribute when applied to an item by the host application gives the selected tab the proper selected styles.

Apply the disabled attribute to an item to get the proper visual cues and prevent interaction. The elements handle all default interaction, hover, and active states.

Additionally, the component handles all keyboard navigation and accessibility concerns out of the box. Try using left/right arrow keys on horizontal tabs or up/down on vertical tabs.

Borderless Tabs

By default Tabs shows a blue border on the selected item. You can disable the border by setting borderless on the parent <nve-tabs>

Border Styles

You can change the border styles by overriding --indicator-background and --indicator-border-radius on <nve-tabs>

Tabs with Dot Indicators

Add dots and icons by simply slotting in <nve-icon> or <nve-dot> into your <nve-tabs-item>

Vertical Tabs

Tabs work as the foundation for a side menu by enabling vertical mode. Simply set vertical on <nve-tabs>

Borderless Vertical Tabs with Icons

This example shows the combination of vertical tabs, set to borderless, with icons slotted. You can build an Icon only collapsed version of vertical tabs off this system.

Stateless Tabs

By default Tabs is stateless. This means the host application must handle selection behavior. The component provides a way to opt in to stateful selection behavior where click events and keyboard enter trigger the selection state.

All other examples on this page set behavior-select on the parent <nve-tabs> to opt into stateful behavior. The following example shows the default stateless behavior, where the host app has to set/remove the selected attribute on child <nve-tabs-item>.

Links

Grouped Tabs

Use <nve-tabs-group> when a selected tab should also reveal matching panel content. The group keeps selection and panel visibility in sync by matching each tab item value to a named panel slot on the group.

Wrap a single <nve-tabs> in the default slot, add command="--toggle" and commandfor="<group-id>" to each <nve-tabs-item>, and provide panel elements with slot="<value>". Most consumers only need slot, value, command, and commandfor. The group handles the tab panel role and ARIA linkage internally, so consumer markup can stay focused on content.

Do not use behavior-select on <nve-tabs> when the group is present. Let the group coordinate selection.

By default alignment is top, which places the tab strip above the panel region in a column layout.

Stacked vs Horizontal

Use alignment="start" or alignment="end" on <nve-tabs-group> when you want a vertical tab strip beside the panel region instead of stacked tabs (alignment="top" is the default). start places the tab strip at inline-start; end places it at inline-end (for example, left versus right in LTR). Set vertical on <nve-tabs> and size the tab strip with a width that fits your layout.

External Controls

<nve-tabs-group> also accepts external invokers such as <nve-button> as long as they target the group with commandfor and provide a matching value. This works well when secondary controls elsewhere on the page should reveal the same tab panel content.

Release Status