# Top Nav Menu

## Usage

`TopNavMenu` is a navigation item that shows a hover-triggered popover menu. Its entries are rich: each one carries an icon, a title, and an optional description.

An entry writes its title in `label`, its supporting line in `description`, and its icon class in `iconClass`.

```ts
import { TopNavMenu } from '@astryx-vue/core/TopNav'
```

## Examples

### Basic

A dropdown menu inside a TopNav built from an items array with icons and descriptions. Use it to group related destinations under a single trigger.

```vue
<script setup lang="ts">
import { TopNav, TopNavHeading, TopNavItem, TopNavMenu } from '@astryx-vue/core/TopNav'
</script>

<template>
  <TopNav label="Main navigation">
    <template #heading>
      <TopNavHeading heading="Platform" />
    </template>
    <TopNavItem href="#" is-selected label="Home" />
    <TopNavMenu
      label="Tools"
      :items="[
        { description: 'View traffic and engagement metrics', href: '#analytics', iconClass: 'i-carbon-analytics', label: 'Analytics' },
        { description: 'Configure your workspace', href: '#settings', iconClass: 'i-carbon-settings', label: 'Settings' },
      ]"
    />
  </TopNav>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | Text on the trigger button. Required. |
| `items` | `readonly TopNavMenuItem[]` | — | Entries of the popover menu. When the entries need custom content, write `NavMenuItem` elements in the default slot instead. |
| `showDelay` | `number` | `150` | Wait before the menu opens on hover, in milliseconds. |
| `hideDelay` | `number` | `200` | Wait before the menu closes after the pointer leaves, in milliseconds. |

## TopNavMenuItem fields

| Field | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | Item text. Required. |
| `description` | `string` | — | Supporting line under the text. |
| `href` | `string` | — | Renders the item as a link when set. Without it, the item is a plain menu entry. |
| `iconClass` | `string` | — | CSS class of the icon in front of the text. |
| `isDisabled` | `boolean` | `false` | Disabled entry. Arrow keys and typeahead skip it. |
| `id` | `string` | — | Stable key for the entry. The label is used when it is empty. |

## Events

- `openChange(isOpen: boolean)`: fires with `true` when the menu opens and `false` when it closes.

## Slots

- `default`: extra entries rendered as menu items, for example `NavMenuItem` elements.