Side menu

Sidebar content

The sidebar is a basic version, working as a container that provides a flexible shell for your content.

UX/UI Guidelines

Check the design documentation of the component in ZeroHeight.

Implementations

The component SideMenu is available in the following technologies:

Web Components

Parameters

Parameters

Make sure you have read about the parameters in here.

The parametrization of the component can be done with the following custom params or properties:

Name	Type	Slot	Description
config	string		Position of the sidebar
open	boolean		Whether the sidebar is open or not
content	string	✅	Content of the sidebar
model	boolean		Whether the sidebar is open or not
custom	object		A record of key-value pairs to set the CSS custom tokens. It's a complex attribute set as an JS object in stringified JSON format. Example: <z-side-menu custom='{"fill":"#06e7a3"}' /> Check the available values in the customization section.
custom-str	string		The stringified version of the custom property. It follows the pattern key:value;key:value;, with the possibility of setting multiple values and spaces between the punctuation characters. Example: <z-side-menu custom-str="fill:#06e7a3" />
z-theme	string		Sets the theme of the component. The possible values are light and dark. <z-side-menu z-theme="dark" />

From Figma to code

...

Customization

INFO

Check everything about the customization mechanics in the "How it works" documentation.

CSS Variable	Type	Description
--z-side-menu--bg	color	Background color of the sidebar
--z-side-menu--color	color	Text color of the sidebar
--z-side-menu--padding	distance	Padding of the sidebar
--z-side-menu--top	distance	Top position of the sidebar
--z-side-menu--radius	distance	Border radius of the sidebar
--z-side-menu--width	distance	Width of the sidebar

Both background and text color can be customized using the --z-sidebar--bg and --z-sidebar--color tokens.

Also the padding, top-position, radius and width of the sidebar can be customized using the --z-sidebar--padding, --z-sidebar--top, --z-sidebar--radius and --z-sidebar--width tokens.

Sidebar content

Accessibility

...

Related components