Navigation Menu
A collection of links for navigating websites with support for hover and keyboard interactions.
<script setup lang="ts">
import type { NavigationMenuRootEmits, NavigationMenuRootProps } from '@destyler-ui/vue'
import { NavigationMenu } from '@destyler-ui/vue'
const props = defineProps<NavigationMenuRootProps>()
const emits = defineEmits<NavigationMenuRootEmits>()
</script>
<template>
<main>
<NavigationMenu.Root v-bind="props" @value-change="emits('valueChange', $event)" @update:model-value="emits('update:modelValue', $event)">
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">
Documentation
</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<ul>
<li>
<NavigationMenu.Link value="intro" href="#">
<div>Introduction</div>
<p>Re-usable components built using Destyler UI and Tailwind CSS.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="install" href="#">
<div>Installation</div>
<p>How to install dependencies and structure your app.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="typography" href="#">
<div>Typography</div>
<p>Styles for headings, paragraphs, lists...etc</p>
</NavigationMenu.Link>
</li>
</ul>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<ul>
<li>
<NavigationMenu.Link value="alert-dialog" href="#">
<div>Alert Dialog</div>
<p>A modal dialog that interrupts the user with important content.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="hover-card" href="#">
<div>Hover Card</div>
<p>For sighted users to preview content available behind a link.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="progress" href="#">
<div>Progress</div>
<p>Displays an indicator showing the completion progress of a task.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="scroll-area" href="#">
<div>Scroll-area</div>
<p>Visually or semantically separates content.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="tabs" href="#">
<div>Tabs</div>
<p>A set of layered sections of content known as tab panels.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="tooltip" href="#">
<div>Tooltip</div>
<p>A popup that displays information related to an element.</p>
</NavigationMenu.Link>
</li>
</ul>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
</main>
</template>
import { NavigationMenu } from '@destyler-ui/react'
export function Basic(props: NavigationMenu.RootProps) {
return (
<NavigationMenu.Root {...props}>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">
Documentation
</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<ul>
<li>
<NavigationMenu.Link value="intro" href="#">
<div>Introduction</div>
<p>Re-usable components built using Destyler UI and Tailwind CSS.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="install" href="#">
<div>Installation</div>
<p>How to install dependencies and structure your app.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="typography" href="#">
<div>Typography</div>
<p>Styles for headings, paragraphs, lists...etc</p>
</NavigationMenu.Link>
</li>
</ul>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<ul>
<li>
<NavigationMenu.Link value="alert-dialog" href="#">
<div>Alert Dialog</div>
<p>A modal dialog that interrupts the user with important content.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="hover-card" href="#">
<div>Hover Card</div>
<p>For sighted users to preview content available behind a link.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="progress" href="#">
<div>Progress</div>
<p>Displays an indicator showing the completion progress of a task.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="scroll-area" href="#">
<div>Scroll-area</div>
<p>Visually or semantically separates content.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="tabs" href="#">
<div>Tabs</div>
<p>A set of layered sections of content known as tab panels.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="tooltip" href="#">
<div>Tooltip</div>
<p>A popup that displays information related to an element.</p>
</NavigationMenu.Link>
</li>
</ul>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
)
}
import { NavigationMenu } from '@destyler-ui/solid'
export function Basic(props: NavigationMenu.RootProps) {
return (
<NavigationMenu.Root {...props}>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m6 9 6 6 6-6" />
</svg>
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m6 9 6 6 6-6" />
</svg>
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">
Documentation
</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<ul>
<li>
<NavigationMenu.Link value="intro" href="#">
<div>Introduction</div>
<p>Re-usable components built using Destyler UI and Tailwind CSS.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="install" href="#">
<div>Installation</div>
<p>How to install dependencies and structure your app.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="typography" href="#">
<div>Typography</div>
<p>Styles for headings, paragraphs, lists...etc</p>
</NavigationMenu.Link>
</li>
</ul>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<ul>
<li>
<NavigationMenu.Link value="alert-dialog" href="#">
<div>Alert Dialog</div>
<p>A modal dialog that interrupts the user with important content.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="hover-card" href="#">
<div>Hover Card</div>
<p>For sighted users to preview content available behind a link.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="progress" href="#">
<div>Progress</div>
<p>Displays an indicator showing the completion progress of a task.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="scroll-area" href="#">
<div>Scroll-area</div>
<p>Visually or semantically separates content.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="tabs" href="#">
<div>Tabs</div>
<p>A set of layered sections of content known as tab panels.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="tooltip" href="#">
<div>Tooltip</div>
<p>A popup that displays information related to an element.</p>
</NavigationMenu.Link>
</li>
</ul>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
)
}
<script lang="ts">
import type { NavigationMenuRootProps } from '@destyler-ui/svelte'
import { NavigationMenu } from '@destyler-ui/svelte'
let { ...props }: NavigationMenuRootProps = $props()
</script>
<main>
<NavigationMenu.Root {...props}>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs"><NavigationMenu.Link value="docs" href="#">Documentation</NavigationMenu.Link></NavigationMenu.Item>
<NavigationMenu.Indicator><NavigationMenu.Arrow /></NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner><NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<ul>
<li><NavigationMenu.Link value="intro" href="#"><div>Introduction</div><p>Re-usable components built using Destyler UI and Tailwind CSS.</p></NavigationMenu.Link></li>
<li><NavigationMenu.Link value="install" href="#"><div>Installation</div><p>How to install dependencies and structure your app.</p></NavigationMenu.Link></li>
<li><NavigationMenu.Link value="typography" href="#"><div>Typography</div><p>Styles for headings, paragraphs, lists...etc</p></NavigationMenu.Link></li>
</ul>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<ul>
<li><NavigationMenu.Link value="alert-dialog" href="#"><div>Alert Dialog</div><p>A modal dialog that interrupts the user with important content.</p></NavigationMenu.Link></li>
<li><NavigationMenu.Link value="hover-card" href="#"><div>Hover Card</div><p>For sighted users to preview content available behind a link.</p></NavigationMenu.Link></li>
<li><NavigationMenu.Link value="progress" href="#"><div>Progress</div><p>Displays an indicator showing the completion progress of a task.</p></NavigationMenu.Link></li>
<li><NavigationMenu.Link value="scroll-area" href="#"><div>Scroll-area</div><p>Visually or semantically separates content.</p></NavigationMenu.Link></li>
<li><NavigationMenu.Link value="tabs" href="#"><div>Tabs</div><p>A set of layered sections of content known as tab panels.</p></NavigationMenu.Link></li>
<li><NavigationMenu.Link value="tooltip" href="#"><div>Tooltip</div><p>A popup that displays information related to an element.</p></NavigationMenu.Link></li>
</ul>
</NavigationMenu.Content>
</NavigationMenu.Viewport></NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
</main>
Anatomy
Section titled “Anatomy”<script setup lang="ts">import { NavigationMenu } from '@destyler-ui/vue'</script>
<template> <NavigationMenu.Root> <NavigationMenu.List> <NavigationMenu.Item> <NavigationMenu.Trigger /> <NavigationMenu.Content> <NavigationMenu.Link /> </NavigationMenu.Content> </NavigationMenu.Item> <NavigationMenu.Indicator /> </NavigationMenu.List> <NavigationMenu.ViewportPositioner> <NavigationMenu.Viewport /> </NavigationMenu.ViewportPositioner> </NavigationMenu.Root></template>import { NavigationMenu } from '@destyler-ui/react'
export default function Basic() { return ( <NavigationMenu.Root> <NavigationMenu.List> <NavigationMenu.Item> <NavigationMenu.Trigger /> <NavigationMenu.Content> <NavigationMenu.Link /> </NavigationMenu.Content> </NavigationMenu.Item> <NavigationMenu.Indicator /> </NavigationMenu.List> <NavigationMenu.ViewportPositioner> <NavigationMenu.Viewport /> </NavigationMenu.ViewportPositioner> </NavigationMenu.Root> )}import { NavigationMenu } from '@destyler-ui/solid'
export default function Basic() { return ( <NavigationMenu.Root> <NavigationMenu.List> <NavigationMenu.Item value="docs"> <NavigationMenu.Trigger /> <NavigationMenu.Content> <NavigationMenu.Link /> </NavigationMenu.Content> </NavigationMenu.Item> <NavigationMenu.Indicator /> </NavigationMenu.List> <NavigationMenu.ViewportPositioner> <NavigationMenu.Viewport /> </NavigationMenu.ViewportPositioner> </NavigationMenu.Root> )}<script lang="ts"> import type { NavigationMenuRootProps } from '@destyler-ui/svelte' import { NavigationMenu } from '@destyler-ui/svelte' let { ...props }: NavigationMenuRootProps = $props()</script>
<main><NavigationMenu.Root {...props}> <NavigationMenu.List> <NavigationMenu.Item value="getting-started"> <NavigationMenu.Trigger value="getting-started"> Getting started <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg> </NavigationMenu.Trigger> </NavigationMenu.Item> <NavigationMenu.Item value="components"> <NavigationMenu.Trigger value="components"> Components <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg> </NavigationMenu.Trigger> </NavigationMenu.Item> <NavigationMenu.Item value="docs"><NavigationMenu.Link value="docs" href="#">Documentation</NavigationMenu.Link></NavigationMenu.Item> <NavigationMenu.Indicator><NavigationMenu.Arrow /></NavigationMenu.Indicator> </NavigationMenu.List> <NavigationMenu.ViewportPositioner><NavigationMenu.Viewport> <NavigationMenu.Content value="getting-started"> <ul> <li><NavigationMenu.Link value="intro" href="#"><div>Introduction</div><p>Re-usable components built using Destyler UI and Tailwind CSS.</p></NavigationMenu.Link></li> <li><NavigationMenu.Link value="install" href="#"><div>Installation</div><p>How to install dependencies and structure your app.</p></NavigationMenu.Link></li> <li><NavigationMenu.Link value="typography" href="#"><div>Typography</div><p>Styles for headings, paragraphs, lists...etc</p></NavigationMenu.Link></li> </ul> </NavigationMenu.Content> <NavigationMenu.Content value="components"> <ul> <li><NavigationMenu.Link value="alert-dialog" href="#"><div>Alert Dialog</div><p>A modal dialog that interrupts the user with important content.</p></NavigationMenu.Link></li> <li><NavigationMenu.Link value="hover-card" href="#"><div>Hover Card</div><p>For sighted users to preview content available behind a link.</p></NavigationMenu.Link></li> <li><NavigationMenu.Link value="progress" href="#"><div>Progress</div><p>Displays an indicator showing the completion progress of a task.</p></NavigationMenu.Link></li> <li><NavigationMenu.Link value="scroll-area" href="#"><div>Scroll-area</div><p>Visually or semantically separates content.</p></NavigationMenu.Link></li> <li><NavigationMenu.Link value="tabs" href="#"><div>Tabs</div><p>A set of layered sections of content known as tab panels.</p></NavigationMenu.Link></li> <li><NavigationMenu.Link value="tooltip" href="#"><div>Tooltip</div><p>A popup that displays information related to an element.</p></NavigationMenu.Link></li> </ul> </NavigationMenu.Content> </NavigationMenu.Viewport></NavigationMenu.ViewportPositioner></NavigationMenu.Root></main>Examples
Section titled “Examples”<script setup lang="ts">
import type { NavigationMenuRootEmits, NavigationMenuRootProps } from '@destyler-ui/vue'
import { NavigationMenu } from '@destyler-ui/vue'
const props = defineProps<NavigationMenuRootProps>()
const emits = defineEmits<NavigationMenuRootEmits>()
</script>
<template>
<main>
<NavigationMenu.Root v-bind="props" @value-change="emits('valueChange', $event)" @update:model-value="emits('update:modelValue', $event)">
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">
Documentation
</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<ul>
<li>
<NavigationMenu.Link value="intro" href="#">
<div>Introduction</div>
<p>Re-usable components built using Destyler UI and Tailwind CSS.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="install" href="#">
<div>Installation</div>
<p>How to install dependencies and structure your app.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="typography" href="#">
<div>Typography</div>
<p>Styles for headings, paragraphs, lists...etc</p>
</NavigationMenu.Link>
</li>
</ul>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<ul>
<li>
<NavigationMenu.Link value="alert-dialog" href="#">
<div>Alert Dialog</div>
<p>A modal dialog that interrupts the user with important content.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="hover-card" href="#">
<div>Hover Card</div>
<p>For sighted users to preview content available behind a link.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="progress" href="#">
<div>Progress</div>
<p>Displays an indicator showing the completion progress of a task.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="scroll-area" href="#">
<div>Scroll-area</div>
<p>Visually or semantically separates content.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="tabs" href="#">
<div>Tabs</div>
<p>A set of layered sections of content known as tab panels.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="tooltip" href="#">
<div>Tooltip</div>
<p>A popup that displays information related to an element.</p>
</NavigationMenu.Link>
</li>
</ul>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
</main>
</template>
import { NavigationMenu } from '@destyler-ui/react'
export function Basic(props: NavigationMenu.RootProps) {
return (
<NavigationMenu.Root {...props}>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">
Documentation
</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<ul>
<li>
<NavigationMenu.Link value="intro" href="#">
<div>Introduction</div>
<p>Re-usable components built using Destyler UI and Tailwind CSS.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="install" href="#">
<div>Installation</div>
<p>How to install dependencies and structure your app.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="typography" href="#">
<div>Typography</div>
<p>Styles for headings, paragraphs, lists...etc</p>
</NavigationMenu.Link>
</li>
</ul>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<ul>
<li>
<NavigationMenu.Link value="alert-dialog" href="#">
<div>Alert Dialog</div>
<p>A modal dialog that interrupts the user with important content.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="hover-card" href="#">
<div>Hover Card</div>
<p>For sighted users to preview content available behind a link.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="progress" href="#">
<div>Progress</div>
<p>Displays an indicator showing the completion progress of a task.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="scroll-area" href="#">
<div>Scroll-area</div>
<p>Visually or semantically separates content.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="tabs" href="#">
<div>Tabs</div>
<p>A set of layered sections of content known as tab panels.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="tooltip" href="#">
<div>Tooltip</div>
<p>A popup that displays information related to an element.</p>
</NavigationMenu.Link>
</li>
</ul>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
)
}
import { NavigationMenu } from '@destyler-ui/solid'
export function Basic(props: NavigationMenu.RootProps) {
return (
<NavigationMenu.Root {...props}>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m6 9 6 6 6-6" />
</svg>
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m6 9 6 6 6-6" />
</svg>
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">
Documentation
</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<ul>
<li>
<NavigationMenu.Link value="intro" href="#">
<div>Introduction</div>
<p>Re-usable components built using Destyler UI and Tailwind CSS.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="install" href="#">
<div>Installation</div>
<p>How to install dependencies and structure your app.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="typography" href="#">
<div>Typography</div>
<p>Styles for headings, paragraphs, lists...etc</p>
</NavigationMenu.Link>
</li>
</ul>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<ul>
<li>
<NavigationMenu.Link value="alert-dialog" href="#">
<div>Alert Dialog</div>
<p>A modal dialog that interrupts the user with important content.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="hover-card" href="#">
<div>Hover Card</div>
<p>For sighted users to preview content available behind a link.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="progress" href="#">
<div>Progress</div>
<p>Displays an indicator showing the completion progress of a task.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="scroll-area" href="#">
<div>Scroll-area</div>
<p>Visually or semantically separates content.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="tabs" href="#">
<div>Tabs</div>
<p>A set of layered sections of content known as tab panels.</p>
</NavigationMenu.Link>
</li>
<li>
<NavigationMenu.Link value="tooltip" href="#">
<div>Tooltip</div>
<p>A popup that displays information related to an element.</p>
</NavigationMenu.Link>
</li>
</ul>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
)
}
<script lang="ts">
import type { NavigationMenuRootProps } from '@destyler-ui/svelte'
import { NavigationMenu } from '@destyler-ui/svelte'
let { ...props }: NavigationMenuRootProps = $props()
</script>
<main>
<NavigationMenu.Root {...props}>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs"><NavigationMenu.Link value="docs" href="#">Documentation</NavigationMenu.Link></NavigationMenu.Item>
<NavigationMenu.Indicator><NavigationMenu.Arrow /></NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner><NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<ul>
<li><NavigationMenu.Link value="intro" href="#"><div>Introduction</div><p>Re-usable components built using Destyler UI and Tailwind CSS.</p></NavigationMenu.Link></li>
<li><NavigationMenu.Link value="install" href="#"><div>Installation</div><p>How to install dependencies and structure your app.</p></NavigationMenu.Link></li>
<li><NavigationMenu.Link value="typography" href="#"><div>Typography</div><p>Styles for headings, paragraphs, lists...etc</p></NavigationMenu.Link></li>
</ul>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<ul>
<li><NavigationMenu.Link value="alert-dialog" href="#"><div>Alert Dialog</div><p>A modal dialog that interrupts the user with important content.</p></NavigationMenu.Link></li>
<li><NavigationMenu.Link value="hover-card" href="#"><div>Hover Card</div><p>For sighted users to preview content available behind a link.</p></NavigationMenu.Link></li>
<li><NavigationMenu.Link value="progress" href="#"><div>Progress</div><p>Displays an indicator showing the completion progress of a task.</p></NavigationMenu.Link></li>
<li><NavigationMenu.Link value="scroll-area" href="#"><div>Scroll-area</div><p>Visually or semantically separates content.</p></NavigationMenu.Link></li>
<li><NavigationMenu.Link value="tabs" href="#"><div>Tabs</div><p>A set of layered sections of content known as tab panels.</p></NavigationMenu.Link></li>
<li><NavigationMenu.Link value="tooltip" href="#"><div>Tooltip</div><p>A popup that displays information related to an element.</p></NavigationMenu.Link></li>
</ul>
</NavigationMenu.Content>
</NavigationMenu.Viewport></NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
</main>
Controlled
Section titled “Controlled”Control the active menu item programmatically.
<script setup lang="ts">
import { ref } from 'vue'
import { NavigationMenu } from '@destyler-ui/vue'
const value = ref<string | null>(null)
</script>
<template>
<div>
<p>Current value: {{ value ?? 'none' }}</p>
<button @click="value = 'getting-started'">Open Getting Started</button>
<button @click="value = 'components'">Open Components</button>
<button @click="value = null">Close All</button>
</div>
<NavigationMenu.Root v-model="value">
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">
Documentation
</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">Introduction</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">Installation</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">Button</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">Dialog</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
</template>
import { useState } from 'react'
import { NavigationMenu } from '@destyler-ui/react'
export function Controlled() {
const [value, setValue] = useState<string | null>(null)
return (
<div>
<p>
Current value:
{value ?? 'none'}
</p>
<button type="button" onClick={() => setValue('getting-started')}>Open Getting Started</button>
<button type="button" onClick={() => setValue('components')}>Open Components</button>
<button type="button" onClick={() => setValue(null)}>Close All</button>
<NavigationMenu.Root value={value} onValueChange={({ value }) => setValue(value)}>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">
Documentation
</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">Introduction</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">Installation</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">Button</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">Dialog</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
</div>
)
}
import { createSignal } from 'solid-js'
import { NavigationMenu } from '@destyler-ui/solid'
export function Controlled() {
const [value, setValue] = createSignal<string | null>(null)
return (
<div>
<p>Current value: {value() ?? 'none'}</p>
<button type="button" onClick={() => setValue('getting-started')}>
Open Getting Started
</button>
<button type="button" onClick={() => setValue('components')}>
Open Components
</button>
<button type="button" onClick={() => setValue(null)}>
Close All
</button>
<NavigationMenu.Root value={value()} onValueChange={({ value }) => setValue(value)}>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">
Documentation
</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">
Introduction
</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">
Installation
</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">
Button
</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">
Dialog
</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
</div>
)
}
<script lang="ts">
import { NavigationMenu } from '@destyler-ui/svelte'
let value = $state<string | null>(null)
</script>
<div>
<p>Current value: {value ?? 'none'}</p>
<button type="button" onclick={() => value = 'getting-started'}>Open Getting Started</button>
<button type="button" onclick={() => value = 'components'}>Open Components</button>
<button type="button" onclick={() => value = null}>Close All</button>
<NavigationMenu.Root bind:value>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started"><NavigationMenu.Trigger value="getting-started">Getting started</NavigationMenu.Trigger></NavigationMenu.Item>
<NavigationMenu.Item value="components"><NavigationMenu.Trigger value="components">Components</NavigationMenu.Trigger></NavigationMenu.Item>
<NavigationMenu.Item value="docs"><NavigationMenu.Link value="docs" href="#">Documentation</NavigationMenu.Link></NavigationMenu.Item>
<NavigationMenu.Indicator><NavigationMenu.Arrow /></NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner><NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started"><NavigationMenu.Link value="intro" href="#">Introduction</NavigationMenu.Link><NavigationMenu.Link value="install" href="#">Installation</NavigationMenu.Link></NavigationMenu.Content>
<NavigationMenu.Content value="components"><NavigationMenu.Link value="button" href="#">Button</NavigationMenu.Link><NavigationMenu.Link value="dialog" href="#">Dialog</NavigationMenu.Link></NavigationMenu.Content>
</NavigationMenu.Viewport></NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
</div>
Custom Delay
Section titled “Custom Delay”Customize the open and close delay for hover interactions.
<script setup lang="ts">
import { NavigationMenu } from '@destyler-ui/vue'
</script>
<template>
<NavigationMenu.Root :open-delay="500" :close-delay="600">
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">
Documentation
</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">Introduction</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">Installation</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">Button</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">Dialog</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
</template>
import { NavigationMenu } from '@destyler-ui/react'
export function CustomDelay() {
return (
<NavigationMenu.Root openDelay={500} closeDelay={600}>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">
Documentation
</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">Introduction</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">Installation</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">Button</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">Dialog</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
)
}
import { NavigationMenu } from '@destyler-ui/solid'
export function CustomDelay() {
return (
<NavigationMenu.Root openDelay={500} closeDelay={600}>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger>Getting started</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger>Components</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link href="#">Documentation</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">
Introduction
</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">
Installation
</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">
Button
</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">
Dialog
</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
)
}
<script lang="ts">
import { NavigationMenu } from '@destyler-ui/svelte'
</script>
<NavigationMenu.Root openDelay={500} closeDelay={600}>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">Getting started</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">Components</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">Documentation</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator><NavigationMenu.Arrow /></NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">Introduction</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">Installation</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">Button</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">Dialog</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
Disable Click
Section titled “Disable Click”Disable click interaction, using hover only.
<script setup lang="ts">
import { NavigationMenu } from '@destyler-ui/vue'
</script>
<template>
<NavigationMenu.Root disable-click-trigger>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">
Documentation
</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">Introduction</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">Installation</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">Button</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">Dialog</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
</template>
import { NavigationMenu } from '@destyler-ui/react'
export function DisableClick() {
return (
<NavigationMenu.Root disableClickTrigger>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">
Documentation
</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">Introduction</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">Installation</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">Button</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">Dialog</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
)
}
import { NavigationMenu } from '@destyler-ui/solid'
export function DisableClick() {
return (
<NavigationMenu.Root disableClickTrigger>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger>Getting started</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger>Components</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link href="#">Documentation</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">
Introduction
</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">
Installation
</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">
Button
</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">
Dialog
</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
)
}
<script lang="ts">
import { NavigationMenu } from '@destyler-ui/svelte'
</script>
<NavigationMenu.Root disableClickTrigger>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">Getting started</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">Components</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">Documentation</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator><NavigationMenu.Arrow /></NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">Introduction</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">Installation</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">Button</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">Dialog</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
Disable Hover
Section titled “Disable Hover”Disable hover interaction, using click only.
<script setup lang="ts">
import { NavigationMenu } from '@destyler-ui/vue'
</script>
<template>
<NavigationMenu.Root disable-hover-trigger>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">
Documentation
</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">Introduction</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">Installation</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">Button</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">Dialog</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
</template>
import { NavigationMenu } from '@destyler-ui/react'
export function DisableHover() {
return (
<NavigationMenu.Root disableHoverTrigger>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">
Documentation
</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">Introduction</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">Installation</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">Button</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">Dialog</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
)
}
import { NavigationMenu } from '@destyler-ui/solid'
export function DisableHover() {
return (
<NavigationMenu.Root disableHoverTrigger>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger>Getting started</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger>Components</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link href="#">Documentation</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">
Introduction
</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">
Installation
</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">
Button
</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">
Dialog
</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
)
}
<script lang="ts">
import { NavigationMenu } from '@destyler-ui/svelte'
</script>
<NavigationMenu.Root disableHoverTrigger>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">Getting started</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">Components</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">Documentation</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator><NavigationMenu.Arrow /></NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">Introduction</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">Installation</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">Button</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">Dialog</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
Vertical
Section titled “Vertical”Display the navigation menu in a vertical orientation.
<script setup lang="ts">
import { NavigationMenu } from '@destyler-ui/vue'
</script>
<template>
<NavigationMenu.Root orientation="vertical">
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">
Documentation
</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">Introduction</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">Installation</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">Button</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">Dialog</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
</template>
import { NavigationMenu } from '@destyler-ui/react'
export function Vertical() {
return (
<NavigationMenu.Root orientation="vertical">
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">
Documentation
</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">Introduction</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">Installation</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">Button</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">Dialog</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
)
}
import { NavigationMenu } from '@destyler-ui/solid'
export function Vertical() {
return (
<NavigationMenu.Root orientation="vertical">
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">
Documentation
</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">
Introduction
</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">
Installation
</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">
Button
</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">
Dialog
</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
)
}
<script lang="ts">
import { NavigationMenu } from '@destyler-ui/svelte'
</script>
<NavigationMenu.Root orientation="vertical">
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">Getting started</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">Components</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">Documentation</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator><NavigationMenu.Arrow /></NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">Introduction</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">Installation</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">Button</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">Dialog</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
Root Provider
Section titled “Root Provider”<script setup lang="ts">
import { NavigationMenu, useNavigationMenu } from '@destyler-ui/vue'
const navigationMenu = useNavigationMenu()
</script>
<template>
<button @click="navigationMenu.api.value.setValue('getting-started')">Open Getting Started</button>
<button @click="navigationMenu.api.value.setValue('components')">Open Components</button>
<button @click="navigationMenu.api.value.setValue(null)">Close All</button>
<NavigationMenu.RootProvider :value="navigationMenu">
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="docs">
<NavigationMenu.Link value="docs" href="#">
Documentation
</NavigationMenu.Link>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">Introduction</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">Installation</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">Button</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">Dialog</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.RootProvider>
</template>
import { NavigationMenu, useNavigationMenu } from '@destyler-ui/react'
function NavigationMenuDemo() {
const navigationMenu = useNavigationMenu({ defaultValue: 'getting-started' })
return (
<NavigationMenu.RootProvider value={navigationMenu}>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger value="getting-started">
Getting started
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger value="components">
Components
</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">Introduction</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">Installation</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">Button</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">Dialog</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.RootProvider>
)
}
export function RootProvider() {
return <NavigationMenuDemo />
}
import { NavigationMenu, useNavigationMenu } from '@destyler-ui/solid'
export function RootProvider() {
const navigationMenu = useNavigationMenu({ defaultValue: 'getting-started' })
return (
<NavigationMenu.RootProvider value={navigationMenu}>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started">
<NavigationMenu.Trigger>Getting started</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Item value="components">
<NavigationMenu.Trigger>Components</NavigationMenu.Trigger>
</NavigationMenu.Item>
<NavigationMenu.Indicator>
<NavigationMenu.Arrow />
</NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner>
<NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started">
<NavigationMenu.Link value="intro" href="#">
Introduction
</NavigationMenu.Link>
<NavigationMenu.Link value="install" href="#">
Installation
</NavigationMenu.Link>
</NavigationMenu.Content>
<NavigationMenu.Content value="components">
<NavigationMenu.Link value="button" href="#">
Button
</NavigationMenu.Link>
<NavigationMenu.Link value="dialog" href="#">
Dialog
</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Viewport>
</NavigationMenu.ViewportPositioner>
</NavigationMenu.RootProvider>
)
}
<script lang="ts">
import { NavigationMenu, useNavigationMenu } from '@destyler-ui/svelte'
const id = $props.id()
const navigationMenu = useNavigationMenu({ id, defaultValue: 'getting-started' })
</script>
<NavigationMenu.RootProvider value={navigationMenu}>
<NavigationMenu.List>
<NavigationMenu.Item value="getting-started"><NavigationMenu.Trigger value="getting-started">Getting started</NavigationMenu.Trigger></NavigationMenu.Item>
<NavigationMenu.Item value="components"><NavigationMenu.Trigger value="components">Components</NavigationMenu.Trigger></NavigationMenu.Item>
<NavigationMenu.Item value="docs"><NavigationMenu.Link value="docs" href="#">Documentation</NavigationMenu.Link></NavigationMenu.Item>
<NavigationMenu.Indicator><NavigationMenu.Arrow /></NavigationMenu.Indicator>
</NavigationMenu.List>
<NavigationMenu.ViewportPositioner><NavigationMenu.Viewport>
<NavigationMenu.Content value="getting-started"><NavigationMenu.Link value="intro" href="#">Introduction</NavigationMenu.Link><NavigationMenu.Link value="install" href="#">Installation</NavigationMenu.Link></NavigationMenu.Content>
<NavigationMenu.Content value="components"><NavigationMenu.Link value="button" href="#">Button</NavigationMenu.Link><NavigationMenu.Link value="dialog" href="#">Dialog</NavigationMenu.Link></NavigationMenu.Content>
</NavigationMenu.Viewport></NavigationMenu.ViewportPositioner>
</NavigationMenu.RootProvider>
API Reference
Section titled “API Reference”Root
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
closeDelay | 300 | numberThe close delay of the menu content. |
defaultValue | — | stringThe value of the menu item to activate by default. Use when you do not need to control the state. |
disableClickTrigger | false | false | trueWhether to disable click trigger. |
disableHoverTrigger | false | false | trueWhether to disable hover trigger. |
disablePointerLeaveClose | false | false | trueWhether to disable pointer leave close. |
id | — | stringThe unique identifier of the machine. |
ids | — | Partial<{ root: string; list: string; viewport: string; viewportPositioner: string; indicator: string; trigger: (value: string) => string; link: (value: string) => string; content: (value: string) => string; item: (value: string) => string; }>The ids of the elements in the navigation menu. Useful for composition. |
modelValue | — | null | stringThe controlled value of the menu item to activate. Can be used as v-model. |
openDelay | 200 | numberThe open delay of the menu content. |
orientation | 'horizontal' | "horizontal" | "vertical"The orientation of the menu. |
| Emit | Event |
|---|---|
update:modelValue | [value: string | null]The callback fired when the model value changes. |
valueChange | [details: ValueChangeDetails]Callback when the value changes. |
Arrow
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Content
| Prop | Default | Type |
|---|---|---|
value* | — | stringThe unique value of the menu item. |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Context
No serializable props or emits are declared for this part.
Indicator
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
lazyMount | false | false | trueWhether to enable lazy mounting |
unmountOnExit | false | false | trueWhether to unmount on exit. |
Item
| Prop | Default | Type |
|---|---|---|
value* | — | stringThe unique value of the menu item. |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
ItemIndicator
| Prop | Default | Type |
|---|---|---|
value* | — | string |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Link
| Prop | Default | Type |
|---|---|---|
value* | — | stringThe unique value of the menu item. |
active | — | false | trueWhether the link is currently active (current page) |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
href | — | string |
onSelect | — | () => voidFunction called when the link is selected |
List
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
RootProvider
| Prop | Default | Type |
|---|---|---|
value* | — | UseNavigationMenuReturn |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Trigger
| Prop | Default | Type |
|---|---|---|
value* | — | stringThe unique value of the menu item. |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
disabled | — | false | trueWhether the trigger is disabled |
Viewport
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
ViewportPositioner
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
lazyMount | false | false | trueWhether to enable lazy mounting |
unmountOnExit | false | false | trueWhether to unmount on exit. |
Root
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
closeDelay | 300 | numberThe delay (in ms) before the navigation menu closes when the pointer leaves. |
defaultValue | — | stringThe initial value of the navigation menu when it is first rendered. Use when you do not need to control its state. |
disableClickTrigger | false | false | trueWhether to disable click interaction on triggers. |
disableHoverTrigger | false | false | trueWhether to disable hover interaction on triggers. |
disablePointerLeaveClose | false | false | trueWhether to disable closing when the pointer leaves the menu. |
id | — | stringThe unique identifier of the machine. |
ids | — | Partial<{ root: string; list: string; viewport: string; viewportPositioner: string; indicator: string; trigger: (value: string) => string; link: (value: string) => string; content: (value: string) => string; item: (value: string) => string; }>The ids of the elements in the navigation menu. Useful for composition. |
immediate | — | false | trueWhether to synchronize the present change immediately or defer it to the next frame |
lazyMount | false | false | trueWhether to enable lazy mounting |
onExitComplete | — | () => voidFunction called when the animation ends in the closed state |
onValueChange | — | (details: navigationMenu.ValueChangeDetails) => voidFunction called when the active menu item changes. |
openDelay | 200 | numberThe delay (in ms) before the navigation menu opens when hovering over a trigger. |
orientation | "horizontal" | "horizontal" | "vertical"The orientation of the navigation menu. |
present | — | false | trueWhether the node is present (controlled by the user) |
unmountOnExit | false | false | trueWhether to unmount on exit. |
value | — | null | stringThe value of the currently active menu item. |
Arrow
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Content
| Prop | Default | Type |
|---|---|---|
value* | — | stringThe unique value of the menu item. |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Context
| Prop | Default | Type |
|---|---|---|
children* | — | (context: UseNavigationMenuReturn) => ReactNode |
Indicator
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Item
| Prop | Default | Type |
|---|---|---|
value* | — | stringThe unique value of the menu item. |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
ItemIndicator
| Prop | Default | Type |
|---|---|---|
value* | — | string |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Link
| Prop | Default | Type |
|---|---|---|
value* | — | stringThe unique value of the menu item. |
active | — | false | trueWhether the link is currently active (current page) |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
onSelect | — | () => voidFunction called when the link is selected |
List
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
RootProvider
| Prop | Default | Type |
|---|---|---|
value* | — | UseNavigationMenuReturn |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
immediate | — | false | trueWhether to synchronize the present change immediately or defer it to the next frame |
lazyMount | false | false | trueWhether to enable lazy mounting |
onExitComplete | — | () => voidFunction called when the animation ends in the closed state |
present | — | false | trueWhether the node is present (controlled by the user) |
unmountOnExit | false | false | trueWhether to unmount on exit. |
Trigger
| Prop | Default | Type |
|---|---|---|
value* | — | stringThe unique value of the menu item. |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Viewport
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
ViewportPositioner
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Root
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js317.JSX.HTMLAttributes<HTMLElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
closeDelay | 300 | numberThe delay (in ms) before the navigation menu closes when the pointer leaves. |
defaultValue | — | stringThe initial value of the navigation menu when it is first rendered. Use when you do not need to control its state. |
disableClickTrigger | false | false | trueWhether to disable click interaction on triggers. |
disableHoverTrigger | false | false | trueWhether to disable hover interaction on triggers. |
disablePointerLeaveClose | false | false | trueWhether to disable closing when the pointer leaves the menu. |
id | — | stringThe unique identifier of the machine. |
ids | — | Partial<{ root: string; list: string; viewport: string; viewportPositioner: string; indicator: string; trigger: (value: string) => string; link: (value: string) => string; content: (value: string) => string; item: (value: string) => string; }>The ids of the elements in the navigation menu. Useful for composition. |
immediate | — | false | trueWhether to synchronize the present change immediately or defer it to the next frame |
lazyMount | false | false | trueWhether to enable lazy mounting |
onExitComplete | — | () => voidFunction called when the animation ends in the closed state |
onValueChange | — | (details: ValueChangeDetails) => voidFunction called when the active menu item changes. |
openDelay | 200 | numberThe delay (in ms) before the navigation menu opens when hovering over a trigger. |
orientation | "horizontal" | "horizontal" | "vertical"The orientation of the navigation menu. |
present | — | false | trueWhether the node is present (controlled by the user) |
unmountOnExit | false | false | trueWhether to unmount on exit. |
value | — | null | stringThe value of the currently active menu item. |
Arrow
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js317.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
Content
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js317.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
value | — | stringThe unique value of the menu item. |
Context
| Prop | Default | Type |
|---|---|---|
children* | — | (context: UseNavigationMenuContext) => Element |
Indicator
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js317.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
Item
| Prop | Default | Type |
|---|---|---|
value* | — | stringThe unique value of the menu item. |
asChild | — | (props: (userProps?: solid_js317.JSX.LiHTMLAttributes<HTMLLIElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
ItemIndicator
| Prop | Default | Type |
|---|---|---|
value* | — | string |
asChild | — | (props: (userProps?: solid_js317.JSX.HTMLAttributes<HTMLSpanElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
Link
| Prop | Default | Type |
|---|---|---|
active | — | false | trueWhether the link is currently active (current page) |
asChild | — | (props: (userProps?: solid_js317.JSX.AnchorHTMLAttributes<HTMLAnchorElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
onSelect | — | () => voidFunction called when the link is selected |
value | — | stringThe unique value of the menu item. |
List
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js317.JSX.HTMLAttributes<HTMLUListElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
RootProvider
| Prop | Default | Type |
|---|---|---|
value* | — | UseNavigationMenuReturn |
asChild | — | (props: (userProps?: solid_js317.JSX.HTMLAttributes<HTMLElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
immediate | — | false | trueWhether to synchronize the present change immediately or defer it to the next frame |
lazyMount | false | false | trueWhether to enable lazy mounting |
onExitComplete | — | () => voidFunction called when the animation ends in the closed state |
present | — | false | trueWhether the node is present (controlled by the user) |
unmountOnExit | false | false | trueWhether to unmount on exit. |
Trigger
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js317.JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
disabled | — | false | trueWhether the trigger is disabled |
value | — | stringThe unique value of the menu item. |
Viewport
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js317.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
ViewportPositioner
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js317.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
Root
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"nav">]> |
children | — | Snippet<[]> | undefined |
closeDelay | 300 | numberThe delay (in ms) before the navigation menu closes when the pointer leaves. |
defaultValue | — | string |
disableClickTrigger | false | false | trueWhether to disable click interaction on triggers. |
disableHoverTrigger | false | false | trueWhether to disable hover interaction on triggers. |
disablePointerLeaveClose | false | false | trueWhether to disable closing when the pointer leaves the menu. |
id | — | string |
ids | — | Partial<{ root: string; list: string; viewport: string; viewportPositioner: string; indicator: string; trigger: (value: string) => string; link: (value: string) => string; content: (value: string) => string; item: (value: string) => string; }>The ids of the elements in the navigation menu. Useful for composition. |
immediate | — | false | trueWhether to synchronize the present change immediately or defer it to the next frame |
lazyMount | false | false | trueWhether to enable lazy mounting |
onExitComplete | — | () => voidFunction called when the animation ends in the closed state |
onValueChange | — | (details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").NavigationMenuValueChangeDetails) => voidFunction called when the active menu item changes. |
openDelay | 200 | numberThe delay (in ms) before the navigation menu opens when hovering over a trigger. |
orientation | "horizontal" | "horizontal" | "vertical"The orientation of the navigation menu. |
present | — | false | trueWhether the node is present (controlled by the user) |
skipAnimationOnMount | false | false | trueWhether to allow the initial presence animation. |
unmountOnExit | false | false | trueWhether to unmount on exit. |
value | — | null | stringThe value of the currently active menu item. |
Arrow
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]> |
children | — | Snippet<[]> | undefined |
Content
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]> |
children | — | Snippet<[]> | undefined |
value | — | stringThe unique value of the menu item. |
Context
| Prop | Default | Type |
|---|---|---|
render | — | Snippet<[UseNavigationMenuContext]> |
Indicator
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]> |
children | — | Snippet<[]> | undefined |
Item
| Prop | Default | Type |
|---|---|---|
value* | — | stringThe unique value of the menu item. |
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]> |
children | — | Snippet<[]> | undefined |
ItemIndicator
| Prop | Default | Type |
|---|---|---|
value* | — | string |
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]> |
children | — | Snippet<[]> | undefined |
Link
| Prop | Default | Type |
|---|---|---|
active | — | false | trueWhether the link is currently active (current page) |
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"a">]> |
children | — | Snippet<[]> | undefined |
onSelect | — | () => voidFunction called when the link is selected |
value | — | stringThe unique value of the menu item. |
List
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]> |
children | — | Snippet<[]> | undefined |
RootProvider
| Prop | Default | Type |
|---|---|---|
value* | — | UseNavigationMenuReturn |
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"nav">]> |
children | — | Snippet<[]> | undefined |
immediate | — | false | trueWhether to synchronize the present change immediately or defer it to the next frame |
lazyMount | false | false | trueWhether to enable lazy mounting |
onExitComplete | — | () => voidFunction called when the animation ends in the closed state |
present | — | false | trueWhether the node is present (controlled by the user) |
skipAnimationOnMount | false | false | trueWhether to allow the initial presence animation. |
unmountOnExit | false | false | trueWhether to unmount on exit. |
Trigger
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]> |
children | — | Snippet<[]> | undefined |
disabled | — | false | trueWhether the trigger is disabled |
Viewport
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]> |
children | — | Snippet<[]> | undefined |
ViewportPositioner
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]> |
children | — | Snippet<[]> | undefined |