> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Menu rows

> MenuItem, MenuItemAvatar, MenuItemDraggable, and MenuItemSuggestion presentation presets.

These components provide row presentation. For complete menu semantics, keyboard navigation, and dismissal, use [Dropdown](/ui/components/dropdown) or [Menu](/ui/primitives/surfaces/menu).

## MenuItem

`MenuItem` accepts a main `text` label, leading and trailing content, supporting text, shortcut hints, and submenu indicators. `focused` and `selected` change its appearance; the application owns actual focus and selection.

```tsx theme={null}
import { MenuItem } from 'twenty-ui/components';
import { IconCopy } from 'twenty-ui/icon';

export const CopyRowPreview = () => (
  <MenuItem text="Copy record" LeftIcon={IconCopy} hotKeys={['⌘', 'C']} />
);
```

The root is a div. `onClick` alone does not provide keyboard activation or menu semantics. Native attributes and refs are not exposed by this preset. Use `Dropdown.ActionItem` for accessible commands. Shortcut hints and `hasSubMenu` are visual; they do not register handlers or create a submenu. `isTooltipOpen` is currently accepted but unused.

<ParamField body="accent" type="&#x22;danger&#x22; | &#x22;default&#x22; | &#x22;placeholder&#x22;" default="default">
  Default, danger, or placeholder row styling.
</ParamField>

<ParamField body="className" type="string">
  Class applied to the row.
</ParamField>

<ParamField body="contextualText" type="ReactNode">
  Supporting text beside the main label.
</ParamField>

<ParamField body="contextualTextPosition" type="&#x22;left&#x22; | &#x22;right&#x22;" default="left">
  Position of the supporting text.
</ParamField>

<ParamField body="disabled" type="boolean" default="false">
  Disables activation and applies disabled styling.
</ParamField>

<ParamField body="focused" type="boolean" default="false">
  Applies focused appearance without moving DOM focus.
</ParamField>

<ParamField body="hasSubMenu" type="boolean" default="false">
  Shows a submenu chevron; does not create a submenu.
</ParamField>

<ParamField body="hotKeys" type="Nullable<string[]>">
  Visible shortcut hints. Register handlers in the application.
</ParamField>

<ParamField body="iconButtons" type="ReactNode">
  Trailing action elements.
</ParamField>

<ParamField body="iconThemeColor" type="ThemeColor | null">
  Theme color for the leading icon.
</ParamField>

<ParamField body="isIconDisplayedOnHoverOnly" type="boolean" default="true">
  Reveals trailing action elements only on hover.
</ParamField>

<ParamField body="isSubMenuOpened" type="boolean" default="false">
  Applies the open treatment to the submenu chevron.
</ParamField>

<ParamField body="isTooltipOpen" type="boolean">
  Accepted for compatibility; currently has no effect.
</ParamField>

<ParamField body="LeftComponent" type="ReactNode">
  Custom leading content.
</ParamField>

<ParamField body="LeftIcon" type="IconComponent | null">
  Leading icon component.
</ParamField>

<ParamField body="onClick" type="((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)">
  Pointer activation callback. The row itself does not add keyboard or menu semantics.
</ParamField>

<ParamField body="onMouseEnter" type="((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)">
  Pointer-entry callback on the row.
</ParamField>

<ParamField body="onMouseLeave" type="((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)">
  Pointer-exit callback on the row.
</ParamField>

<ParamField body="RightComponent" type="ReactNode">
  Custom trailing content.
</ParamField>

<ParamField body="RightIcon" type="IconComponent | null">
  Trailing icon component.
</ParamField>

<ParamField body="selected" type="boolean" default="false">
  Applies selected appearance without owning selection state.
</ParamField>

<ParamField body="testId" type="string">
  Value of the row’s data-testid attribute.
</ParamField>

<ParamField body="text" type="ReactNode" required>
  Main row label.
</ParamField>

<ParamField body="withIconContainer" type="boolean" default="false">
  Places leading content in an icon container.
</ParamField>

<ParamField body="withIconContainerBackground" type="boolean" default="true">
  Adds a background to the leading icon container.
</ParamField>

## MenuItemAvatar

`MenuItemAvatar` places an [Avatar](/ui/primitives/data-display/avatar) before a text label. Its `avatar` accepts `name`, `src`, `colorSeed`, `size`, and `shape`. Omit it to render no avatar.

```tsx theme={null}
import { MenuItemAvatar } from 'twenty-ui/components';

export const PersonRowPreview = () => (
  <MenuItemAvatar
    text="Ada Lovelace"
    avatar={{ name: 'Ada Lovelace', shape: 'circle' }}
  />
);
```

It shares MenuItem's pointer and keyboard limitations. For a selectable person, compose an Avatar inside `Dropdown.OptionItem` instead.

<ParamField body="accent" type="&#x22;danger&#x22; | &#x22;default&#x22; | &#x22;placeholder&#x22;" default="default">
  Default, danger, or placeholder row styling.
</ParamField>

<ParamField body="avatar" type="Pick<AvatarProps, &#x22;size&#x22; | &#x22;name&#x22; | &#x22;shape&#x22; | &#x22;src&#x22; | &#x22;colorSeed&#x22;> | null">
  Avatar name, source, color seed, size, and shape. Omit to hide the avatar.
</ParamField>

<ParamField body="className" type="string">
  Class applied to the row.
