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' |
Link
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' |