Menu Group
import "@taprootio/espalier/menu/group";
<esp-menu-group>
A disclosure section inside <esp-menu>.
Groups can contain esp-menu-item and nested esp-menu-group
children. In horizontal top navigation, top-level groups open an
accessible panel; inside that panel, deeper levels render as
vertical disclosure navigation.
Slots
<esp-menu-group> has the following slots:
Default
Menu items or nested menu groups.
icon
Optional SVG or image icon for the group.
Attributes
<esp-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 label.
icon
icon has a default value of "".
Optional icon name from the configured Espalier SVG sprite.
open
open has a default value of false.
Whether the group's children are visible.
full-screen-presentation
full-screen-presentation has a default value of false.
Set by esp-menu for groups rendered in its full-screen drawer: the
label centers across the row and the disclosure control keeps the
inline end, so a linked group reads like the centered items around it.
url-prefix
url-prefix has a default value of "".
URL prefix for automatic expansion. If location.pathname
starts with this value, the group opens on connect.
intent
intent has a default value of undefined.
The element's intent — its meaning: neutral
(no pin), or success, warning, danger, info — each pinned
to its fixed status family (blue for info), retunable per theme
via intents. On token-emitting controls a non-neutral intent pins the
filled-action pair to that family, derived over the governing
zone's theme; class-styled chrome (badges, callouts, status pills)
opts out of inline emission and renders its treatment from CSS
classes instead. An intent never repaints the surrounding zone,
which is what contexts are for. Removing the attribute restores
the element's own default intent.
context
context has a default value of undefined.
A theme-defined color zone. The selected context rebinds designer-facing roles and emits a complete, contrast-enforced semantic token table on this host for descendants to inherit.
Methods
<esp-menu-group> has the following methods:
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-menu-group> emits the following events:
esp-menu-group-toggle
esp-menu-group-toggle is of type CustomEvent<{ open: boolean }>.
Fired when the group opens or closes.
CSS Properties
<esp-menu-group> has the following CSS properties:
--esp-menu-group-color
Text color of the group header.
--esp-menu-group-background
Background color of the group header.
--esp-menu-group-hover-background
Hover background color of the group header.
--esp-menu-group-indicator-color
Color of the expand/collapse indicator.
--esp-menu-group-border-color
Border color of the group.
--esp-menu-group-panel-background
Background color of horizontal disclosure panels.
--esp-menu-group-panel-shadow
Box shadow of horizontal disclosure panels.
--esp-menu-group-icon-min-width
Minimum width of the icon rail.
--esp-menu-group-icon-padding
Padding inside the icon rail.
--esp-menu-group-icon-background
Background color of the icon rail.
--esp-menu-group-icon-size
Size of generated and slotted group icons.
--esp-menu-item-font-family
Font family of the group label, shared with menu items. Defaults to the theme's --esp-font-menu, then --esp-font-body.
--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).