Kappa / Navigation Menu

Open full-screen example ↗

<script setup lang="ts">
import { NavigationMenu } from "@dicehub/kappa/components/navigation-menu";
</script>

<template>
  <NavigationMenu.Root aria-label="Main navigation">
    <NavigationMenu.List>
      <NavigationMenu.Item value="platform">
        <NavigationMenu.Trigger>Platform</NavigationMenu.Trigger>
        <NavigationMenu.Content>
          <NavigationMenu.Link href="/projects">Projects</NavigationMenu.Link>
          <NavigationMenu.Link href="/automation">Automation</NavigationMenu.Link>
          <NavigationMenu.Link href="/reports">Reports</NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>
      <NavigationMenu.Item value="resources">
        <NavigationMenu.Trigger>Resources</NavigationMenu.Trigger>
        <NavigationMenu.Content>
          <NavigationMenu.Link href="/docs">Documentation</NavigationMenu.Link>
          <NavigationMenu.Link href="/support">Support</NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>
      <NavigationMenu.Item value="pricing">
        <NavigationMenu.Link href="/pricing">Pricing</NavigationMenu.Link>
      </NavigationMenu.Item>
    </NavigationMenu.List>
    <NavigationMenu.ViewportPositioner>
      <NavigationMenu.Viewport />
    </NavigationMenu.ViewportPositioner>
  </NavigationMenu.Root>
</template>

Installation

Barrel

import { NavigationMenu } from "@dicehub/kappa";

Granular

import { NavigationMenu } from "@dicehub/kappa/components/navigation-menu";

Usage

Put each link or dropdown in an Item with a unique value. Use Trigger to open Content, and give Root an aria-label.

Set current on the active link. Use size="sm" for a compact menu. Bind v-model:value to control the open panel; set it to '' to close.

Composition

NavigationMenu.Root
├── NavigationMenu.List
│   ├── NavigationMenu.Item
│   │   ├── NavigationMenu.Trigger
│   │   └── NavigationMenu.Content
│   │       └── NavigationMenu.Link
│   ├── NavigationMenu.Item
│   │   └── NavigationMenu.Link
│   └── NavigationMenu.Indicator (optional)
└── NavigationMenu.ViewportPositioner
    └── NavigationMenu.Viewport

Put ViewportPositioner inside Root, after List. Keep each Content inside its Item. Allow panels to extend beyond the navigation container.

Examples

Compact

Use size="sm" for smaller controls and tighter spacing.

<script setup lang="ts">
import { NavigationMenu } from "@dicehub/kappa/components/navigation-menu";
</script>

<template>
  <NavigationMenu.Root size="sm" aria-label="Workspace navigation">
    <NavigationMenu.List>
      <NavigationMenu.Item value="platform">
        <NavigationMenu.Trigger>Platform</NavigationMenu.Trigger>
        <NavigationMenu.Content style="--kappa-navigation-menu-content-width: 13.5rem">
          <NavigationMenu.Link href="/projects">Projects</NavigationMenu.Link>
          <NavigationMenu.Link href="/reports">Reports</NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>
      <NavigationMenu.Item value="pricing">
        <NavigationMenu.Link href="/pricing">Pricing</NavigationMenu.Link>
      </NavigationMenu.Item>
    </NavigationMenu.List>
    <NavigationMenu.ViewportPositioner>
      <NavigationMenu.Viewport />
    </NavigationMenu.ViewportPositioner>
  </NavigationMenu.Root>
</template>

Click to open

Use v-model:value to open or close a panel. Disable hover to open panels only on click.

<script setup lang="ts">
import { ref } from "vue";
import { NavigationMenu } from "@dicehub/kappa/components/navigation-menu";

const openMenu = ref(""); // Empty string closes the menu.
</script>

<template>
  <NavigationMenu.Root v-model:value="openMenu" disable-hover-trigger
    disable-pointer-leave-close aria-label="Application navigation">
    <NavigationMenu.List>
      <NavigationMenu.Item value="resources">
        <NavigationMenu.Trigger>Resources</NavigationMenu.Trigger>
        <NavigationMenu.Content>
          <NavigationMenu.Link href="/docs">Documentation</NavigationMenu.Link>
          <NavigationMenu.Link href="/support">Support</NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>
      <NavigationMenu.Item value="admin" disabled>
        <NavigationMenu.Trigger>Admin</NavigationMenu.Trigger>
      </NavigationMenu.Item>
    </NavigationMenu.List>
    <NavigationMenu.ViewportPositioner>
      <NavigationMenu.Viewport />
    </NavigationMenu.ViewportPositioner>
  </NavigationMenu.Root>
  <button type="button" @click="openMenu = 'resources'">Open resources</button>
  <button type="button" @click="openMenu = ''">Close panel</button>
