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.

Basic usage

This example shows wje-menu-item in its most common context: inside an active wje-menu with icons, dividers, labels, and nested submenu items.

Nav variant

In the nav style, pay attention to nested items, checked state, and the combination of start, end, and submenu slots.

When to use

Use wje-menu-item when users need to understand location, move between views, or traverse hierarchy.

When not to use

Do not combine multiple competing navigation patterns for the same user flow.

Accessibility

Ensure visible active/selected states, predictable tab order, and clear control naming.

Best Practices

• Keep URL state and UI navigation state synchronized.
• Use consistent labels across menu, breadcrumbs, and tabs.
• Add context for deep structures (breadcrumbs, headings, icon cues).

Attributes and Properties

customEvent

Description	Sets the text value stored in custom-event.
Attribute	custom-event
Type	string
Default	-

Events

Name	Description
wje-menu-item:click	Emitted when the component is clicked.

Methods

No public methods available for this component.

CSS Shadow Parts

Name	Description
native	The native part of the menu item.
submenu	The submenu part of the menu item.

CSS Custom Properties

Name	Description
--wje-menu-item-color	Sets the text color of a menu item. Accepts any valid CSS color value.
--wje-menu-item-background	Defines the background color of a menu item. Default is transparent. Accepts any valid CSS color value.
--wje-menu-item-color-hover	Specifies the text color of a menu item when hovered. Accepts any valid CSS color value.
--wje-menu-item-background-hover	Sets the background color of a menu item when hovered. Accepts any valid CSS color value.
--wje-menu-item-color-focus	Defines the text color of a menu item when focused. Accepts any valid CSS color value.
--wje-menu-item-background-focus	Specifies the background color of a menu item when focused. Accepts any valid CSS color value.
--wje-menu-item-color-active	Sets the text color of a menu item when active. Accepts any valid CSS color value.
--wje-menu-item-background-active	Specifies the background color of a menu item when active. Accepts any valid CSS color value.
--wje-menu-item-padding-top	Specifies the top padding inside a menu item. Accepts any valid CSS length value (e.g., px, rem).
--wje-menu-item-padding-bottom	Specifies the bottom padding inside a menu item. Accepts any valid CSS length value (e.g., px, rem).
--wje-menu-item-line-height	Sets the line height for the text within a menu item. Accepts any valid CSS length value.
--wje-menu-submenu-offset	Determines the horizontal offset of a submenu relative to its parent. Accepts any valid CSS length value.
--wje-menu-item-icon-visibility	Controls the visibility of the icon in a menu item. Accepts visible, hidden, or collapse.
--wje-menu-item-safe-triangle-cursor-x	Specifies the x-coordinate of the cursor for the safe triangle area. Used for managing hover or focus transitions between menu items and submenus.
--wje-menu-item-safe-triangle-cursor-y	Specifies the y-coordinate of the cursor for the safe triangle area.
--wje-menu-item-safe-triangle-submenu-start-x	Defines the x-coordinate where the submenu's safe triangle starts. Helps prevent accidental submenu closing when navigating.
--wje-menu-item-safe-triangle-submenu-start-y	Defines the y-coordinate where the submenu's safe triangle starts.
--wje-menu-item-safe-triangle-submenu-end-x	Specifies the x-coordinate where the submenu's safe triangle ends.
--wje-menu-item-safe-triangle-submenu-end-y	Specifies the y-coordinate where the submenu's safe triangle ends.

Slots

Name	Description
default	The default slot for the menu item.
start	The slot for the start of the menu item.
end	The slot for the end of the menu item.
submenu	The slot for the submenu of the menu item.