NavigationMenu

Horizontal navigation menu with dropdown submenus

Example

navigation-menu

Loading preview…

NavigationMenu

Horizontal navigation menu with dropdown submenus

Source: packages/appkit-ui/src/react/ui/navigation-menu.tsx

Props

Prop	Type	Required	Default	Description
value	string		-	-
defaultValue	string		-	-
onValueChange	((value: string) => void)		-	-
dir	enum		-	-
orientation	enum		-	-
delayDuration	number		-	The duration from when the pointer enters the trigger until the tooltip gets opened. @defaultValue 200
skipDelayDuration	number		-	How much time a user has to enter another trigger without incurring a delay again. @defaultValue 300
asChild	boolean		-	-
viewport	boolean		true	-

Usage

import { NavigationMenu } from '@databricks/appkit-ui';

<NavigationMenu /* props */ />

NavigationMenuContent

Dropdown content area for navigation submenu

Source: packages/appkit-ui/src/react/ui/navigation-menu.tsx

Props

Prop	Type	Required	Default	Description
forceMount	true		-	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
asChild	boolean		-	-
onEscapeKeyDown	((event: KeyboardEvent) => void)		-	Event handler called when the escape key is down. Can be prevented.
onPointerDownOutside	((event: PointerDownOutsideEvent) => void)		-	Event handler called when the a pointerdown event happens outside of the DismissableLayer. Can be prevented.
onFocusOutside	((event: FocusOutsideEvent) => void)		-	Event handler called when the focus moves outside of the DismissableLayer. Can be prevented.
onInteractOutside	((event: FocusOutsideEvent | PointerDownOutsideEvent) => void)		-	Event handler called when an interaction happens outside the DismissableLayer. Specifically, when a pointerdown event happens outside or focus moves outside of it. Can be prevented.

Usage

import { NavigationMenuContent } from '@databricks/appkit-ui';

<NavigationMenuContent /* props */ />

NavigationMenuIndicator

Visual indicator for active navigation menu item

Source: packages/appkit-ui/src/react/ui/navigation-menu.tsx

Props

Prop	Type	Required	Default	Description
forceMount	true		-	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
asChild	boolean		-	-

Usage

import { NavigationMenuIndicator } from '@databricks/appkit-ui';

<NavigationMenuIndicator /* props */ />

NavigationMenuItem

Individual navigation menu item

Source: packages/appkit-ui/src/react/ui/navigation-menu.tsx

Props

Prop	Type	Required	Default	Description
value	string		-	-
asChild	boolean		-	-

Usage

import { NavigationMenuItem } from '@databricks/appkit-ui';

<NavigationMenuItem /* props */ />

NavigationMenuLink

Clickable link within navigation menu

Source: packages/appkit-ui/src/react/ui/navigation-menu.tsx

Props

Prop	Type	Required	Default	Description
active	boolean		-	-
onSelect	((event: Event) => void)		-	-
asChild	boolean		-	-

Usage

import { NavigationMenuLink } from '@databricks/appkit-ui';

<NavigationMenuLink /* props */ />

NavigationMenuList

Container list for navigation menu items

Source: packages/appkit-ui/src/react/ui/navigation-menu.tsx

Props

Prop	Type	Required	Default	Description
asChild	boolean		-	-

Usage

import { NavigationMenuList } from '@databricks/appkit-ui';

<NavigationMenuList /* props */ />

NavigationMenuTrigger

Button that opens a navigation submenu

Source: packages/appkit-ui/src/react/ui/navigation-menu.tsx

Props

Prop	Type	Required	Default	Description
asChild	boolean		-	-

Usage

import { NavigationMenuTrigger } from '@databricks/appkit-ui';

<NavigationMenuTrigger /* props */ />

NavigationMenuViewport

Viewport container for navigation menu content

Source: packages/appkit-ui/src/react/ui/navigation-menu.tsx

Props

Prop	Type	Required	Default	Description
forceMount	true		-	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
asChild	boolean		-	-

Usage

import { NavigationMenuViewport } from '@databricks/appkit-ui';

<NavigationMenuViewport /* props */ />