Navigation

A collection of links for navigating websites.

Features

  • Can be controlled or uncontrolled.
  • Flexible layout structure with managed tab focus.
  • Supports submenus.
  • Optional active item indicator.
  • Full keyboard navigation.
  • Exposes CSS variables for advanced animation.
  • Supports custom timings.

Install

Import

API

Root

Props Type Default
as
AsTag | Component
nav
asChild
boolean
false
defaultValue
string
undefined
delayDuration
number
200
dir
Direction
ltr
disableClickTrigger
boolean
false
disableHoverTrigger
boolean
false
modelValue
string
undefined
orientation
Orientation
horizontal
skipDelayDuration
number
300
Event Type
update:modelValue
[_value: string]
Data attribute Value
[data-orientation]
'vertical' | 'horizontal'

List

Props Type Default
as
AsTag | Component
ul
asChild
boolean
false
Data attribute Value
[data-orientation]
'vertical' | 'horizontal'

Item

Props Type Default
as
AsTag | Component
li
asChild
boolean
false
value
string
on

Trigger

Props Type Default
as
AsTag | Component
button
asChild
boolean
false
disabled
boolean
false
Data attribute Value
[data-state]
'open' | 'closed'
[data-disabled]
Present when disabled

Content

Props Type Default
as
AsTag | Component
div
asChild
boolean
false
disableOutsidePointerEvents
boolean
false
forceMount
boolean
false
isDismissable
boolean
true
Event Type
escapeKeyDown
[_event: KeyboardEvent]
focusOutside
[_event: FocusOutsideEvent]
interactOutside
[_event: PointerDownOutsideEvent | FocusOutsideEvent]
pointerDownOutside
[_event: PointerDownOutsideEvent]
Data attribute Value
[data-state]
'open' | 'closed'
[data-orientation]
'vertical' | 'horizontal'
[data-motion]
'to-start' | 'to-end' | 'from-start' | 'from-end'
Props Type Default
active
boolean
true
as
AsTag | Component
a
asChild
boolean
false
Event Type
select
[_ev: MouseEvent]
Data attribute Value
[data-active]
Present when active

Sub

Props Type Default
as
AsTag | Component
div
asChild
boolean
false
defaultValue
string
undefined
modelValue
string
-
orientation
Orientation
horizontal
Event Type
update:modelValue
[_value: string]
Data attribute Value
[data-orientation]
'vertical' | 'horizontal'

Viewport

Props Type Default
as
AsTag | Component
div
asChild
boolean
false
forceMount
boolean
false
Data attribute Value
[data-state]
'visible' | 'hidden'
[data-orientation]
'vertical' | 'horizontal'
CSS Variable Description
--destyler-navigation-viewport-width
The width of the viewport when visible/hidden, computed from the active content
--destyler-navigation-viewport-height
The height of the viewport when visible/hidden, computed from the active content

Indicator

Props Type Default
as
AsTag | Component
div
asChild
boolean
false
forceMount
boolean
false
Data attribute Value
[data-state]
'visible' | 'hidden'
[data-orientation]
'vertical' | 'horizontal'