edbnedbn/ui
ComponentsMapsPDF
GitHub stars
Explorer
Get Started
Components

Navigation Menu

Horizontal navigation menu with dropdown content panels and links.

Componentsdocsbase-ui/navigation-menu

Installation

npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/navigation-menu.json

Manual

API Reference

Root

Groups all parts of the navigation menu. Renders nav at the top level, or div when nested.

actionsRefReact.RefObject<{ unmount: () => void } | null>

Imperative actions ref exposed by Base UI.

onOpenChangeComplete(open: boolean) => void

Called after close animations finish.

valueValue | null
=null

Controlled value for the currently open item.

defaultValueValue | null
=null

Initial uncontrolled value for the open item.

onValueChange(value: Value | null, details) => void

Called when the open item value changes.

delaynumber
=50

Delay in milliseconds before opening on hover.

closeDelaynumber
=50

Delay in milliseconds before closing on hover out.

orientation'horizontal' | 'vertical'
='horizontal'

Navigation direction used by keyboard navigation.

classNamestring | ((state) => string | undefined)

CSS class name, or a callback that receives Base UI state.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object, or a callback that receives Base UI state.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function for composition.

List

Contains the top-level navigation menu items. Renders ul.

classNamestring | ((state) => string | undefined)

CSS class name, or a callback that receives Base UI state.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object, or a callback that receives Base UI state.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function for composition.

Item

An individual top-level navigation menu item. Renders li.

valueany
=auto-generated

Unique item value. Provide this when controlling Root.value.

classNamestring | ((state) => string | undefined)

CSS class name, or a callback that receives Base UI state.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object, or a callback that receives Base UI state.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function for composition.

Trigger

Button that opens the associated content on hover, click, or keyboard activation.

nativeButtonboolean
=true

Set false when render replaces the button with a non-button element.

classNamestring | ((state) => string | undefined)

CSS class name, or a callback that receives Base UI state.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object, or a callback that receives Base UI state.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function for composition.

Trigger data attributes
AttributeDescription
data-popup-openPresent when the associated menu item is open.
data-pressedPresent while the trigger is pressed.

Icon

Indicator associated with the trigger. Renders span.

classNamestring | ((state) => string | undefined)

CSS class name, or a callback that receives Base UI state.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object, or a callback that receives Base UI state.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function for composition.

Icon data attributes
AttributeDescription
data-popup-openPresent when the associated trigger is open.

Content

Panel content for a menu item. It is moved into Viewport while active.

keepMountedboolean
=false

Keep content in the DOM while closed; useful for SSR-visible links.

classNamestring | ((state) => string | undefined)

CSS class name, or a callback that receives Base UI state.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object, or a callback that receives Base UI state.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function for composition.

Content data attributes
AttributeDescription
data-openPresent when the popup is open.
data-closedPresent when the popup is closed.
data-starting-stylePresent while the part is animating in.
data-ending-stylePresent while the part is animating out.
data-activation-directionDirection another trigger was activated from: left, right, up, or down.

Link

Navigation link inside a menu panel. Renders a.

activeboolean
=false

Marks the link as representing the current page.

closeOnClickboolean
=false

Close the navigation menu when the link is clicked.

classNamestring | ((state) => string | undefined)

CSS class name, or a callback that receives Base UI state.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object, or a callback that receives Base UI state.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function for composition.

Link data attributes
AttributeDescription
data-activePresent when active is true.

Backdrop

Optional backdrop behind the popup. Renders div.

classNamestring | ((state) => string | undefined)

CSS class name, or a callback that receives Base UI state.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object, or a callback that receives Base UI state.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function for composition.

Backdrop data attributes
AttributeDescription
data-openPresent when the popup is open.
data-closedPresent when the popup is closed.
data-starting-stylePresent while the part is animating in.
data-ending-stylePresent while the part is animating out.

Portal

Moves the popup to document.body or to a custom container. Renders div.

keepMountedboolean
=false

Keep the portal mounted while the popup is hidden.

containerHTMLElement | null | React.RefObject<HTMLElement | null>
=document.body

