# Top Nav Mega Menu Item

## Usage

An individual item inside an TopNavMegaMenu. Renders itself in both desktop (popover grid) and mobile drawer modes via render mode context.

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

One item stands for one destination: a title, an optional description under it, and an optional leading icon. Pass `href` to render a link; leave it out and the item is a `<button type="button">`. The icon comes from an `iconClass` CSS icon class or from the `icon` slot, which wins when both are present.

Items go in the default slot of `TopNavMegaMenu`, next to the optional `featured` slot. Clicking an item closes the menu it sits in. Rendered on its own it still shows the title, description, and icon, but there is no menu around it to close.

## Examples

### Basic

Rich link items with an icon, title, and description. Use inside the items slot of a TopNavMegaMenu to describe each destination.

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

<template>
  <div class="top-nav-mega-menu-item-preview__grid">
    <TopNavMegaMenuItem
      description="Run serverless code at the network edge"
      href="#edge"
      icon-class="i-carbon-flash"
      title="Edge Functions"
    />
    <TopNavMegaMenuItem
      description="Object and file storage for your application"
      href="#storage"
      icon-class="i-carbon-data-base"
      title="Storage"
    />
  </div>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | — | Display title for the menu item. Required. |
| `description` | `string` | — | Optional description text displayed below the title. |
| `href` | `string` | — | URL to navigate to when clicked. Without it the item renders as a button. |
| `as` | `NavLinkComponent` | — | Custom component to render instead of `<a>` for link items. Overrides the provider-level default set by `LinkProvider`. |
| `iconClass` | `string` | — | CSS icon class drawn in the leading icon box. The `icon` slot takes precedence. |

## Events

The item emits no events of its own. A click closes the surrounding <code>TopNavMegaMenu</code>, and navigation goes through <code>href</code> or the component passed to <code>as</code>.

## Slots

- `icon`: icon content placed ahead of the title. Replaces the glyph from `iconClass`. Hidden from assistive technology, so the title carries the meaning.