# Context menu: Nested submenus

> Submenus open on hover or with the arrow keys, at any depth. A disabled submenu trigger never opens.

Example: https://hextaui.com/docs/context-menu/examples/nested
Component docs: https://hextaui.com/docs/context-menu.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/context-menu-nested.json
```

This adds `components/examples/context-menu/nested.tsx` with the Context menu component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/context-menu/nested.tsx"
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

export function ContextMenuNested() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-40 w-full max-w-sm items-center justify-center rounded-xl border border-dashed text-sm text-muted-foreground">
        Three levels deep
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>Open</ContextMenuItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger>Move to</ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>Inbox</ContextMenuItem>
            <ContextMenuSub>
              <ContextMenuSubTrigger>Projects</ContextMenuSubTrigger>
              <ContextMenuSubContent>
                <ContextMenuItem>Acme</ContextMenuItem>
                <ContextMenuSub>
                  <ContextMenuSubTrigger>Archive</ContextMenuSubTrigger>
                  <ContextMenuSubContent>
                    <ContextMenuItem>2024</ContextMenuItem>
                    <ContextMenuItem>2025</ContextMenuItem>
                  </ContextMenuSubContent>
                </ContextMenuSub>
              </ContextMenuSubContent>
            </ContextMenuSub>
            <ContextMenuSub disabled>
              <ContextMenuSubTrigger disabled>Locked</ContextMenuSubTrigger>
              <ContextMenuSubContent>
                <ContextMenuItem>Hidden</ContextMenuItem>
              </ContextMenuSubContent>
            </ContextMenuSub>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}
```

## Props in this example

### ContextMenuItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "destructive"` | `"default"` |  |

### ContextMenuSub

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `disabled` | `boolean` | `false` |  |

### ContextMenuSubTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `disabled` | `boolean` | `false` |  |

## More Context menu examples

- [File list](https://hextaui.com/docs/context-menu/examples/file-list.md)
- [Controlled](https://hextaui.com/docs/context-menu/examples/controlled.md)
- [Disabled](https://hextaui.com/docs/context-menu/examples/disabled.md)
- [Hold feedback](https://hextaui.com/docs/context-menu/examples/hold-feedback.md)
- [Long content](https://hextaui.com/docs/context-menu/examples/long-content.md)
- [Inside a sheet](https://hextaui.com/docs/context-menu/examples/in-sheet.md)
- [Render as another element](https://hextaui.com/docs/context-menu/examples/render.md)
- [Right to left](https://hextaui.com/docs/context-menu/examples/rtl.md)