SidebarMenu#

SidebarMenu.Root#

	Type	Description
`children`	`React.ReactNode`	(optional) Declarative menu content composed with SidebarMenu.Item, SidebarMenu.Accordion, SidebarMenu.Group, SidebarMenu.Section, SidebarMenu.Header, and SidebarMenu.Divider.
`openItems`	`Array<string>`	(optional) Controlled array of open accordion ids. Selected ancestors are only opened automatically when this property is not provided.
`defaultOpenItems`	`Array<string>`	(optional) Accordion ids that are initially open.
`openItemsStorageKey`	`string`	(optional) Storage key used to persist the user's open accordion state between route navigations.
`openItemsStorage`	`"session"` `"local"`	(optional) Storage used with openItemsStorageKey. Session storage is recommended for navigation UI state.
`scrollPositionStorageKey`	`string`	(optional) Storage key used to persist the nearest ScrollView's vertical position between route navigations.
`scrollPositionStorage`	`"session"` `"local"`	(optional) Storage used with scrollPositionStorageKey. Session storage is recommended for navigation UI state.
`scrollSelectedItemIntoView`	`boolean`	(optional) Whether an off-screen selected item is positioned within the nearest ScrollView or browser viewport.
`openOnFind`	`boolean`	(optional) Keeps collapsed accordion content searchable and opens it when matched by the browser's find-in-page functionality.
`activeSection`	`string`	(optional) Controlled id of the visible section.
`defaultActiveSection`	`string`	(optional) Id of the initially visible section. Defaults to the section marked defaultActive, then the first section.
`sectionLabel`	`React.ReactNode`	(optional) Screen-reader label for the section dropdown. Defaults to the localized SidebarMenu label.
`selectedItem`	`string`	(optional) Controlled id of the selected item or page accordion. A selected page accordion opens when selection initializes or changes, regardless of stored open state, and can then be collapsed manually. Its ancestor accordions and section open automatically, but ancestors can remain collapsed with medium-weight labels to indicate that they contain the current page.
`defaultSelectedItem`	`string`	(optional) Id of the initially selected item or page accordion.
`[nav attributes]`	`Various`	(optional) Standard HTML attributes are supported. Provide aria-label or aria-labelledby to name the navigation landmark.

SidebarMenu.Data#

	Type	Description
`data`	`Array<SidebarMenuItemData>`	(optional) Recursive items used to render a menu from data.
`sections`	`Array<SidebarMenuSectionData>`	(optional) Top-level switchable sections and their recursive items.
`openItems`	`Array<string>`	(optional) Controlled array of open accordion ids. Selected ancestors are only opened automatically when this property is not provided.
`defaultOpenItems`	`Array<string>`	(optional) Accordion ids that are initially open.
`openItemsStorageKey`	`string`	(optional) Storage key used to persist the user's open accordion state between route navigations.
`openItemsStorage`	`"session"` `"local"`	(optional) Storage used with openItemsStorageKey. Session storage is recommended for navigation UI state.
`scrollPositionStorageKey`	`string`	(optional) Storage key used to persist the nearest ScrollView's vertical position between route navigations.
`scrollPositionStorage`	`"session"` `"local"`	(optional) Storage used with scrollPositionStorageKey. Session storage is recommended for navigation UI state.
`scrollSelectedItemIntoView`	`boolean`	(optional) Whether an off-screen selected item is positioned within the nearest ScrollView or browser viewport.
`openOnFind`	`boolean`	(optional) Keeps collapsed accordion content searchable and opens it when matched by the browser's find-in-page functionality.
`activeSection`	`string`	(optional) Controlled id of the visible section.
`defaultActiveSection`	`string`	(optional) Id of the initially visible section. Defaults to the section marked defaultActive, then the first section.
`sectionLabel`	`React.ReactNode`	(optional) Screen-reader label for the section dropdown. Defaults to the localized SidebarMenu label.
`selectedItem`	`string`	(optional) Controlled id of the selected item or page accordion. A selected page accordion opens when selection initializes or changes, regardless of stored open state, and can then be collapsed manually. Its ancestor accordions and section open automatically, but ancestors can remain collapsed with medium-weight labels to indicate that they contain the current page.
`defaultSelectedItem`	`string`	(optional) Id of the initially selected item or page accordion.
`[nav attributes]`	`Various`	(optional) Standard HTML attributes are supported. Provide aria-label or aria-labelledby to name the navigation landmark.

