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.

Figma LibraryView in StorybookView in Playroom

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.

Menu Item Text
<MenuItem>
  Menu Item Text
</MenuItem>
View in Playroom

Sizes​

Use the size prop to control the MenuItem size. Available options are standard (default) and large.

Standard Size MenuItem
Large Size MenuItem
<MenuItem size="standard">
  Standard Size MenuItem
</MenuItem>

<MenuItem size="large">
  Large Size MenuItem
</MenuItem>
View in Playroom

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.

Default state
Highlighted state
Selected state with custom styles
Disabled state
<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>
View in Playroom

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

​
Checkbox MenuItem
​
Radio MenuItem
​
Selected 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>
View in Playroom

API Reference​

MenuItem

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​

​
Style 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>
View in Playroom