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.

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

No properties available for this component.

Events

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

Methods

collapseItem

Description	Creates a tooltip for the MenuItem when it is collapsed.
Signature	(native: HTMLElement) => HTMLElement

showSubmenu

Description	Shows the submenu of the MenuItem.
Signature	() => void

hideSubmenu

Description	Hides the submenu of the MenuItem.
Signature	() => void

submenuToggle

Description	Toggles the active state of the submenu element. If the submenu is not active, it sets the "active" attribute. If the submenu is already active, it removes the "active" attribute.
Signature	(e: Event) => void

deactivateSubmenu

Description	Deactivates the submenu by removing the "active" attribute.
Signature	() => void

activateSubmenu

Description	Activates the submenu of the menu item.
Signature	() => void

getTextFromElement

Description	Extracts and returns the concatenated text content from all text nodes within the specified element.
Signature	(element: HTMLElement) => string

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.