SidebarMenu.Item#

	Type	Description
`id`	`string`	(required) Unique item id used for selection state.
`text`	`React.ReactNode`	(optional) Visible item label.
`children`	`React.ReactNode`	(optional) Alternative to text.
`icon`	`IconIcon`	(optional) Icon displayed before the label.
`badge`	`BadgeProps["content"]`	(optional) Badge content displayed on the right side.
`suffix`	`React.ReactNode`	(optional) Additional content displayed on the right side before the badge.
`badgeProps`	`Omit<BadgeProps, "content" \| "children">`	(optional) Additional properties passed to the Badge component. A nested notification variant is indicated on collapsible ancestor accordions.
`href`	`string`	(optional) Renders the item as a link with this destination.
`to`	`string`	(optional) Router destination passed to element.
`element`	`React.Element`	(optional) Custom link element, such as a router Link component.
`target`	`string`	(optional) Link target attribute.
`rel`	`string`	(optional) Link rel attribute.
`disabled`	`boolean`	(optional) Disables activation.
`active`	`boolean`	(optional) Marks the item as the current page without managing Root selection state.

SidebarMenu.Accordion#

	Type	Description
`id`	`string`	(required) Unique accordion id used by controlled open state and ARIA relationships.
`text`	`React.ReactNode`	(optional) Visible accordion label.
`icon`	`IconIcon`	(optional) Icon displayed before the label.
`badge`	`BadgeProps["content"]`	(optional) Badge content displayed before the accordion indicator.
`suffix`	`React.ReactNode`	(optional) Additional content displayed before the badge and accordion indicator.
`badgeProps`	`Omit<BadgeProps, "content" \| "children">`	(optional) Additional properties passed to the Badge component. A nested notification variant is indicated on collapsible ancestor accordions.
`href`	`string`	(optional) Makes the accordion trigger a page link that also controls expansion.
`to`	`string`	(optional) Router destination passed to element.
`element`	`React.Element`	(optional) Custom link element, such as a router Link component.
`children`	`React.ReactNode`	(optional) Nested items and accordions.
`disabled`	`boolean`	(optional) Disables the accordion trigger.
`open`	`boolean`	(optional) Controlled open state for this accordion.
`defaultOpen`	`boolean`	(optional) Initial local open state.
`collapsible`	`boolean`	(optional) Whether nested items can be collapsed.

SidebarMenu.Section#

	Type	Description
`id`	`string`	(required) Unique section id.
`text`	`React.ReactNode`	(required) Label for the section toggle.
`icon`	`IconIcon`	(optional) Icon shown before the section label.
`badge`	`BadgeProps["content"]`	(optional) Notification badge displayed on the right side of the dropdown option.
`badgeProps`	`Omit<BadgeProps, "content" \| "children">`	(optional) Additional properties passed to the dropdown option Badge component. The variant defaults to "notification".
`triggerBadge`	`BadgeProps["content"]`	(optional) Notification badge displayed on the right side of the selected dropdown trigger.
`triggerBadgeProps`	`Omit<BadgeProps, "content" \| "children">`	(optional) Additional properties passed to the selected dropdown trigger Badge component. The variant defaults to "notification".
`children`	`React.ReactNode`	(optional) Menu content shown while the section is active.

SidebarMenu.Group#

	Type	Description
`id`	`string`	(optional) Unique id used for selection. Required for linked groups and generated for non-linked groups when omitted.
`text`	`React.ReactNode`	(optional) Visible group title.
`icon`	`IconIcon`	(optional) Icon shown before a linked group title.
`badge`	`BadgeProps["content"]`	(optional) Badge content displayed on the right side of a linked group title.
`suffix`	`React.ReactNode`	(optional) Additional content displayed before the badge.
`badgeProps`	`Omit<BadgeProps, "content" \| "children">`	(optional) Additional properties passed to the Badge component.
`children`	`React.ReactNode`	(optional) Nested menu content that is always visible.
`href`	`string`	(optional) Makes the group title a page link without making it collapsible.
`to`	`string`	(optional) Router destination passed to element.
`element`	`React.Element`	(optional) Custom link element, such as a router Link component.
`disabled`	`boolean`	(optional) Disables activation of the optional page link.

