COMPONENTS / ATOMS / al-menu-item← ALL COMPONENTS

Menu Item

<al-menu-item><ALMenuItem> REACTbeta

Reference generated from the custom elements manifest — 16 properties, 2 slots, 2 events.

PLAYGROUND9 CONTROLS

PREVIEW / al-menu-item / SOUTHLEFT

Loading preview

Menu Item

target

FLAGS

ICON SLOTS

CODE — HTML / REACT

Guidance

NOT YET AUTHORED · 20 COMPONENTS COVERED

NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.

FIGMA PARITYNOT TRACKED

NO DESIGN-SYSTEM PROJECT TRACKS THIS COMPONENT AGAINST A FIGMA FILE — IT IS EITHER OUTSIDE EVERY PROJECT’S DECLARED SCOPE, OR NOT YET SEEDED INTO ITS PROJECT’S PARITY MANIFEST.

ACCESSIBILITYAXE 4.12.1

CHECKEVIDENCEDETAILRESULT

Default stateAXEmenu-item--DefaultPASS

Advanced statesAXE17 further storiesPASS

Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED

Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED

MEASURED 2026-09-08 · 18 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA

COLOR CONTRAST0 RULES FAILING

The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.

NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 18 STORIES.

INSTALL@southleft/al-web-components/components/menu-item

import '@southleft/al-web-components/components/menu-item';
import { ALMenuItem } from '@southleft/al-react';

API — 16 PROPS16 DOCUMENTED

PROPTYPEDEFAULT

valuestringSelection value surfaced via `e.detail.value` on the bubbled `onMenuItemSelect` event. Use this to give the consumer an opaque identifier for the item (e.g. `value="edit"`) so they don't have to pattern-match on label or DOM ref. Note on labeling: the **default slot supplies the visible AND accessible name** for text items — `<al-menu-item value="edit">Edit profile</al-menu-item>` is sufficient. The `label` attribute is only required for icon-only menu items where there is no visible text. Setting both `label="Edit"` and the slot to "Edit" produces a duplicate accessible name.—

hrefstringThe optional menu link URL—

target'_blank' | '_self' | '_parent' | '_top'Target attribute for the menu link (i.e. set to _blank to open in new tab)—

linkTitlestringTitle attribute - Optional title for a11y - If a link opens a new window or performs an action, use the title attribute to provide a tooltip with additional information.—

isHeaderbooleanisHeader property - **true** Applies the header treatment to the menu item—

isExpandableHeaderbooleanLegacy compatibility property; it does not control the disclosure button.—

isExpandedbooleanisExpanded property - **true** Applies the expanded treatment to a Header item - **false** Applies the collapsed treatment to a Header item—

isSelectedbooleanSelected attribute - Changes the component's treatment to represent a selected state—

isFocusedbooleanCurrent attribute - Changes the component's treatment to represent a focused state—

isDisabledbooleanDisabled attribute - Changes the component's treatment to represent a disabled state—

isHiddenbooleanIs hidden property - Is set on child menu items based on their Header's expanded state - **true** Hide the item - **false** Show the itemfalse

groupIdstringGroup id property - Dynamically set by the Menu parent component - Used to associate menu group headers and group items—

idxnumberIndex property - Dynamically set by the Menu parent component - Used to track and set focus with keyboard navigation—

indentationnumberIndentation - Dynamically set by the menu parent component - Adds padding to a menu item to left-align its text with that of its Header0

labelstringLabel attribute - Sets the ariaLabel for A11y—

ariaControlsstringAria controls - Associates an Expandable Header's control with the items in that group - **Not rendered as an attribute.** The ids `<al-menu>` collects here belong to `<al-menu-item>` hosts in the *document*, while the expand control lives inside this component's shadow root, and an IDREF cannot cross a shadow boundary — every value was reported invalid (axe `aria-valid-attr-value`). The disclosure relationship is carried by `aria-expanded` on the control, which needs no IDREF. The property is kept because it is public API and records the grouping. - Defaults to `''`: it used to be `undefined`, and `undefined += ' id'` produced the literal id list `"undefined group-x-item-1"`.''

SLOTS2

SLOTDESCRIPTION

(default)The content to display in the menu item

beforeOptional prefix content to display in the menu item

EVENTS2

EVENTDESCRIPTIONTYPE

onMenuItemSelectFired when the item is selected. Detail: `{ value, selected, item }` — the item's value, its new selected state, and the element itself.CustomEvent

onMenuItemExpandFired when an item with a submenu expands or collapses. Detail: `{ expanded, item }`.CustomEvent

PUBLIC METHODS7

METHODDESCRIPTION

setLinkClasses()Set the appropriate classes for link 1. Add classes once the element loads 2. Add class if the menu item is a header 3. Toggle selected class based on isSelected property

setControlClasses()Set the appropriate classes for the control button 1. Add classes once the element loads 2. Toggle selected class based on isSelected property

setIndentation()Set indentation 1. Set the indentation on the menu item link to align with header items

setSelected()Set selected item 1. If the item is not disabled or already selected, set its selected state to true 2. Dispatch the custom event

toggleExpanded()Toggle the item's expanded state 1. If the item is a group header, toggle its expanded state 2. Dispatch the custom event

handleOnControlClick()Handle on click of the menu item control button - Expand the item

handleOnLinkClick()Handle on click of a menu item - Select the item on click

SOURCE — components/menu-item/menu-item.ts · Atoms/Navigation/Menu Item