</ParamField>

<ParamField body="contextualText" type="ReactNode">
  Supporting text beside the main label.
</ParamField>

<ParamField body="hasSubMenu" type="boolean" default="false">
  Shows a submenu chevron; does not create a submenu.
</ParamField>

<ParamField body="iconButtons" type="ReactNode">
  Trailing action elements.
</ParamField>

<ParamField body="isIconDisplayedOnHoverOnly" type="boolean" default="true">
  Reveals trailing action elements only on hover.
</ParamField>

<ParamField body="isTooltipOpen" type="boolean">
  Accepted for compatibility; currently has no effect.
</ParamField>

<ParamField body="onClick" type="((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)">
  Pointer activation callback. The row itself does not add keyboard or menu semantics.
</ParamField>

<ParamField body="onMouseEnter" type="((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)">
  Pointer-entry callback on the row.
</ParamField>

<ParamField body="onMouseLeave" type="((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)">
  Pointer-exit callback on the row.
</ParamField>

<ParamField body="testId" type="string">
  Value of the row’s data-testid attribute.
</ParamField>

<ParamField body="text" type="string" required>
  Main row label.
</ParamField>

## MenuItemDraggable

`MenuItemDraggable` renders a menu row that can show a drag grip. The application supplies drag behavior. `gripMode` defaults to `never`, which shows no grip; `always` shows the grip, and `onHover` swaps `LeftIcon` for the grip while the row is hovered, so it shows nothing without a `LeftIcon`. `isDragDisabled` affects the appearance, not external drag handlers.

```tsx theme={null}
import { MenuItemDraggable } from 'twenty-ui/components';

export const ReorderRowPreview = () => (
  <MenuItemDraggable text="Company name" gripMode="always" />
);
```

The root remains a div without keyboard drag behavior. `isTooltipOpen` and `isHoverDisabled` are currently accepted but unused. Provide an accessible reordering interface in the surrounding application.

<ParamField body="accent" type="&#x22;danger&#x22; | &#x22;default&#x22; | &#x22;placeholder&#x22;" default="default">
  Default, danger, or placeholder row styling.
</ParamField>

<ParamField body="className" type="string">
  Class applied to the row.
</ParamField>

<ParamField body="contextualText" type="ReactNode">
  Supporting text beside the main label.
</ParamField>

<ParamField body="gripMode" type="&#x22;always&#x22; | &#x22;never&#x22; | &#x22;onHover&#x22;" default="never">
  Grip visibility: never, always, or onHover. onHover swaps LeftIcon for the grip on hover and shows no grip without LeftIcon. Does not implement dragging.
</ParamField>

<ParamField body="iconButtons" type="ReactNode">
  Trailing action elements.
</ParamField>

<ParamField body="isDragDisabled" type="boolean" default="false">
  Disables drag appearance without installing or removing drag handlers.
</ParamField>

<ParamField body="isHoverDisabled" type="boolean">
  Accepted for compatibility; currently has no effect.
</ParamField>

<ParamField body="isIconDisplayedOnHoverOnly" type="boolean" default="true">
  Reveals trailing action elements only on hover.
</ParamField>

<ParamField body="isTooltipOpen" type="boolean">
  Accepted for compatibility; currently has no effect.
</ParamField>

<ParamField body="LeftIcon" type="IconComponent">
  Leading icon component.
</ParamField>

<ParamField body="onClick" type="(() => void)">
  Pointer activation callback. The row itself does not add keyboard or menu semantics.
</ParamField>

<ParamField body="text" type="ReactNode" required>
  Main row label.
</ParamField>

<ParamField body="withIconContainer" type="boolean" default="false">
  Places leading content in an icon container.
</ParamField>

## MenuItemSuggestion

`MenuItemSuggestion` renders a list item with optional icon and supporting text. Supplying `onClick` gives it button semantics, a tab stop, and Enter/Space activation. The `li` root then has the button role instead of `listitem`, so keep clickable suggestions in a `ul` with `role="none"`: the markup stays valid and assistive technology does not expect list items. `selected` applies visual styling and does not implement a listbox selection model.

```tsx theme={null}
import { MenuItemSuggestion } from 'twenty-ui/components';

export const SuggestedName = ({ onChoose }: { onChoose: () => void }) => (
  <ul role="none">
    <MenuItemSuggestion
      text="Acme"
      contextualText="Company"
      onClick={onChoose}
    />
  </ul>
);
```

<ParamField body="className" type="string">
  Class applied to the row.
</ParamField>

<ParamField body="contextualText" type="string">
  Supporting text beside the main label.
</ParamField>

<ParamField body="contextualTextPosition" type="&#x22;left&#x22; | &#x22;right&#x22;" default="left">
  Position of the supporting text.
</ParamField>

<ParamField body="LeftIcon" type="IconComponent | null">
  Leading icon component.
</ParamField>

<ParamField body="onClick" type="((event: MouseEvent<HTMLLIElement, MouseEvent>) => void)">
  Activation callback. When supplied, the row gains button semantics, a tab stop, and Enter/Space activation.
</ParamField>

<ParamField body="selected" type="boolean">
  Applies selected styling. The application owns selection.
</ParamField>

<ParamField body="text" type="string" required>
  Main row label.
</ParamField>

<ParamField body="withIconContainer" type="boolean" default="false">
  Places leading content in an icon container.
</ParamField>