Sidebar

import { Sidebar } from '@enmovil/ui-design-system';

A collapsible side navigation menu built from menus. It uses a dark theme by default; pass theme="light" for a white background with teal accents.

Properties

Property	Type	Required	Default	Allowed values	Description
className	string	No	—	—	Extra CSS class added to the sidebar container.
menus	MenuItem[]	No	[]	—	Items of the menu, nested through children. Without it the menu is empty.
open	boolean	Yes	—	—	Whether the sidebar is expanded. When false it shrinks to a 56px icon rail and closes all sub-menus; while open, a click outside the sidebar or on an item without children calls onOpenChange(false).
selectedKeys	string[]	No	—	—	Keys of the highlighted items. While the sidebar is open, the sub-menus containing the first key are expanded, and an indicator bar marks the active top-level entry.
defaultSelectedKeys	string[]	No	—	—	Keys highlighted on first render when selectedKeys is not set. Expanding parent sub-menus and the indicator bar only follow selectedKeys.
widthOnOpen	string | number	No	—	—	Width of the open sidebar, in pixels when a number or any CSS length. Defaults to 232px.
headerHeight	string | number	No	—	—	Height of the page header above the sidebar, in pixels when a number or any CSS length; the sidebar is as tall as the viewport minus this. Defaults to 52px.
theme	string	No	'dark'	'light', 'dark'	Visual theme. Default is "dark" (dark teal background, light text) which is the new look introduced in v0.0.81. Pass "light" to keep the original white background with teal accents.

menus

An array of objects (MenuItem). Each object has these fields:

Field	Type	Required	Description
key	string	Yes	Unique identifier of the item across the whole menu, matched by selectedKeys and used to track open sub-menus.
icon	React.ReactNode	No	Icon shown before the label. While the sidebar is closed, it is all that shows of the item.
label	React.ReactNode	Yes	Text or content of the item.
type	"group" | "divider"	No	group shows the item as a titled section listing its children; divider shows a separator line. While the sidebar is closed, groups are dropped and their children shown at the top level.
isHidden	boolean	No	Leaves the item and all its children out of the menu.
onClick	() => void	No	Called when the item is clicked. Only fires for items without children.
children	MenuItem[]	No	Child items, shown in a sub-menu that expands in place. Opening a sub-menu closes the other open one at the same level.
count	number	No	Number shown in a badge after the label. No badge when it is absent or 0.
href	string	No	Wraps the label in a link to this URL, so clicking the item navigates the page.

menus.children

An array of objects (MenuItem). Each object has these fields:

Field	Type	Required	Description
key	string	Yes	Unique identifier of the item across the whole menu, matched by selectedKeys and used to track open sub-menus.
icon	React.ReactNode	No	Icon shown before the label.
label	React.ReactNode	Yes	Text or content of the item.
type	"group" | "divider"	No	group shows the item as a titled section listing its children; divider shows a separator line.
isHidden	boolean	No	Leaves the item and all its children out of the menu.
onClick	() => void	No	Called when the item is clicked. Only fires for items without children.
children	MenuItem[]	No	Child items, shown in a nested sub-menu. Opening a sub-menu closes the other open one at the same level.
count	number	No	Number shown in a badge after the label. No badge when it is absent or 0.
href	string	No	Wraps the label in a link to this URL, so clicking the item navigates the page.

menus.children.children

An array of objects (MenuItem). Each object has these fields:

Field	Type	Required	Description
key	string	Yes	Unique identifier of the item across the whole menu, matched by selectedKeys and used to track open sub-menus.
icon	React.ReactNode	No	Icon shown before the label.
label	React.ReactNode	Yes	Text or content of the item.
type	"group" | "divider"	No	group shows the item as a titled section listing its children; divider shows a separator line.
isHidden	boolean	No	Leaves the item and all its children out of the menu.
onClick	() => void	No	Called when the item is clicked. Only fires for items without children.
children	MenuItem[]	No	Child items, shown in a further nested sub-menu. Items can nest to any depth.
count	number	No	Number shown in a badge after the label. No badge when it is absent or 0.
href	string	No	Wraps the label in a link to this URL, so clicking the item navigates the page.

Other attributes

Sidebar passes 294 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.

Events

Name	Signature	When it fires
onOpenChange	(open: boolean) => void	Called with false when a leaf item is clicked, asking the parent to close the sidebar. Set open from it.
onMouseEnter	MouseEventHandler<HTMLUListElement>	Fires when the pointer enters the menu list.
onMouseLeave	MouseEventHandler<HTMLUListElement>	Fires when the pointer leaves the menu list.
onSelect	SelectEventHandler	Fires when a menu item is selected.

Children

Sidebar does not accept children.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.

Loading playground…

Storybook

Open Sidebar in Storybook to try every story with the full set of controls.