# Menu

A list of actions or options revealed on demand.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import { Pause, Play, SkipBack, SkipForward, Trash2 } from "@lucide/svelte";
import {
	Menu,
	MenuCheckboxItem,
	MenuGroup,
	MenuGroupLabel,
	MenuItem,
	MenuPopup,
	MenuRadioGroup,
	MenuRadioItem,
	MenuSeparator,
	MenuShortcut,
	MenuSub,
	MenuSubPopup,
	MenuSubTrigger,
	MenuTrigger,
} from "coss-svelte";
</script>

<Menu>
	<MenuTrigger>Open menu</MenuTrigger>
	<MenuPopup>
		<MenuGroup>
			<MenuGroupLabel>Playback</MenuGroupLabel>
			<MenuItem><Play aria-hidden="true" /> Play <MenuShortcut>⌘P</MenuShortcut></MenuItem>
			<MenuItem disabled>
				<Pause aria-hidden="true" /> Pause <MenuShortcut>⇧⌘P</MenuShortcut>
			</MenuItem>
			<MenuItem>
				<SkipBack aria-hidden="true" /> Previous <MenuShortcut>⌘[</MenuShortcut>
			</MenuItem>
			<MenuItem>
				<SkipForward aria-hidden="true" /> Next <MenuShortcut>⌘]</MenuShortcut>
			</MenuItem>
		</MenuGroup>
		<MenuSeparator />
		<MenuCheckboxItem>Shuffle</MenuCheckboxItem>
		<MenuCheckboxItem>Repeat</MenuCheckboxItem>
		<MenuCheckboxItem disabled>Enhanced Audio</MenuCheckboxItem>
		<MenuSeparator />
		<MenuGroup>
			<MenuGroupLabel>Sort by</MenuGroupLabel>
			<MenuRadioGroup>
				<MenuRadioItem value="artist">Artist</MenuRadioItem>
				<MenuRadioItem value="album">Album</MenuRadioItem>
				<MenuRadioItem value="title">Title</MenuRadioItem>
			</MenuRadioGroup>
		</MenuGroup>
		<MenuSeparator />
		<MenuCheckboxItem variant="switch">Auto save</MenuCheckboxItem>
		<MenuSeparator />
		<MenuSub>
			<MenuSubTrigger>Add to Playlist</MenuSubTrigger>
			<MenuSubPopup>
				<MenuItem>Jazz</MenuItem>
				<MenuSub>
					<MenuSubTrigger>Rock</MenuSubTrigger>
					<MenuSubPopup>
						<MenuItem>Hard Rock</MenuItem>
						<MenuItem>Soft Rock</MenuItem>
						<MenuItem>Classic Rock</MenuItem>
						<MenuSeparator />
						<MenuItem>Metal</MenuItem>
						<MenuItem>Punk</MenuItem>
						<MenuItem>Grunge</MenuItem>
						<MenuItem>Alternative</MenuItem>
						<MenuItem>Indie</MenuItem>
						<MenuItem>Electronic</MenuItem>
					</MenuSubPopup>
				</MenuSub>
				<MenuItem>Pop</MenuItem>
			</MenuSubPopup>
		</MenuSub>
		<MenuSeparator />
		<MenuItem variant="destructive">
			<Trash2 aria-hidden="true" /> Delete <MenuShortcut>⌘⌫</MenuShortcut>
		</MenuItem>
	</MenuPopup>
</Menu>

```

## Anatomy

- `Menu`
- `MenuCheckboxItem`
- `MenuGroup`
- `MenuGroupLabel`
- `MenuItem`
- `MenuPopup`
- `MenuRadioGroup`
- `MenuRadioItem`
- `MenuSeparator`
- `MenuShortcut`
- `MenuSub`
- `MenuSubPopup`
- `MenuSubTrigger`
- `MenuTrigger`

## API Reference

### Menu

A list of actions or options revealed on demand.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `bind:open` | `boolean` | `false` | Open state for the popup or disclosure. Bind with `bind:open`. |
| `items` | `MenuItem[]` | `[]` | Items rendered by the component's built-in fallback composition. |
| `label` | `string` | `"Menu"` | Accessible label or fallback visible label for the control. |

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Bits UI DropdownMenu.Root](https://bits-ui.com/docs/components/dropdown-menu#root).

### MenuCheckboxItem

Renders one selectable or repeated item.

**Composition and refs**

- `children: Snippet<[MenuCheckboxItemSnippetProps]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI DropdownMenu.CheckboxItem](https://bits-ui.com/docs/components/dropdown-menu#checkbox-item).

### MenuGroup

Groups related items inside the parent component.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI DropdownMenu.Group](https://bits-ui.com/docs/components/dropdown-menu#group).

### MenuGroupLabel

Labels a group of related items.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI DropdownMenu.GroupHeading](https://bits-ui.com/docs/components/dropdown-menu#group-heading).

### MenuItem

Renders one selectable or repeated item.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `string` | `"default"` | Visual variant for the component. |

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI DropdownMenu.Item](https://bits-ui.com/docs/components/dropdown-menu#item).

### MenuPopup

Renders the floating or modal surface for the parent component.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `portalProps` | `{ disabled?: boolean; to?: PortalTarget }` | `{}` | Configures the exact Bits Portal target (`to`) or renders inline when `disabled`. |

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI DropdownMenu.Content](https://bits-ui.com/docs/components/dropdown-menu#content).

### MenuRadioGroup

Groups related items inside the parent component.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI DropdownMenu.RadioGroup](https://bits-ui.com/docs/components/dropdown-menu#radio-group).

### MenuRadioItem

Renders one selectable or repeated item.

**Composition and refs**

- `children: Snippet<[MenuRadioItemSnippetProps]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI DropdownMenu.RadioItem](https://bits-ui.com/docs/components/dropdown-menu#radio-item).

### MenuSeparator

Visually separates related content.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI DropdownMenu.Separator](https://bits-ui.com/docs/components/dropdown-menu#separator).

### MenuShortcut

Displays a keyboard shortcut hint.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### MenuSub

Groups nested sidebar menu content.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `bind:open` | `boolean` | `false` | Open state for the popup or disclosure. Bind with `bind:open`. |

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Bits UI DropdownMenu.Sub](https://bits-ui.com/docs/components/dropdown-menu#sub).

### MenuSubPopup

Renders the floating or modal surface for the parent component.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI DropdownMenu.SubContent](https://bits-ui.com/docs/components/dropdown-menu#sub-content).

### MenuSubTrigger

Renders the control that opens a submenu.

**Composition and refs**

- `children: Snippet<[]>`
- `child: Snippet<[{ props: Record<string, unknown> }]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI DropdownMenu.SubTrigger](https://bits-ui.com/docs/components/dropdown-menu#sub-trigger).

### MenuTrigger

Renders the control that opens, closes, or selects related content.

**Composition and refs**

- `children: Snippet<[]>`
- `child: Snippet<[{ props: Record<string, unknown> }]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI DropdownMenu.Trigger](https://bits-ui.com/docs/components/dropdown-menu#trigger).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | compound |
| Category | Overlays & Popups |
| Particles | 9 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/menu.json` for the complete local file and dependency closure.
- Menu is stable in the current source catalog.