Menu Item
import "@taprootio/espalier/menu/item";
<esp-menu-item>
A navigation item for <esp-menu>.
Items render as links when url is provided and as buttons when
no URL is present. Button-style items dispatch esp-clicked.
Slots
<esp-menu-item> has a slot:
Default
Optional SVG or image icon. Slotted content overrides the generated sprite icon from the icon attribute.
Attributes
<esp-menu-item> has the following attributes:
label
label has a default value of "".
Label to display.
url
url has a default value of "".
Resource to link to. When empty, the item renders as a button.
icon
icon has a default value of "".
Optional icon name from the configured Espalier SVG sprite.
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-item> 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-item> emits the following events:
esp-clicked
esp-clicked is of type CustomEvent.
Fired when the item is rendered as a button (no url) and activated.
CSS Properties
<esp-menu-item> has the following CSS properties:
--esp-menu-item-color
Text color.
--esp-menu-item-background
Background color.
--esp-menu-item-border-color
Border color.
--esp-menu-item-hover-color
Hover text color.
--esp-menu-item-hover-background
Hover background color.
--esp-menu-item-hover-decoration
Text decoration of a hovered link item. Defaults to none; set underline to restore the former underline.
--esp-menu-item-hover-indicator-color
Color of the bar drawn under a hovered horizontal item. Defaults to --esp-menu-item-hover-color, then var(--esp-color-headings-hover).
--esp-menu-item-transition-duration
Duration for color, background, and indicator changes. Defaults to 0.2s; reduced motion disables the transition.
--esp-menu-item-icon-background
Icon area background color.
--esp-menu-item-active-color
Text color of the active item.
--esp-menu-item-active-background
Background color of the active item.
--esp-menu-item-active-indicator-color
Color of the bar drawn under the active horizontal item. Defaults to --esp-menu-item-active-color, then var(--esp-color-link).
--esp-menu-item-active-font-weight
Font weight of the active item. Defaults to var(--esp-font-weight-headings).
--esp-menu-item-font-family
Font family of item labels. Defaults to the theme's --esp-font-menu, then --esp-font-body.
--esp-menu-item-font-weight
Font weight of horizontal item labels. Defaults to --esp-font-weight-menu, then 700.
--esp-menu-item-font-size
Font size of item labels. Defaults to inherit.
--esp-menu-item-padding
Padding around the item label.
--esp-menu-item-icon-min-width
Minimum width of the icon rail.
--esp-menu-item-icon-padding
Padding inside the icon rail.
--esp-menu-item-icon-size
Size of generated and slotted item icons.
--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).