Navigation Menu
A collection of links for navigating websites.
Usage
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
navigationMenuTriggerStyle,
} from "@momo-webplatform/mobase";
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Item One</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink>Link</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>API Reference
Navigation Menu component extends Radix Navigation Menu (opens in a new tab) component and supports all of its props.
NavigationMenu
| Prop | Type | Default | Required |
orientation | enumOrientation | -- | false |
dir | enumDirection | -- | false |
value | string | -- | false |
defaultValue | string | -- | false |
asChild | enumboolean | -- | false |
onValueChange | (value: string) => void | -- | false |
delayDuration | number | -- | false |
skipDelayDuration | number | -- | false |
alignDropdown | enumAlignDropdown | left | false |
NavigationMenuList
| Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
NavigationMenuItem
| Prop | Type | Default | Required |
value | string | -- | false |
asChild | enumboolean | -- | false |
NavigationMenuContent
| Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
disableOutsidePointerEvents | enumboolean | -- | false |
onEscapeKeyDown | (event: KeyboardEvent) => void | -- | false |
onPointerDownOutside | (event: PointerDownOutsideEvent) => void | -- | false |
onFocusOutside | (event: FocusOutsideEvent) => void | -- | false |
onInteractOutside | (event: PointerDownOutsideEvent | FocusOutsideEvent) => void | -- | false |
forceMount | true | -- | false |
NavigationMenuTrigger
| Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
NavigationMenuLink
| Prop | Type | Default | Required |
active | enumboolean | -- | false |
onSelect | (event: Event) => void | -- | false |
asChild | enumboolean | -- | false |
Best practices
- Provides a persistent menu bar for desktop applications.