> ## 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

> MenuItemDraggable and MenuItemSuggestion presentation presets.

export const StoryEmbed = ({storyId, title, height = 120}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" allow="clipboard-write" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" allow="clipboard-write" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

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

## MenuItemDraggable

<StoryEmbed storyId="ui-navigation-menu-menuitem-menuitemdraggable--display" title="Row with a drag grip" height={110} />

`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 the leading content (`LeftComponent`, otherwise `LeftIcon`) for the grip while the row is hovered, so it shows nothing without leading content. `isDragDisabled` affects the appearance, not external drag handlers.

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

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.

## MenuItemSuggestion

<StoryEmbed storyId="ui-components-navigation-menuitemsuggestion--display" title="Suggested company with supporting text" height={110} />

`MenuItemSuggestion` presents a suggested value with an optional icon and supporting text. Without `onClick`, keep its `li` root inside a semantic list. `selected` changes its appearance without adding selection behavior.

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

export const SuggestedName = () => (
  <Text
    render={<ul />}
    style={{ margin: 0, padding: 0, listStyle: 'none', width: '100%' }}
  >
    <MenuItemSuggestion text="Acme" contextualText="Company" />
  </Text>
);
```

Supplying `onClick` gives the row button semantics, a tab stop, and Enter/Space activation. Place clickable rows in `<ul role="none">` because their `li` roots expose `button` instead of `listitem`. For a complete selection or action workflow, prefer [Dropdown.OptionItem](/ui/components/navigation/dropdown) or [ListItemButton](/ui/components/navigation/list-item-button).

## Props

### MenuItemDraggable

<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. always and onHover render a single leading content (LeftComponent when set, otherwise LeftIcon); onHover swaps it for the grip on hover and shows no grip without leading content. 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="LeftComponent" type="ReactNode">
  Custom leading content.
</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

<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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.