Parent element that receives the portal.

classNamestring | ((state) => string | undefined)

CSS class name, or a callback that receives Base UI state.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object, or a callback that receives Base UI state.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function for composition.

Positioner

Positions the popup against the active trigger or a custom anchor.

anchorElement | VirtualElement | RefObject | (() => Element | null)
=active trigger

Custom element or virtual element to position against.

positionMethod'absolute' | 'fixed'
='absolute'

CSS positioning strategy.

side'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end'
='bottom'

Preferred side relative to the anchor.

sideOffsetnumber | ((data) => number)
=10

Wrapper spacing from anchor; Base UI default is 0.

align'start' | 'center' | 'end'
='center'

Preferred alignment along the anchor.

alignOffsetnumber | ((data) => number)
=0

Offset along the alignment axis.

collisionBoundary'clipping-ancestors' | Element | Element[] | Rect
='clipping-ancestors'

Boundary used for collision detection.

collisionPaddingnumber | { top?: number; right?: number; bottom?: number; left?: number }
=16

Wrapper collision padding; Base UI default is 5.

stickyboolean
=false

Keep the popup in view after the anchor scrolls away.

arrowPaddingnumber
=5

Minimum spacing between arrow and popup edge.

disableAnchorTrackingboolean
=false

Disable tracking layout shifts of the anchor.

collisionAvoidance{ side?: 'flip' | 'shift' | 'none'; align?: 'flip' | 'shift' | 'none'; fallbackAxisSide?: 'start' | 'end' | 'none' }

Collision behavior for side, alignment, and fallback axis.

classNamestring | ((state) => string | undefined)

CSS class name, or a callback that receives Base UI state.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object, or a callback that receives Base UI state.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function for composition.

Positioner data attributes
AttributeDescription
data-openPresent when the popup is open.
data-closedPresent when the popup is closed.
data-anchor-hiddenPresent when the anchor element is hidden.
data-sideResolved side: top, bottom, left, right, inline-start, or inline-end.
data-alignResolved alignment: start, center, or end.
data-instantPresent when CSS transitions should be disabled.
Positioner CSS variables
VariableDescription
--available-widthAvailable width before collision with the boundary.
--available-heightAvailable height before collision with the boundary.
--anchor-widthWidth of the active trigger or custom anchor.
--anchor-heightHeight of the active trigger or custom anchor.
--transform-originAnchor-aware transform origin for popup animation.
--positioner-widthMeasured width used to match the active content panel.
--positioner-heightMeasured height used to match the active content panel.

Popup

Popup surface that contains the active viewport. Renders nav.

classNamestring | ((state) => string | undefined)

CSS class name, or a callback that receives Base UI state.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object, or a callback that receives Base UI state.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function for composition.

Popup data attributes
AttributeDescription
data-openPresent when the popup is open.
data-closedPresent when the popup is closed.
data-starting-stylePresent while the part is animating in.
data-ending-stylePresent while the part is animating out.
data-sideResolved side: top, bottom, left, right, inline-start, or inline-end.
data-alignResolved alignment: start, center, or end.
Popup CSS variables
VariableDescription
--popup-widthMeasured width of the active content panel.
--popup-heightMeasured height of the active content panel.

Viewport

Clipping viewport for the currently active content. Renders div.

classNamestring | ((state) => string | undefined)

CSS class name, or a callback that receives Base UI state.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object, or a callback that receives Base UI state.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function for composition.

Arrow

Optional element pointing from popup toward the active trigger.

classNamestring | ((state) => string | undefined)

CSS class name, or a callback that receives Base UI state.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object, or a callback that receives Base UI state.

renderReactElement | ((props, state) => ReactElement)

Custom element or render function for composition.

Arrow data attributes
AttributeDescription
data-openPresent when the popup is open.
data-closedPresent when the popup is closed.
data-sideResolved side: top, bottom, left, right, inline-start, or inline-end.
data-alignResolved alignment: start, center, or end.
data-uncenteredPresent when the arrow cannot be centered on the anchor.