TabMenu

Switches between related views or navigation destinations.

html

<noora-tab-menu value="overview">
  <noora-tab-item value="overview">Overview</noora-tab-item>
  <noora-tab-item value="settings">Settings</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`	`Array<Record<string, unknown>>`	`[]`	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

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

Styling parts

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

Selection emits a noora-tab-change event.

Horizontal tabs

Switch between sibling views.

html

<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.

html

<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.

html

<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>