# Tab Menu

## Usage

`TabMenu` collects tabs that do not fit on the `TabList`. It has to be a child of `TabList`. Arrow keys move onto the trigger without changing the selected tab. Enter or Space opens the menu. The menu items are `menuitemradio` controls, and choosing one selects that tab through the list.

`label` is the trigger text when none of the options is selected, and the menu's accessible name. When an option is the selected tab, the trigger shows that option's label and takes the selected tab style. `iconClass` is a CSS icon class on an option, for example `i-carbon-settings`.

```vue
<script setup lang="ts">
import { Tab, TabList, TabMenu } from '@astryx-vue/core/TabList'
import { ref } from 'vue'

const value = ref('overview')
</script>

<template>
  <TabList v-model:value="value">
    <Tab value="overview">
      Overview
    </Tab>
    <Tab value="activity">
      Activity
    </Tab>
    <TabMenu
      label="More"
      :options="[
        { value: 'settings', label: 'Settings' },
        { value: 'billing', label: 'Billing' },
      ]"
    />
  </TabList>
</template>
```

## Examples

### Basic

Overview and Activity stay on the list. Settings and Billing sit in More.

```vue
<script setup lang="ts">
import { Tab, TabList, TabMenu } from '@astryx-vue/core/TabList'
import { ref } from 'vue'

const value = ref('overview')
</script>

<template>
  <TabList v-model:value="value">
    <Tab value="overview">
      Overview
    </Tab>
    <Tab value="activity">
      Activity
    </Tab>
    <TabMenu
      label="More"
      :options="[
        { value: 'settings', label: 'Settings' },
        { value: 'billing', label: 'Billing' },
      ]"
    />
  </TabList>
</template>
```

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | - | Trigger text when no option is selected, and the accessible name of the menu. |
| `options` | `TabMenuOption[]` | - | Tabs collected behind the trigger. |

## TabMenuOption

| Name | Type | Description |
| --- | --- | --- |
| `value` | `string` | Tab value passed to the parent `TabList`. |
| `label` | `string` | Menu item text. It replaces the trigger text while this option is selected. |
| `iconClass` | `string` | CSS icon class, for example `i-carbon-settings`. |

Selection is the parent list's <code>v-model:value</code>. The menu does not emit its own change event.