Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. Read about intended use and customization.
Menu.Root#
| Type | Description | |
|---|---|---|
open | boolean | (optional) Controlled open state. Use together with onOpenChange. |
arrowPosition | "left" "right" "center" "top" "bottom" | (optional) Position of the popover arrow relative to the popover. top and bottom positions are only applicable when placement is left or right, and vice versa. |
placement | "top" "right" "bottom" "left" | (optional) Preferred placement of the menu relative to the trigger. |
autoAlignMode | "initial" "scroll" "never" | (optional) Control when the menu automatically flips its placement to fit within the viewport. "initial": flip only on open. "scroll": also flip during scroll. "never": always use specified placement. |
skipPortal | boolean | (optional) Render inline instead of inside a portal. |
noAnimation | boolean | (optional) Disable the open/close animation. |
Menu.Button#
| Type | Description | |
|---|---|---|
icon | IconIcon | (optional) Icon displayed on the trigger button. |
variant | "primary" "secondary" "tertiary" | (optional) Button variant. |
text | string | (optional) Visible text label for the trigger button. |
children | function | (optional) Render function for a custom trigger element. Receives the trigger props to spread on your element, including active, open, close and toggle. Use text for the label of the default button. |
[Button props] | Various | (optional) All Button props are supported. |
Menu.List#
| Type | Description | |
|---|---|---|
children | React.ReactNode | (required) Menu items. Use Menu.Action and Menu.Divider as direct children. |
maxVisibleListItems | number | (optional) Sets the maximum visible list items before the content scrolls. The component measures the rendered height of the first visible items. An explicit style.maxHeight overrides this. |
Menu.Action#
| Type | Description | |
|---|---|---|
text | React.ReactNode | (optional) Action label text. |
icon | IconIcon | (optional) Icon displayed before the text. |
href | string | (optional) When provided, the action renders as a link. |
to | string | (optional) Use this property when using a router Link component as the element. The to value is passed to the router element for client-side navigation. |
element | React.Element | (optional) Define what HTML or React element should be used for the link (e.g. element={Link} for a router Link component). Defaults to a semantic a element. |
target | string | (optional) Link target attribute (e.g. _blank). |
rel | string | (optional) Link rel attribute (e.g. noopener noreferrer). |
disabled | boolean | (optional) Disables the action. Sets aria-disabled and prevents click/keyboard activation. |
children | React.ReactNode | (optional) Custom content rendered inside the action item. |
Menu.Accordion#
| Type | Description | |
|---|---|---|
text | React.ReactNode | (optional) Accordion trigger label text. |
icon | IconIcon | (optional) Icon displayed before the text. |
disabled | boolean | (optional) Disables the accordion trigger. Sets aria-disabled and prevents toggling. |
openOnFind | boolean | (optional) Keeps collapsed menu items findable by the browser's find-in-page feature. Matching content opens the accordion. |
children | React.ReactNode | (required) Menu items rendered inside the accordion when open. Use Menu.Action and Menu.Divider as children. |
Menu.Header#
| Type | Description | |
|---|---|---|
text | React.ReactNode | (optional) Header text displayed in the menu. |
children | React.ReactNode | (optional) Alternative to text. Content rendered inside the header. |
Menu.Divider#
No properties.