Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
docs/components/tabmenu.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# 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>
```