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

PlacementTopTop StartTop EndBottomBottom StartBottom EndLeftLeft StartLeft EndRightRight StartRight End

Main Axis

Cross Axis

JD

Vue

PlacementTopTop StartTop EndBottomBottom StartBottom EndLeftLeft StartLeft EndRightRight StartRight End

Main Axis

Cross Axis

JD

Usage

Basic Menu

React

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

function MyComponent() {
  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';

function MyComponent() {
  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 Props

React

Name	Type	Required	Default	Description
open	boolean			Whether the menu is open (controlled)
defaultOpen	boolean		false	Whether the menu is open by default (uncontrolled)
positioning	PositioningOptions			Positioning options for the menu. See PositioningOptions type below.
closeOnInteractOutside	boolean		true	Whether to close on outside interaction
closeOnEscape	boolean		true	Whether to close on Escape key

Vue

Name	Type	Required	Default	Description
open	boolean			Whether the menu is open (controlled)
default-open	boolean		false	Whether the menu is open by default (uncontrolled)
positioning	PositioningOptions			Positioning options for the menu. See PositioningOptions type below.
close-on-interact-outside	boolean		true	Whether to close on outside interaction
close-on-escape	boolean		true	Whether to close on Escape key

Menu Trigger Props

React

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

Vue

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

Events

React

Name	Arguments	Description
onOpenChange	(details: { open: boolean }) => void	Callback fired when open state changes

Vue

Name	Arguments	Description
@open-change	(details: { open: boolean }) => void	Callback fired when open state changes

Types

type PositioningOptions = {
  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
  gutter?: number
  offset?: { mainAxis?: number; crossAxis?: number }
}

Components

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.