Product navigation
Group several destination links under a discoverable top-level section.
Components / Navigation
NavigationMenu
Semantic website navigation with disclosure content, active links, and managed keyboard focus.
Preview
Install
Run in your project
npx @getweini/cli@latest add navigation-menuUse cases
Documentation navigation
Offer a compact menu of guides while keeping direct links available.
Usage example
Vue
<NavigationMenu default-value="products" label="Primary">
<NavigationMenuList>
<NavigationMenuItem value="products">
<NavigationMenuTrigger>Products</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href="/analytics" active>
<template #icon><svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M3 13V9m5 4V3m5 10V6" /></svg></template>
<span>Analytics</span>
<span>Follow the signals that matter.</span>
</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
<NavigationMenuViewport />
</NavigationMenu>More examples
Products menu
Use the viewport for a shared disclosure surface and mark the active page.
Products menu
<script setup lang="ts">
import NavigationMenu from './components/ui/navigation-menu/NavigationMenu.vue'
import NavigationMenuContent from './components/ui/navigation-menu/NavigationMenuContent.vue'
import NavigationMenuItem from './components/ui/navigation-menu/NavigationMenuItem.vue'
import NavigationMenuLink from './components/ui/navigation-menu/NavigationMenuLink.vue'
import NavigationMenuList from './components/ui/navigation-menu/NavigationMenuList.vue'
import NavigationMenuTrigger from './components/ui/navigation-menu/NavigationMenuTrigger.vue'
import NavigationMenuViewport from './components/ui/navigation-menu/NavigationMenuViewport.vue'
</script>
<template>
<NavigationMenu label="Primary navigation">
<NavigationMenuList><NavigationMenuItem value="products">
<NavigationMenuTrigger>Products</NavigationMenuTrigger>
<NavigationMenuContent><div class="grid gap-3 p-4">
<NavigationMenuLink href="/products/analytics" active aria-current="page">Analytics</NavigationMenuLink>
<NavigationMenuLink href="/products/automation">Automation</NavigationMenuLink>
</div></NavigationMenuContent>
</NavigationMenuItem></NavigationMenuList>
<NavigationMenuViewport />
</NavigationMenu>
</template>Guide categories
A second disclosure can contain another set of semantic links.
Guide categories
<script setup lang="ts">
import NavigationMenu from './components/ui/navigation-menu/NavigationMenu.vue'
import NavigationMenuContent from './components/ui/navigation-menu/NavigationMenuContent.vue'
import NavigationMenuItem from './components/ui/navigation-menu/NavigationMenuItem.vue'
import NavigationMenuLink from './components/ui/navigation-menu/NavigationMenuLink.vue'
import NavigationMenuList from './components/ui/navigation-menu/NavigationMenuList.vue'
import NavigationMenuTrigger from './components/ui/navigation-menu/NavigationMenuTrigger.vue'
import NavigationMenuViewport from './components/ui/navigation-menu/NavigationMenuViewport.vue'
</script>
<template>
<NavigationMenu label="Guides" orientation="horizontal">
<NavigationMenuList><NavigationMenuItem value="guides">
<NavigationMenuTrigger>Guides</NavigationMenuTrigger>
<NavigationMenuContent><div class="grid gap-2 p-4">
<NavigationMenuLink href="/guides/getting-started">Getting started</NavigationMenuLink>
<NavigationMenuLink href="/guides/accessibility">Accessibility</NavigationMenuLink>
</div></NavigationMenuContent>
</NavigationMenuItem></NavigationMenuList>
<NavigationMenuViewport />
</NavigationMenu>
</template>Key API
The most useful props, models, slots, events, and methods for this component.
| Name | Type | Default or requirement |
|---|---|---|
v-model / defaultValue | string | undefined |
orientation | horizontal | vertical | horizontal |
dir | ltr | rtl | ltr |
Compose your own grid, cards, images, headings, and links inside NavigationMenuContent. Class, style, and native attributes on NavigationMenuContent customize the panel surface in viewport and inline modes; class on NavigationMenuViewport customizes the shared floating surface. The panel resizes as you switch sections. Links can show an icon, title, and description through the icon and default slots. Mark decorative icons aria-hidden. Set active or ariaCurrent from your router to mark the current page. Hover opens child links after a short delay on mouse and trackpad; click, touch, and keyboard also work.
Implementation notes
- Put actual links inside NavigationMenuContent and let your router set active or ariaCurrent for the current destination.
- Keep the panel layout in your own markup; content and viewport classes customize the surfaces.
Accessibility and localization
- Give the navigation a meaningful label. Mouse, touch, and keyboard can open disclosures; use real anchors for destinations.