Navigation Menu
A navigation component that presents structural site hierarchies via drop-down panels or links.Â
For more information on this component configuration, visit Radix UIÂ
Disabled
Use the disabled class to disable the component.
Disabled Item
Use the disabled attr or the disabled class to disable an item component.
Sizes
Use the navigation-menu-{size} class to control the component size.
Size values can include:smmd.
For more information on all available sizing utilities, visit TailwindÂ
Customizing
globals.css
:root {
--ex-navigation-menu-spacer-sm: calc(var(--spacing) * 2);
--ex-navigation-menu-spacer-md: calc(var(--spacing) * 3);
--ex-navigation-menu-height-sm: calc(var(--spacing) * 10);
--ex-navigation-menu-height-md: calc(var(--spacing) * 11);
--ex-navigation-menu-gap-x-sm: calc(var(--spacing) * 1);
--ex-navigation-menu-gap-x-md: calc(var(--spacing) * 2);
--ex-navigation-menu-gap-y-sm: calc(var(--spacing) * 1);
--ex-navigation-menu-gap-y-md: calc(var(--spacing) * 2);
--ex-navigation-menu-px-sm: calc(var(--spacing) * 1.5);
--ex-navigation-menu-px-md: calc(var(--spacing) * 2);
--ex-navigation-menu-py-sm: calc(var(--spacing) * 1.5);
--ex-navigation-menu-py-md: calc(var(--spacing) * 2);
--ex-navigation-menu-radius-sm: var(--radius-sm);
--ex-navigation-menu-radius-md: var(--radius-sm);
--ex-navigation-menu-item-font-family: var(--font-sans);
--ex-navigation-menu-item-font-weight: var(--font-weight-normal);
--ex-navigation-menu-item-font-size-sm: var(--text-xs);
--ex-navigation-menu-item-font-size-md: var(--text-sm);
--ex-navigation-menu-item-height-sm: calc(var(--spacing) * 9);
--ex-navigation-menu-item-height-md: calc(var(--spacing) * 10);
--ex-navigation-menu-item-gap-x-sm: calc(var(--spacing) * 1);
--ex-navigation-menu-item-gap-x-md: calc(var(--spacing) * 1.25);
--ex-navigation-menu-item-px-sm: calc(var(--spacing) * 2);
--ex-navigation-menu-item-px-md: calc(var(--spacing) * 2.5);
--ex-navigation-menu-item-radius-sm: var(--radius-sm);
--ex-navigation-menu-item-radius-md: var(--radius-sm);
--ex-navigation-menu-content-font-size-sm: var(--text-xs);
--ex-navigation-menu-content-font-size-md: var(--text-sm);
--ex-navigation-menu-content-radius-sm: var(--radius-sm);
--ex-navigation-menu-content-radius-md: var(--radius-sm);
--ex-navigation-menu-content-shadow-sm: var(--shadow-sm);
--ex-navigation-menu-content-shadow-md: var(--shadow-sm);
--ex-navigation-menu-section-gap-x-sm: calc(var(--spacing) * 1.5);
--ex-navigation-menu-section-gap-x-md: calc(var(--spacing) * 2);
--ex-navigation-menu-section-gap-y-sm: calc(var(--spacing) * 2);
--ex-navigation-menu-section-gap-y-md: calc(var(--spacing) * 2);
--ex-navigation-menu-section-px-sm: calc(var(--spacing) * 3);
--ex-navigation-menu-section-px-md: calc(var(--spacing) * 4);
--ex-navigation-menu-section-py-sm: calc(var(--spacing) * 3);
--ex-navigation-menu-section-py-md: calc(var(--spacing) * 4);
--ex-navigation-menu-indicator-font-size-sm: var(--text-sm);
--ex-navigation-menu-indicator-font-size-md: var(--text-base);
}API
For more information on this component configuration, visit Radix UIÂ
Navigation Menu
| Element | Selector |
|---|---|
NavigationMenu | .ex-navigation-menu |
| Prop | Type | Default |
|---|---|---|
as | ElementType | nav |
asChild | boolean | false |
defaultValue | string | false |
delayDuration | number | 200 |
orientation | enum of ["horizontal", "vertical"] | horizontal |
skipDelayDuration | number | 300 |
value | string | false |
onValueChange | function |
Navigation Menu List
| Element | Selector |
|---|---|
NavigationMenu.List | .ex-navigation-menu-list |
| Prop | Type | Default |
|---|---|---|
as | ElementType | div |
asChild | boolean | false |
Navigation Menu Item
| Element | Selector |
|---|---|
NavigationMenu.Item | .ex-navigation-menu-item |
| Prop | Type | Default |
|---|---|---|
as | ElementType | div |
asChild | boolean | false |
Navigation Menu Trigger
| Element | Selector |
|---|---|
NavigationMenu.Trigger | .ex-navigation-menu-trigger |
| Prop | Type | Default |
|---|---|---|
as | ElementType | button |
asChild | boolean | false |
Navigation Menu Link
| Element | Selector |
|---|---|
NavigationMenu.Trigger | .ex-navigation-menu-trigger |
| Prop | Type | Default |
|---|---|---|
as | ElementType | button |
asChild | boolean | false |
Navigation Menu Content
| Element | Selector |
|---|---|
NavigationMenu.Content | .ex-navigation-menu-content |
| Prop | Type | Default |
|---|---|---|
as | ElementType | div |
asChild | boolean | false |
forceMount | boolean | false |
onFocusOutside | function | |
onInteractOutside | function | |
onPointerDownOutside | function |
Navigation Menu Section
| Element | Selector |
|---|---|
NavigationMenu.Section | .ex-navigation-menu-section |
| Prop | Type | Default |
|---|---|---|
as | ElementType | div |
asChild | boolean | false |
Navigation Menu Indicator
| Element | Selector |
|---|---|
NavigationMenu.Indicator | .ex-navigation-menu-indicator |
| Prop | Type | Default |
|---|---|---|
as | ElementType | div |
asChild | boolean | false |
forceMount | boolean | false |
Navigation Menu Sub
| Element | Selector |
|---|---|
NavigationMenu.Sub | .ex-navigation-menu-sub |
| Prop | Type | Default |
|---|---|---|
as | ElementType | div |
asChild | boolean | false |
defaultValue | string | false |
orientation | enum of ["horizontal", "vertical"] | horizontal |
value | string | false |
onValueChange | function |
Navigation Menu Viewport
| Element | Selector |
|---|---|
NavigationMenu.Viewport | .ex-navigation-menu-viewport |
| Prop | Type | Default |
|---|---|---|
as | ElementType | div |
asChild | boolean | false |
forceMount | boolean | false |
Navigation Menu Viewport Anchor
| Element | Selector |
|---|---|
NavigationMenu.ViewportAnchor | .ex-navigation-menu-viewport-anchor |
| Prop | Type | Default |
|---|---|---|
as | ElementType | div |
asChild | boolean | false |
Last updated on