Tab Menu

Switches between related views or navigation destinations.

TabMenu web component

Switches between related views or navigation destinations.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Horizontal tabs

Switch between sibling views.

General

Settings

Members

<noora-tab-menu value="general">
  <noora-tab-item value="general" icon="category">General</noora-tab-item>
  <noora-tab-item value="settings">Settings</noora-tab-item>
  <noora-tab-item value="members">Members</noora-tab-item>
</noora-tab-menu>

Vertical tabs

Use labels with left, right, or paired icons.

Dashboard

Analytics

Settings

Users

<noora-tab-menu orientation="vertical">
  <noora-tab-item value="dashboard">Dashboard</noora-tab-item>
  <noora-tab-item value="analytics" icon="category">Analytics</noora-tab-item>
  <noora-tab-item value="settings" right-icon="category">Settings</noora-tab-item>
  <noora-tab-item value="users" icon="category" right-icon="category">Users</noora-tab-item>
</noora-tab-menu>

Vertical edge cases

Handle especially long and short labels.

Very Long Tab Label That Might Wrap

<noora-tab-menu orientation="vertical">
  <noora-tab-item value="long">Very Long Tab Label That Might Wrap</noora-tab-item>
  <noora-tab-item value="short">A</noora-tab-item>
</noora-tab-menu>

Attributes

Attribute	Type or allowed values	Default	Description
`orientation`	horizontal, vertical	`"horizontal"`	Controls the menu layout.
`value`	string	`None`	Gets or sets the selected item value.

Properties

Property	Type or allowed values	Default	Description
`items`	json	`[]`	Defines tabs programmatically when declarative noora-tab-item children are not used.

Events

Event	Type	Description
`noora-tab-change`	`CustomEvent<{ item: Record<string, unknown>; value: unknown }>`	Emitted when an enabled tab is selected.

Slots

Name	Description
`default`	Declarative noora-tab-item children.

Styling parts

Name	Description
`menu`	The menu container.
`item`	Each tab item.

Behavior

Selection emits a `noora-tab-change` event.