Vertical Menu Group
<esp-vertical-menu-group>
A collapsible group inside an
<esp-vertical-menu>. Groups can
contain <esp-vertical-menu-item>
children and/or nested <esp-vertical-menu-group> sub-groups
for multi-level navigation.
Top-level groups typically correspond to the site's main
navigation sections (e.g. "Components", "API", "Guides"). The
optional url-prefix attribute enables automatic expansion when
the current URL falls within the group's section.
Examples
Custom right-side icon rail
Attributes
<esp-vertical-menu-group> has the following attributes:
label
label has a default value of "".
Group heading text.
url
url has a default value of "".
Optional URL for the group heading. When set, clicking the label text navigates to this URL while clicking elsewhere on the header row (caret, icon, empty space) toggles expand/collapse.
open
open has a default value of false.
Whether the group's children are visible. Reflects to an
attribute so CSS can target :host([open]).
url-prefix
url-prefix has a default value of "".
URL prefix for automatic expansion. If
location.pathname starts with this value the group
opens itself on connect.
Events
<esp-vertical-menu-group> emits the following events:
esp-group-toggle
esp-group-toggle is of type CustomEvent<{ open: boolean }>.
Fired when the group is expanded or collapsed.
CSS Properties
<esp-vertical-menu-group> has the following CSS properties:
--esp-vertical-menu-group-color
The text color of the group header.
--esp-vertical-menu-group-background
The background color of the group header.
--esp-vertical-menu-group-hover-background
The background color of the group header on hover.
--esp-vertical-menu-group-indicator-color
The color of the expand/collapse indicator.
--esp-vertical-menu-group-border-color
The border color of the group.
--esp-vertical-menu-group-icon-width
The width of the right-side icon rail.
--esp-vertical-menu-group-icon-min-width
The minimum width of the right-side icon rail.
--esp-vertical-menu-group-icon-padding
The padding inside the right-side icon rail.
--esp-vertical-menu-group-icon-background
The background color of the right-side icon rail.
--esp-vertical-menu-group-icon-border-left
The left border applied to the right-side icon rail.
--esp-vertical-menu-group-icon-svg-width
The width of slotted SVG icons in the right-side icon rail.
--esp-vertical-menu-group-icon-svg-height
The height of slotted SVG icons in the right-side icon rail.
--esp-vertical-menu-group-icon-image-width
The width of slotted image icons in the right-side icon rail.
--esp-vertical-menu-group-icon-image-height
The height of slotted image icons in the right-side icon rail.
--esp-vertical-menu-group-scroll-duration
Smooth scroll duration in ms when a group expands into view.