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

Description	The name of the custom event that is triggered when you click on the item.
Attribute	custom-event
Type	string
Default	null

checked

Description	Indicates whether the menu item is marked.
Attribute	checked
Type	boolean
Default	false

manual

Description	If set, the submenu will not appear automatically on a hover event.
Attribute	manual
Type	boolean
Default	false

offset

Description	Offsetting the submenu against the parent item.
Attribute	offset
Type	string
Default	"0"

Events

Name	Description
wje-menu-item:click	It is called when you click on a menu item.

Methods

No public methods available for this component.

CSS Shadow Parts

Name	Description
native	The basic element of a menu item.
check	The part for the item check icon.
submenu-icon	The part for the icon that indicates the presence of a submenu.
end	The section for the location of the end content of the menu item.

CSS Custom Properties

Name	Description
--wje-menu-item-color	Sets the text color of the menu item. By default, it uses the value var(--wje-color).
--wje-menu-item-background	Defines the background color of the menu item. The default is transparent.
--wje-menu-item-color-hover	Specifies the text color of the menu item in hover state. By default it uses var(--wje-color-contrast-8).
--wje-menu-item-background-hover	Sets the background color of the menu item in hover state. By default it uses var(--wje-border-color).
--wje-menu-item-color-focus	Defines the text color of the menu item in the focus state. By default it uses var(--wje-color-contrast-8).
--wje-menu-item-background-focus	Specifies the background color of the menu item in the focus state. By default it uses var(--wje-border-color).
--wje-menu-item-color-active	Sets the text color of the active menu item. By default it uses var(--wje-color-contrast-8).
--wje-menu-item-background-active	Specifies the background color of the active menu item. By default it uses var(--wje-border-color).
--wje-menu-item-padding-top	Specifies the top inner edge of the menu item. The default is .5rem.
--wje-menu-item-padding-bottom	Specifies the lower inner edge of the menu item. The default is .5rem.
--wje-menu-item-line-height	Sets the line height for the text in the menu item. The default is 1.8rem.
--wje-menu-submenu-offset	Specifies the horizontal offset of the submenu relative to its parent element.
--wje-menu-item-icon-visibility	Controls the visibility of the icon in the menu item. Supports visible, hidden or collapse values.
--wje-menu-item-check-icon-display	Determines how to display the menu item check icon. The default is flex.
--wje-menu-item-check-icon-width	Sets the width of the menu item check icon. The default is 1.5rem.

Slots

Name	Description
``	Default slot for the text content of the menu item.
start	A slot for content that appears at the beginning of a menu item (e.g. an icon).
end	The content slot that appears at the end of the menu item.
submenu	A slot for a nested menu that appears as a submenu of this item.