• Docs

Installation

pnpm dlx kliping@latest add navigation-menu

Usage

<script setup lang="ts">
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from '@/components/ui/navigation-menu'
</script>

<template>
  <NavigationMenu>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
        <NavigationMenuContent>
          <NavigationMenuLink>Link</NavigationMenuLink>
        </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@lucide/vue@^1.31.0, @vueuse/core@^14.4.0, class-variance-authority@^0.7.1, reka-ui@^2.10.3
Files	components/ui/navigation-menu/navigation-menu.vue components/ui/navigation-menu/navigation-menu-content.vue components/ui/navigation-menu/navigation-menu-indicator.vue components/ui/navigation-menu/navigation-menu-item.vue components/ui/navigation-menu/navigation-menu-link.vue components/ui/navigation-menu/navigation-menu-list.vue components/ui/navigation-menu/navigation-menu-trigger.vue components/ui/navigation-menu/navigation-menu-viewport.vue components/ui/navigation-menu/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger />
      <NavigationMenuContent>
        <NavigationMenuLink />
      </NavigationMenuContent>
      <NavigationMenuLink />
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>
<NavigationMenuLink />

Bagian lain yang tersedia: NavigationMenuIndicator, NavigationMenuViewport.

API Reference

NavigationMenu

Prop	Type	Default	Description
modelValue?	string	—	The controlled value of the menu item to activate. Can be used as v-model.
defaultValue?	string	—	The value of the menu item that should be active when initially rendered. Use when you do not need to control the value state.
dir?	Direction$3	—	The reading direction of the combobox when applicable. If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.
orientation?	Orientation	—	The orientation of the menu.
delayDuration?	number	—	The duration from when the pointer enters the trigger until the tooltip gets opened.
skipDelayDuration?	number	—	How much time a user has to enter another trigger without incurring a delay again.
disableClickTrigger?	boolean	—	If true, menu cannot be open by click on trigger
disableHoverTrigger?	boolean	—	If true, menu cannot be open by hover on trigger
disablePointerLeaveClose?	boolean	—	If true, menu will not close during pointer leave event
unmountOnHide?	boolean	—	When true, the element will be unmounted on closed state.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
viewport?	boolean	true	Renders the shared viewport that hosts open content (default true); false shows content inline.

Event	Payload	Description
@update:modelValue	[value: string]	Emitted when the value changes.

Slot	Props
#default	{ modelValue: string; }

Data attribute	Value
[data-slot]	"navigation-menu"
[data-viewport]	boolean

NavigationMenuContent

Prop	Type	Default	Description
forceMount?	boolean	—	Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
disableOutsidePointerEvents?	boolean	—	When true, hover/focus/click interactions will be disabled on elements outside the DismissableLayer. Users will need to click twice on outside elements to interact with them: once to close the DismissableLayer, and again to trigger the element.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Event	Payload	Description
@escapeKeyDown	[event: KeyboardEvent]	Emitted when Escape is pressed; call event.preventDefault() to keep it open.
@pointerDownOutside	[event: PointerDownOutsideEvent]	Emitted on a pointer down outside; call event.preventDefault() to keep it open.
@focusOutside	[event: FocusOutsideEvent]	Emitted when focus moves outside; call event.preventDefault() to keep it open.
@interactOutside	[event: PointerDownOutsideEvent | FocusOutsideEvent]	Emitted on any pointer down or focus outside; call event.preventDefault() to keep it open.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"navigation-menu-content"

NavigationMenuIndicator

Prop	Type	Default	Description
forceMount?	boolean	—	Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Data attribute	Value
[data-slot]	"navigation-menu-indicator"

NavigationMenuItem

Prop	Type	Default	Description
value?	string	—	A unique value that associates the item with an active value when the navigation menu is controlled. This prop is managed automatically when uncontrolled.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"navigation-menu-item"

NavigationMenuLink

Prop	Type	Default	Description
active?	boolean	—	Used to identify the link as the currently active page.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Event	Payload	Description
@select	[payload: CustomEvent<{ originalEvent: Event; }>]	Emitted when it is selected, by pointer or keyboard; call event.preventDefault() to keep the menu open.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"navigation-menu-link"
[data-active]	boolean

NavigationMenuList

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"navigation-menu-list"

NavigationMenuTrigger

Prop	Type	Default	Description
disabled?	boolean	—	When true, prevents the user from interacting with item
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"navigation-menu-trigger"

NavigationMenuViewport

Prop	Type	Default	Description
forceMount?	boolean	—	Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
align?	"start" | "end" | "center"	—	Placement of the viewport for css variables (--reka-navigation-menu-viewport-left, --reka-navigation-menu-viewport-top).
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Data attribute	Value
[data-slot]	"navigation-menu-viewport"

Keyboard Interactions

Perilaku keyboard-nya datang dari primitif Reka UI NavigationMenu yang dipakai komponen ini, mengikuti pola WAI-ARIA.

Key	Description
Space + Enter	When focus is on NavigationMenuTrigger, opens the content.
Tab	Moves focus to the next focusable element.
ArrowDown	When horizontal and focus is on an open NavigationMenuTrigger, moves focus into NavigationMenuContent. Moves focus to the next NavigationMenuTrigger or NavigationMenuLink.
ArrowUp	Moves focus to the previous NavigationMenuTrigger or NavigationMenuLink.
ArrowRight + ArrowLeft	When vertical and focus is on an open NavigationMenuTrigger, moves focus into its NavigationMenuContent. Moves focus to the next / previous NavigationMenuTrigger or NavigationMenuLink.
Home + End	Moves focus to the first/last NavigationMenu.Trigger or NavigationMenu.Link.
Esc	Closes open NavigationMenu.Content and moves focus to its NavigationMenu.Trigger.

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --accent, --accent-foreground, --background, --border, --muted-foreground, --popover, --popover-foreground, --radius, --ring.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.