Navigation Menu

NavigationMenu is for application or documentation navigation, not command menus. It renders semantic nav markup, top-level triggers/links, and collision-aware flyout content from an items array.

Anatomy

• #trigger: Custom top-level flyout trigger content.
• #link: Custom top-level direct-link content.
• #item: Custom flyout item content.
• #[item.slot]: Per-item override for triggers or links.

Top-level list, item wrappers, trigger/link elements, content viewport, and flyout links are generated by the component.

Usage

<script setup lang="ts">
import { NavigationMenu } from "akaza-ui";

const items = [
  {
    label: "Components",
    children: [
      { label: "Inputs", href: "/components/input", description: "Collect values." },
      { label: "Overlays", href: "/components/dialog", description: "Layered UI." },
    ],
  },
];
</script>

<template>
  <NavigationMenu :items="items" />
</template>

Examples

Controlled open state

Bind v-model:open to observe or control the currently open flyout.

<script setup lang="ts">
import { ref } from "vue";
const open = ref<string | null>(null);
</script>

<template>
  <NavigationMenu v-model:open="open" :items="items" />
</template>

Custom flyout items

Use #item for richer content while the component keeps generated list and link structure.

<template>
  <NavigationMenu :items="items">
    <template #item="{ item }">
      <strong>{{ item.label }}</strong>
      <small>{{ item.description }}</small>
    </template>
  </NavigationMenu>
</template>

API Reference

Props

Emits

Slots

Item Shape

UI Options

Styling Hooks

Flyout entry and exit use a subtle side-aware structural transition. Override --akaza-navigation-menu-duration to change its 120ms duration. Reduced-motion preference shortens it automatically.

Keyboard