Skip to main content

MenuItem

shadow

MenuItem is a child of the Menu. element and represents a navigation item within it. It can display a submenu with additional navigation items and also allows icons to be displayed. For examples of using MenuItem, go to the Menu element documentation page.

Attributes and Properties

customEvent

DescriptionThe name of the custom event that is triggered when you click on the item.
Attributecustom-event
Typestring
Defaultnull

checked

DescriptionIndicates whether the menu item is marked.
Attributechecked
Typeboolean
Defaultfalse

manual

DescriptionIf set, the submenu will not appear automatically on a hover event.
Attributemanual
Typeboolean
Defaultfalse

offset

DescriptionOffsetting the submenu against the parent item.
Attributeoffset
Typestring
Default"0"

Events

NameDescription
wje-menu-item:clickIt is called when you click on a menu item.

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
nativeThe basic element of a menu item.
checkThe part for the item check icon.
submenu-iconThe part for the icon that indicates the presence of a submenu.
endThe section for the location of the end content of the menu item.

CSS Custom Properties

NameDescription
--wje-menu-item-colorSets the text color of the menu item. By default, it uses the value var(--wje-color).
--wje-menu-item-backgroundDefines the background color of the menu item. The default is transparent.
--wje-menu-item-color-hoverSpecifies the text color of the menu item in hover state. By default it uses var(--wje-color-contrast-8).
--wje-menu-item-background-hoverSets the background color of the menu item in hover state. By default it uses var(--wje-border-color).
--wje-menu-item-color-focusDefines the text color of the menu item in the focus state. By default it uses var(--wje-color-contrast-8).
--wje-menu-item-background-focusSpecifies the background color of the menu item in the focus state. By default it uses var(--wje-border-color).
--wje-menu-item-color-activeSets the text color of the active menu item. By default it uses var(--wje-color-contrast-8).
--wje-menu-item-background-activeSpecifies the background color of the active menu item. By default it uses var(--wje-border-color).
--wje-menu-item-padding-topSpecifies the top inner edge of the menu item. The default is .5rem.
--wje-menu-item-padding-bottomSpecifies the lower inner edge of the menu item. The default is .5rem.
--wje-menu-item-line-heightSets the line height for the text in the menu item. The default is 1.8rem.
--wje-menu-submenu-offsetSpecifies the horizontal offset of the submenu relative to its parent element.
--wje-menu-item-icon-visibilityControls the visibility of the icon in the menu item. Supports visible, hidden or collapse values.
--wje-menu-item-check-icon-displayDetermines how to display the menu item check icon. The default is flex.
--wje-menu-item-check-icon-widthSets the width of the menu item check icon. The default is 1.5rem.

Slots

NameDescription
``Default slot for the text content of the menu item.
startA slot for content that appears at the beginning of a menu item (e.g. an icon).
endThe content slot that appears at the end of the menu item.
submenuA slot for a nested menu that appears as a submenu of this item.