# Top Nav Mega Menu

## Usage

Navigation item that displays a full-width mega menu panel on hover. Uses a slots API with items and featured props. TopNavMegaMenuItem renders itself in both desktop and mobile drawer modes. Supports inline collapsible drawer via render mode context.

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

<template>
  <TopNav label="Main navigation">
    <template #heading>
      <TopNavHeading heading="DevTools" href="#home" />
    </template>
    <TopNavItem href="#overview" label="Overview" />
    <TopNavMegaMenu label="Products">
      <TopNavMegaMenuItem title="Deploy" description="Ship to production in seconds" href="#deploy" />
      <TopNavMegaMenuItem title="Documentation" description="Guides, references, and tutorials" href="#documentation" />
      <template #featured>
        <TopNavMegaMenuFeaturedCard
          title="What's New"
          description="Check out our latest features and improvements in the Q2 release."
          link-label="Read the changelog"
          link-href="#changelog"
        />
      </template>
    </TopNavMegaMenu>
  </TopNav>
</template>
```

## Examples

### TopNavMegaMenu — Basic

A mega menu trigger inside a TopNav that opens a panel of rich link items. Use when a navigation section has multiple destinations worth describing.

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

<template>
  <TopNav label="Main navigation">
    <template #heading>
      <TopNavHeading heading="DevTools" href="#home" />
    </template>
    <TopNavItem href="#overview" is-selected label="Overview" />
    <TopNavMegaMenu label="Products">
      <TopNavMegaMenuItem
        description="Ship to production in seconds"
        href="#deploy"
        icon-class="i-carbon-rocket"
        title="Deploy"
      />
      <TopNavMegaMenuItem
        description="Guides, references, and tutorials"
        href="#documentation"
        icon-class="i-carbon-book"
        title="Documentation"
      />
      <TopNavMegaMenuItem
        description="Programmatic access to all features"
        href="#api"
        icon-class="i-carbon-code"
        title="API"
      />
      <TopNavMegaMenuItem
        description="Enterprise-grade protection"
        href="#security"
        icon-class="i-carbon-security"
        title="Security"
      />
      <template #featured>
        <TopNavMegaMenuFeaturedCard
          description="Check out our latest features and improvements in the Q2 release."
          link-href="#changelog"
          link-label="Read the changelog"
          title="What's New"
        />
      </template>
    </TopNavMegaMenu>
  </TopNav>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | Visible label for the trigger button. Required. |
| `showDelay` | `number` | `150` | Delay in milliseconds before showing the menu on hover. |
| `hideDelay` | `number` | `250` | Delay in milliseconds before hiding the menu after the pointer leaves. |

## Events

- `openChange(isOpen: boolean)`: fires when the mega menu opens or closes. Useful for coordinating wrapper styles.

## Slots

- `default`: menu items. Typically `TopNavMegaMenuItem` components, but any content works.
- `featured`: featured content. Rendered as the right-hand panel on desktop, and below the items in the mobile drawer.