Menu

The Menu component displays a dropdown menu with actions that appears when clicking on a trigger element. It provides a flexible way to create context menus, dropdowns, and action menus with support for grouping, separators, and keyboard navigation.

Demo

React

Vue

Examples

Basic menu

React

import {
  Button,
  Menu,
} from '@fintech-sandpit/ui/react';

return (
  <Menu.Root>
    <Menu.Trigger asChild>
      <Button colorScheme="primary">
        Open Menu
      </Button>
    </Menu.Trigger>

    <Menu.Content>
      <Menu.Item value="new-file">
        New File
      </Menu.Item>

      <Menu.Item value="new-folder">
        New Folder
      </Menu.Item>

      <Menu.Separator />

      <Menu.Item value="settings">
        Settings
      </Menu.Item>
    </Menu.Content>
  </Menu.Root>
);

Vue

<script setup lang="ts">
import {
  Button,
  Menu,
} from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Menu.Root>
    <Menu.Trigger as-child>
      <Button color-scheme="primary">
        Open Menu
      </Button>
    </Menu.Trigger>

    <Menu.Content>
      <Menu.Item value="new-file">
        New File
      </Menu.Item>

      <Menu.Item value="new-folder">
        New Folder
      </Menu.Item>

      <Menu.Separator />

      <Menu.Item value="settings">
        Settings
      </Menu.Item>
    </Menu.Content>
  </Menu.Root>
</template>

Menu with groups

React

import {
  Button,
  Menu,
} from '@fintech-sandpit/ui/react';

return (
  <Menu.Root>
    <Menu.Trigger asChild>
      <Button colorScheme="primary">
        Open Menu
      </Button>
    </Menu.Trigger>

    <Menu.Content>
      <Menu.ItemGroup>
        <Menu.ItemGroupLabel>
          File
        </Menu.ItemGroupLabel>

        <Menu.Item value="new-file">
          New File
        </Menu.Item>

        <Menu.Item value="open-file">
          Open File
        </Menu.Item>
      </Menu.ItemGroup>

      <Menu.Separator />

      <Menu.ItemGroup>
        <Menu.ItemGroupLabel>
          Edit
        </Menu.ItemGroupLabel>

        <Menu.Item value="cut">
          Cut
        </Menu.Item>

        <Menu.Item value="copy">
          Copy
        </Menu.Item>

        <Menu.Item value="paste">
          Paste
        </Menu.Item>
      </Menu.ItemGroup>
    </Menu.Content>
  </Menu.Root>
);

Vue

<script setup lang="ts">
import {
  Button,
  Menu,
} from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Menu.Root>
    <Menu.Trigger as-child>
      <Button color-scheme="primary">
        Open Menu
      </Button>
    </Menu.Trigger>

    <Menu.Content>
      <Menu.ItemGroup>
        <Menu.ItemGroupLabel>
          File
        </Menu.ItemGroupLabel>

        <Menu.Item value="new-file">
          New File
        </Menu.Item>

        <Menu.Item value="open-file">
          Open File
        </Menu.Item>
      </Menu.ItemGroup>

      <Menu.Separator />

      <Menu.ItemGroup>
        <Menu.ItemGroupLabel>
          Edit
        </Menu.ItemGroupLabel>

        <Menu.Item value="cut">
          Cut
        </Menu.Item>

        <Menu.Item value="copy">
          Copy
        </Menu.Item>

        <Menu.Item value="paste">
          Paste
        </Menu.Item>
      </Menu.ItemGroup>
    </Menu.Content>
  </Menu.Root>
</template>

Props

Menu.Root

React

Name	Type	Default	Description
open	boolean	—	Whether the menu is open (controlled)
defaultOpen	boolean	—	Whether the menu is open by default (uncontrolled)
lazyMount	boolean	true	Whether to lazy mount the menu content
unmountOnExit	boolean	true	Whether to unmount the menu content when it is closed
placement	Placement	bottom-start	The placement of the menu
offsetMainAxis	number	8	The offset of the menu on the main axis, px
offsetCrossAxis	number	0	The offset of the menu on the cross axis, px

Vue

Name	Type	Default	Description
model-value	boolean	—	Whether the menu is open (controlled)
default-open	boolean	—	Whether the menu is open by default (uncontrolled)
lazy-mount	boolean	true	Whether to lazy mount the menu content
unmount-on-exit	boolean	true	Whether to unmount the menu content when it is closed
placement	Placement	bottom-start	The placement of the menu
offset-main-axis	number	8	The offset of the menu on the main axis, px
offset-cross-axis	number	0	The offset of the menu on the cross axis, px

Menu.Item

React

Name	Type	Default	Description
value	string	—	The value of the menu item
valueText	string	—	The text to display for the menu item
disabled	boolean	false	Whether the menu item is disabled
closeOnSelect	boolean	true	Whether to close the menu when the menu item is selected

Vue

Name	Type	Default	Description
value	string	—	The value of the menu item
value-text	string	—	The text to display for the menu item
disabled	boolean	false	Whether the menu item is disabled
close-on-select	boolean	true	Whether to close the menu when the menu item is selected

Menu Elements

Applicable to Menu.Trigger, Menu.Content, Menu.Item, Menu.ItemGroup, and Menu.ItemGroupLabel.

React

Name	Type	Default	Description
asChild	boolean	false	When true, merges props with the child element instead of rendering a wrapper

Vue

Name	Type	Default	Description
as-child	boolean	false	When true, merges props with the child element instead of rendering a wrapper

Events

Menu.Root

React

Name	Type	Description
onOpenChange	(open: boolean) => void	Callback fired when the open state changes

Vue

Name	Payload	Description
update:model-value	boolean	Event emitted when the open state changes

Menu.Item

React

Name	Type	Description
onSelect	(value: string) => void	Callback fired when the menu item is selected

Vue

Name	Payload	Description
select	string	Event emitted when the menu item is selected

Types

type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'

Menu Elements

Menu.Root

The root component that manages the menu state and provides context to child components. Supports both controlled and uncontrolled usage.

Menu.Trigger

The element that triggers the menu when clicked. Use asChild prop to merge props with a child element.

Menu.Content

The main content container for the menu. Automatically includes positioning and portal rendering.

Menu.Item

An individual menu item. Supports click handlers and disabled state.

Menu.ItemGroup

A container for grouping related menu items together.

Menu.ItemGroupLabel

A label for a menu item group, typically displayed as a header above grouped items.

Menu.Separator

A visual separator between menu items or groups.