Vertical Menu
<esp-vertical-menu>
Vertical menu for navigation and user interactions.
When expanded the menu renders inline as a sidebar rail. When
collapsed the rail is hidden and a full-width drawer provides
access to the navigation. The drawer can be opened by swiping
on touch devices or programmatically via the openDrawer(),
closeDrawer(), and toggleDrawer() methods.
The drawer renders in the browser's top layer via the Popover API, so it always appears above all other content regardless of z-index or stacking context.
Sub-components
<esp-vertical-menu-item>— A navigable leaf item with an optional icon column.<esp-vertical-menu-group>— A collapsible group header that can contain items and nested groups.
Drawer icon sizing
The drawer renders its own group instances inside shadow DOM, so
--esp-vertical-menu-group-* properties set on light DOM groups do
not reach them. Instead, set the --esp-vertical-menu-drawer-icon-*
counterparts on the menu element itself. These cascade into drawer
groups via CSS inheritance and stay live across theme and
media-query changes.
Attributes
<esp-vertical-menu> has the following attributes:
side
side has a default value of "left".
Which side of the page the menu is attached to.
Controls swipe direction. Auto-detected from the slot attribute
when placed inside esp-page (slot="sidebar" or slot="right").
auto-expand
auto-expand has a default value of false.
Automatically expand groups to reveal the current page.
When set, the menu inspects location.pathname on first
render, finds the matching item or group, and opens only
the ancestor groups that lead to it.
collapsed
collapsed has a default value of undefined.
Whether or not the menu is collapsed. When collapsed, the sidebar rail is hidden and the navigation is only accessible via the drawer overlay.
Methods
<esp-vertical-menu> has the following methods:
openDrawer
Open the drawer overlay. Only works when collapsed.
closeDrawer
Close the drawer overlay.
toggleDrawer
Toggle the drawer overlay open or closed.
traverseToClosest
Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.
Events
<esp-vertical-menu> emits the following events:
drawer-opened
drawer-opened is of type CustomEvent.
Fired when the drawer opens.
drawer-closed
drawer-closed is of type CustomEvent.
Fired when the drawer closes.
CSS Properties
<esp-vertical-menu> has the following CSS properties:
--esp-vertical-menu-background
The background color of the menu.
--esp-vertical-menu-border-color
The border color of the menu.
--esp-vertical-menu-scrim-color
The scrim (backdrop) color when the drawer is open.
--esp-vertical-menu-drawer-shadow
Box shadow for the drawer overlay.
--esp-vertical-menu-top-offset
Top offset for the drawer and scrim. Set this to the header height (e.g. var(--esp-header-height)) so the drawer does not cover a fixed header.
--esp-vertical-menu-drawer-icon-width
Icon-rail width for drawer groups.
--esp-vertical-menu-drawer-icon-min-width
Icon-rail minimum width for drawer groups.
--esp-vertical-menu-drawer-icon-padding
Icon-rail padding for drawer groups.
--esp-vertical-menu-drawer-icon-svg-width
SVG icon width for drawer groups.
--esp-vertical-menu-drawer-icon-svg-height
SVG icon height for drawer groups.
--esp-vertical-menu-drawer-icon-image-width
Image icon width for drawer groups.
--esp-vertical-menu-drawer-icon-image-height
Image icon height for drawer groups.
--esp-field-background
Background color of the shared field shell. Defaults to var(--esp-color-layer-2).
--esp-field-border-color
Border color of the shared field shell. Defaults to var(--esp-color-border).
--esp-field-border-width
Border width of the shared field shell. Defaults to 1px.
--esp-field-text-color
Text color used inside the shared field shell. Defaults to var(--esp-color-text).
--esp-field-hover-bg
Hover background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-bg
Focus background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-shadow
Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).