MenuItem
The MenuItem component represents a selectable option in UI elements like DropdownMenu, Combobox, and FilterMenu. It provides consistent styling and behavior for menu items while maintaining flexibility for different contexts.
MenuItem is designed purely for styling and relies on parent components to provide proper roles and ARIA attributes. This approach ensures the component can be adapted for various accessibility patterns and use cases.
Quick Start
- Installation
npm install @adaptavant/eds-core
- Import
import { MenuItem } from '@adaptavant/eds-core';
Usage
A basic MenuItem with text content. The component renders as a div
by default but can be customized using the as
prop to render as different elements.
Sizes
Use the size
prop to control the MenuItem size. Available options are standard
(default) and large
.
<MenuItem size="standard">
Standard Size MenuItem
</MenuItem>
<MenuItem size="large">
Large Size MenuItem
</MenuItem>
States
MenuItem supports different states: isDisabled
, isHighlighted
, and isSelected
.
The isDisabled
and isHighlighted
props control the visual appearance of the item, and all states add appropriate data attributes to the element.
<div className="p-1 rounded-12px shadow-20">
<MenuItem>
Default state
</MenuItem>
<MenuItem isHighlighted>
Highlighted state
</MenuItem>
<MenuItem isSelected className="data-[selected]:bg-positive-secondary">
Selected state with custom styles
</MenuItem>
<MenuItem isDisabled>
Disabled state
</MenuItem>
</div>
Composition
The MenuItem is based on the Track component and can be composed with other components such as Checkbox or Radio Primitives or Icons to implement selection functionality.
Use the Track component's railStart
and railEnd
props to add other components to the start or end of the MenuItem
<div className="p-1 rounded-12px shadow-20">
<MenuItem
railStart={
<AlignChildToText>
<CheckboxPrimitive />
</AlignChildToText>
}
>
Checkbox MenuItem
</MenuItem>
<MenuItem
railStart={
<AlignChildToText>
<RadioPrimitive />
</AlignChildToText>
}
>
Radio MenuItem
</MenuItem>
<MenuItem
railStart={
<AlignChildToText>
<CheckIcon size="16" />
</AlignChildToText>
}
>
Selected MenuItem
</MenuItem>
</div>
Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.
MenuItem parts
<MenuItem
railStart={
<AlignChildToText>
<CheckboxPrimitive />
</AlignChildToText>
}
railEnd={
<AlignChildToText>
<SetmoreIcon />
</AlignChildToText>
}
className="rounded shadow-md w-72"
classNames={{
center: "font-bold text-body-14 text-center",
railStart: "border border-dashed border-primary px-3 py-2 rounded",
railEnd: "bg-positive-secondary p-2 rounded"
}}
>
Style Parts
</MenuItem>