</template>

Vertical

Set orientation="vertical" and align="start" to open panels beside the list. Arrows point toward the panels.

<script setup lang="ts">
import { NavigationMenu } from "@dicehub/kappa/components/navigation-menu";
</script>

<template>
  <NavigationMenu.Root orientation="vertical" aria-label="Workspace sections">
    <NavigationMenu.List>
      <NavigationMenu.Item value="platform">
        <NavigationMenu.Trigger>Platform</NavigationMenu.Trigger>
        <NavigationMenu.Content style="--kappa-navigation-menu-content-width: 16rem">
          <NavigationMenu.Link href="/projects">Projects</NavigationMenu.Link>
          <NavigationMenu.Link href="/reports">Reports</NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>
      <NavigationMenu.Item value="settings">
        <NavigationMenu.Link href="/settings">Settings</NavigationMenu.Link>
      </NavigationMenu.Item>
    </NavigationMenu.List>
    <NavigationMenu.ViewportPositioner align="start">
      <NavigationMenu.Viewport />
    </NavigationMenu.ViewportPositioner>
  </NavigationMenu.Root>
</template>

Direct links

Use links without panels. Set current on the active page link.

<script setup lang="ts">
import { NavigationMenu } from "@dicehub/kappa/components/navigation-menu";
</script>

<template>
  <NavigationMenu.Root size="sm" aria-label="Workspace pages">
    <NavigationMenu.List>
      <NavigationMenu.Item value="overview">
        <NavigationMenu.Link href="/overview" current>Overview</NavigationMenu.Link>
      </NavigationMenu.Item>
      <NavigationMenu.Item value="projects">
        <NavigationMenu.Link href="/projects">Projects</NavigationMenu.Link>
      </NavigationMenu.Item>
      <NavigationMenu.Item value="settings">
        <NavigationMenu.Link href="/settings">Settings</NavigationMenu.Link>
      </NavigationMenu.Item>
    </NavigationMenu.List>
  </NavigationMenu.Root>
</template>

Right to left

Wrap the menu in DirectionProvider and set an RTL locale.

<script setup lang="ts">
import { NavigationMenu } from "@dicehub/kappa/components/navigation-menu";
import { DirectionProvider } from "@dicehub/kappa/components/direction-provider";
</script>

<template>
  <DirectionProvider locale="ar">
    <NavigationMenu.Root aria-label="التنقل الرئيسي">
      <NavigationMenu.List>
        <NavigationMenu.Item value="platform">
          <NavigationMenu.Trigger>المنصة</NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <NavigationMenu.Link href="/projects">المشاريع</NavigationMenu.Link>
            <NavigationMenu.Link href="/reports">التقارير</NavigationMenu.Link>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
      </NavigationMenu.List>
      <NavigationMenu.ViewportPositioner>
        <NavigationMenu.Viewport />
      </NavigationMenu.ViewportPositioner>
    </NavigationMenu.Root>
  </DirectionProvider>
</template>

Router links

Use asChild with your router link. Set current from the active route.

<NavigationMenu.Link as-child :current="route.path === '/projects'">
  <RouterLink to="/projects">Projects</RouterLink>
</NavigationMenu.Link>

Accessibility

The root is a navigation landmark, triggers are buttons, and destinations are links. There are no menuitem roles on page links.
Tab moves through the navigation. Left and Right arrows move between horizontal triggers and links. Vertical navigation uses Up and Down. Home and End move to the first and last item.
Enter or Space toggles a trigger. Down arrow enters an open horizontal panel. In vertical mode, Right enters the panel, or Left in right-to-left mode.
Escape closes the panel and restores trigger focus. Outside interaction dismisses it. Disabled triggers are skipped.
Touch users can tap triggers. Motion is disabled when reduced motion is requested.

Use v-model:value to control the open panel, or defaultValue to select one initially. An empty string closes the menu. Initially selected panels open after mount. The root emits update:value and valueChange.

Root and RootProvider accept size="sm | md", default md. openDelay defaults to 200 ms; closeDelay defaults to 300 ms.
Trigger adds showIndicator, default true. Supply your own chevron when using asChild.
Link supports current, closeOnClick (default true), and the cancelable select event. Prevent that event to keep the panel open.
ViewportPositioner supports align="start | center | end", default center.
Panels stay mounted while closed. Lazy mounting and unmount-on-exit are not supported.
Set --kappa-navigation-menu-content-width on Content to change panel width. Set --kappa-navigation-menu-z-index on Root to change stacking.

All compound parts also have named exports, such as NavigationMenuTrigger. Advanced compositions can use RootProvider, Context, useNavigationMenu, and useNavigationMenuContext. Optional indicators include Indicator, ItemIndicator, and Arrow.

Navigation Menu

Room for your next idea.