NavigationMenu

A collection of links for navigating websites.
Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.

Props

A collection of links for navigating websites.
NameTypeDefaultDescription
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.
value
string
-The controlled value of the menu item to activate. Should be used in conjunction with `onValueChange`.
onValueChange
(value: string) => void
-Event handler called when the value changes.
delayDuration
number
200The duration from when the pointer enters the trigger until the tooltip gets opened.
skipDelayDuration
number
300How much time a user has to enter another trigger without incurring a delay again.
Data attributes
Data attributeValues
[data-orientation]
'vertical' | 'horizontal'
Signifies a submenu. Use it in place of the root part when nested to create a submenu.
NameTypeDefaultDescription
disabled
string
-When `true`, prevents the user from interacting with the item.
value
string
-A unique value for the item.
onValueChange
string
(value: string) => voidEvent handler called when the value changes.
orientation
string
'horizontal'The orientation of the menu.
Data attributes
Data attributeValues
[data-orientation]
'vertical' | 'horizontal'
Signifies a submenu. Use it in place of the root part when nested to create a submenu.
NameTypeDefaultDescription
asChild
boolean
falseChange the default rendered element for the one passed as a child, merging their props and behavior.
Data attributes
Data attributeValues
[data-orientation]
'vertical' | 'horizontal'
A top level menu item, contains a link or trigger with content combination.
NameTypeDefaultDescription
asChild
boolean
falseChange the default rendered element for the one passed as a child, merging their props and behavior.
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.
The button that toggles the content.
NameTypeDefaultDescription
asChild
boolean
falseChange the default rendered element for the one passed as a child, merging their props and behavior.
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.
Data attributes
Data attributeValues
[data-state]
'open' | 'closed'
[data-disabled]
Present when disabled
The button that toggles the content.
NameTypeDefaultDescription
asChild
boolean
falseChange the default rendered element for the one passed as a child, merging their props and behavior.
disableOutsidePointerEvents
boolean
falseWhen `true`, hover/focus/click interactions will be disabled on elements outside the bounds of the component. Users will need to click twice on outside elements to interact with them: Once to close the navigation menu, and again to activate the element.
forceMount
boolean
-Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
Events
NameTypeDefaultDescription
onEscapeKeyDown
(event: KeyboardEvent) => void
-Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.
onPointerDownOutside
(event: PointerDownOutsideEvent) => void
-Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.
onFocusOutside
(event: FocusOutsideEvent) => void
-Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault.
onInteractOutside
(event: React.FocusEvent | MouseEvent | TouchEvent) => void
-Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component. It can be prevented by calling event.preventDefault.
Data attributes
Data attributeValues
[data-state]
'open' | 'closed'
[data-motion]
'to-start' | 'to-end' | 'from-start' | 'from-end'
[data-orientation]
'vertical' | 'horizontal'
A navigational link.
NameTypeDefaultDescription
asChild
boolean
falseChange the default rendered element for the one passed as a child, merging their props and behavior.
active
boolean
falseUsed to identify the link as the currently active page.
Events
NameTypeDefaultDescription
onSelect
(event: KeyboardEvent) => void
-Event handler called when the user selects a link (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the navigation menu from closing when selecting that link.
Data attributes
Data attributeValues
[data-active]
Present when active
An optional indicator element that renders below the list, is used to highlight the currently active trigger.
NameTypeDefaultDescription
asChild
boolean
falseChange the default rendered element for the one passed as a child, merging their props and behavior.
forceMount
boolean
-Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
Data attributes
Data attributeValues
[data-state]
'visible' | 'hidden'
[data-orientation]
'visible' | 'hidden'
An optional viewport element that is used to render active content outside of the list.
NameTypeDefaultDescription
asChild
boolean
falseChange the default rendered element for the one passed as a child, merging their props and behavior.
forceMount
boolean
-Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
Data attributes
Data attributeValues
[data-state]
'visible' | 'hidden'
[data-orientation]
'visible' | 'hidden'