SidebarMenu.Header#

	Type	Description
`text`	`React.ReactNode`	(optional) Header text.
`children`	`React.ReactNode`	(optional) Alternative to text.
`headingLevel`	`number`	(optional) Semantic heading level.

SidebarMenu.Divider#

Supports standard HTMLAttributes<HTMLLIElement>.

SidebarMenu.PreHydrationScript#

Renders the blocking script that restores persisted SidebarMenu state before hydration. It supports standard ScriptHTMLAttributes<HTMLScriptElement> except children and dangerouslySetInnerHTML. Place it after the prerendered menu markup and before the application hydration script.

SidebarMenu.getPreHydrationScript#

Returns the same standalone script as a string for HTML templates assembled outside React.

SidebarMenu.ResizeHandle#

	Type	Description
`targetRef`	`React.RefObject<HTMLElement>`	(required) Ref to the element being resized. The handle reads this element’s rendered width when dragging starts or an arrow key is pressed.
`cssProperty`	`string`	(optional) CSS custom property that receives the new width as a pixel value, for example `--sidebar-width: 336px`. Use this property in the CSS that sizes the sidebar.
`scopeSelector`	`string`	(optional) Selector passed to `targetRef.current.closest()` to find where `cssProperty` is set. Use a shared layout ancestor when the sidebar and adjacent content both depend on the width. When omitted, the property is set on the referenced sidebar element.
`minWidth`	`number`	(optional) Smallest width the handle can write, in pixels. Use layout CSS for any additional responsive constraints.
`maxWidth`	`number`	(optional) Largest width the handle can write, in pixels.
`collapseThreshold`	`number`	(optional) Width in pixels at which continued pointer dragging calls onCollapse. Defaults to half of minWidth.
`step`	`number`	(optional) Number of pixels added or removed when pressing ArrowRight or ArrowLeft.
`largeStep`	`number`	(optional) Number of pixels added or removed when pressing Shift together with ArrowRight or ArrowLeft.
`[button attributes]`	`Various`	(optional) Standard button attributes are supported. Set `aria-controls` to the id of the resized sidebar. The default accessible label is "Resize sidebar".

SidebarMenu.ResponsiveProvider#

	Type	Description
`breakpoint`	`MediaQuerySizes` `${number}em`	(optional) Maximum viewport width at which the mobile navigation is used. Use an Eufemia breakpoint name or an explicit em value.
`styleNonce`	`string`	(optional) CSP nonce forwarded to first-paint CSS generated for a custom breakpoint.
`open`	`boolean`	(optional) Controlled Drawer state.
`defaultOpen`	`boolean`	(optional) Initial uncontrolled Drawer state.
`inlineCollapsed`	`boolean`	(optional) Controlled desktop inline navigation state.
`defaultInlineCollapsed`	`boolean`	(optional) Initial uncontrolled desktop inline navigation state.

SidebarMenu.ResponsiveTrigger#

	Type	Description
`controls`	`string`	(optional) Id of the responsive Drawer controlled by the trigger.
`inlineControls`	`string`	(optional) Id of the desktop inline navigation restored by the trigger.
`[Button properties]`	`Various`	(optional) Supports Button properties except aria-expanded and aria-haspopup, which are managed by the responsive navigation.

SidebarMenu.ResponsiveDrawer#

	Type	Description
`id`	`string`	(optional) Id matched by ResponsiveTrigger controls.
`dialogTitle`	`React.ReactNode`	(optional) Accessible name of the Drawer.
`[Drawer properties]`	`Various`	(optional) Supports Drawer properties except open, which is managed by ResponsiveProvider.

SidebarMenu.useResponsive#

Returns SidebarMenuResponsiveValue with:

open, setOpen, toggle, and close for the small-screen Drawer.
isSmallScreen for the active responsive mode.
inlineCollapsed, collapseInline, and restoreInline for dismissible desktop navigation.

Suggest an edit