Navigation Menu

NavigationMenu renders semantic site or application navigation from an items array. Horizontal navigation uses flyout panels. Vertical navigation expands children inline and can switch to side flyouts when a containing sidebar collapses. Use Menu for commands.

Anatomy

• #trigger: Custom top-level flyout trigger content.
• #link: Custom top-level direct-link content.
• #item: Custom flyout item or vertical row content.
• #item-leading: Icon or other content before a generated item label.
• #item-label: Generated item label replacement.
• #item-trailing: Action or metadata after a generated item label.
• #child-indicator: Expansion indicator for items with children.
• #[item.slot]: Per-item override for triggers or links.

Lists, item wrappers, links, disclosure triggers, inline content, and flyout viewports are generated by the component. Items with type: "label" or type: "separator" provide vertical grouping without requiring public sub-components.

When users move between flyout triggers, outgoing and incoming panels slide simultaneously according to activation direction while the viewport animates to its new dimensions. Initial open and final close retain the side-aware popup transition.

Usage

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

const selected = ref("/components/input");

const items: NavigationMenuItem[] = [
  {
    label: "Components",
    value: "components",
    children: [
      { label: "Input", to: "/components/input", description: "Controls for collecting values." },
      { label: "Dialog", to: "/components/dialog", description: "Modal focus and dismissal." },
      {
        label: "Tree",
        to: "/components/tree",
        description: "Hierarchical navigation and selection.",
      },
    ],
  },
  {
    label: "Guides",
    value: "guides",
    children: [
      {
        label: "Installation",
        to: "/getting-started/installation",
        description: "Install and configure Akaza UI.",
      },
      {
        label: "Styling",
        to: "/getting-started/styling",
        description: "Use ui, classes, and data attrs.",
      },
    ],
  },
  {
    label: "Ecosystem",
    value: "ecosystem",
    children: [
      {
        label: "Inspira UI",
        href: "https://inspira-ui.com",
        description: "Animated UI components.",
      },
      {
        label: "Inspira UI Pro",
        href: "https://pro.inspira-ui.com",
        description: "Premium templates.",
      },
      { label: "Instruo", href: "https://instruo.org", description: "Tools, utilities and games." },
    ],
  },
];
</script>

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

Examples

Selected item

Use the default v-model for the selected leaf. Selecting a new item updates its data-akaza-state="active" and aria-current, and clears the previous generated active state. A parent trigger receives data-akaza-active while one of its descendants is selected.

<NavigationMenu v-model="selected" :items="items" />

item.active remains useful for an initial route-driven state when no model value is set. For router integration, update the model from the current route.

Routes and actions

Use to for Vue Router or Nuxt routes and href for native links. A leaf with to renders RouterLink automatically when Vue Router is installed. Use as only when a custom link component is required.

const items = [
  {
    label: "Account",
    to: "/account",
    onClick: (event) => analytics.track("account-opened"),
  },
  { label: "External docs", href: "https://example.com/docs" },
];

Resolution order is children, as, to, href, then button. onClick runs before selection and routing. Calling event.preventDefault() blocks navigation. Canceling the component's select event blocks both selection and navigation. onSelect runs only after selection is accepted.

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>

Vertical navigation

Set orientation="vertical" to render nested children as inline disclosures. Expansion supports multiple branches and arbitrary nesting.

<script setup lang="ts">
import { ref } from "vue";

const expanded = ref(["workspace"]);
const selected = ref("overview");
const items = [
  { type: "label", label: "Application", value: "application-label" },
  { label: "Overview", value: "overview", active: true },
  {
    label: "Workspace",
    value: "workspace",
    badge: 3,
    children: [
      { label: "Members", to: "/members" },
      {
        label: "Projects",
        value: "projects",
        children: [{ label: "Akaza UI", to: "/projects/akaza-ui" }],
      },
    ],
  },
];
</script>

<template>
  <NavigationMenu
    v-model="selected"
    v-model:expanded="expanded"
    orientation="vertical"
    :items="items"
  />
</template>

Collapsed sidebar

Pass the containing sidebar's collapsed slot value to Navigation Menu. In automatic mode, expanded vertical navigation uses inline children and collapsed navigation uses side flyouts.

<Sidebar collapsible="icon">
  <template #default="{ collapsed }">
    <NavigationMenu
      v-model="selected"
      orientation="vertical"
      :collapsed="collapsed"
      tooltip
      :items="items"
      aria-label="Workspace"
    />
  </template>
</Sidebar>

Use content-mode="inline" or content-mode="flyout" to override automatic presentation. Collapsed vertical flyouts teleport to body by default so a scrollable sidebar cannot clip them.

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

Models

Props

Emits

Slots

NavigationMenuSlotProps exposes item, isOpen, isActive, depth, collapsed, and a native-handler-safe toggle action.

Item Shape

UI Options

Styling Hooks

Flyouts use side-aware transitions. Switching triggers animates both panels and resizes the viewport. Inline disclosure height uses --akaza-navigation-menu-inline-duration. Change flyout motion with --akaza-navigation-menu-duration, --akaza-navigation-menu-panel-duration, --akaza-navigation-menu-resize-duration, and --akaza-navigation-menu-slide-distance. Reduced-motion mode removes visible movement.

Keyboard