---
title: Dropdown Menu
description: Displays a menu to the user, such as a set of actions or functions, triggered by a button.
---

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"
)

templ DropdownMenuDemo() {
	@dropdownmenu.DropdownMenu() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: dropdownmenu.Trigger(ctx),
		}) {
			Open
		}
		@dropdownmenu.Content(dropdownmenu.ContentProps{Class: "w-40"}) {
			@dropdownmenu.Group() {
				@dropdownmenu.Label() {
					My Account
				}
				@dropdownmenu.Item() {
					Profile
					@dropdownmenu.Shortcut() {
						⇧⌘P
					}
				}
				@dropdownmenu.Item() {
					Billing
					@dropdownmenu.Shortcut() {
						⌘B
					}
				}
				@dropdownmenu.Item() {
					Settings
					@dropdownmenu.Shortcut() {
						⌘S
					}
				}
			}
			@dropdownmenu.Separator()
			@dropdownmenu.Group() {
				@dropdownmenu.Item() {
					Team
				}
				@dropdownmenu.Sub() {
					@dropdownmenu.SubTrigger() {
						Invite users
					}
					@dropdownmenu.SubContent() {
						@dropdownmenu.Item() {
							Email
						}
						@dropdownmenu.Item() {
							Message
						}
						@dropdownmenu.Separator()
						@dropdownmenu.Item() {
							More...
						}
					}
				}
				@dropdownmenu.Item() {
					New Team
					@dropdownmenu.Shortcut() {
						⌘+T
					}
				}
			}
			@dropdownmenu.Separator()
			@dropdownmenu.Group() {
				@dropdownmenu.Item() {
					GitHub
				}
				@dropdownmenu.Item() {
					Support
				}
				@dropdownmenu.Item(dropdownmenu.ItemProps{Disabled: true}) {
					API
				}
			}
			@dropdownmenu.Separator()
			@dropdownmenu.Group() {
				@dropdownmenu.Item() {
					Log out
					@dropdownmenu.Shortcut() {
						⇧⌘Q
					}
				}
			}
		}
	}
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add dropdown-menu
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="dropdown-menu" title="components/dropdownmenu/dropdownmenu.templ" />

<ComponentSource name="dropdown-menu" title="components/dropdownmenu/dropdownmenu.js" />

<ComponentSource name="dropdown-menu" title="components/floatingui/floating_ui_core.js" />

<ComponentSource name="dropdown-menu" title="components/floatingui/floating_ui_dom.js" />

Component scripts are loaded through the shared script bundle, see [JavaScript](/docs/installation#javascript).

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"
```

```templ showLineNumbers
@dropdownmenu.DropdownMenu() {
	@button.Button(button.Props{
		Variant:    button.VariantOutline,
		Attributes: dropdownmenu.Trigger(ctx),
	}) {
		Open
	}
	@dropdownmenu.Content() {
		@dropdownmenu.Group() {
			@dropdownmenu.Label() {
				My Account
			}
			@dropdownmenu.Item() {
				Profile
			}
			@dropdownmenu.Item() {
				Billing
			}
		}
		@dropdownmenu.Separator()
		@dropdownmenu.Group() {
			@dropdownmenu.Item() {
				Team
			}
			@dropdownmenu.Item() {
				Subscription
			}
		}
	}
}
```

## Composition

Use the following composition to build a `DropdownMenu`:

```text
dropdownmenu.DropdownMenu
├── dropdownmenu.Trigger
└── dropdownmenu.Content
    ├── dropdownmenu.Group
    │   ├── dropdownmenu.Label
    │   ├── dropdownmenu.Item
    │   └── dropdownmenu.Item
    ├── dropdownmenu.Separator
    ├── dropdownmenu.Group
    │   ├── dropdownmenu.Label
    │   ├── dropdownmenu.CheckboxItem
    │   └── dropdownmenu.CheckboxItem
    ├── dropdownmenu.Separator
    ├── dropdownmenu.Group
    │   ├── dropdownmenu.Label
    │   └── dropdownmenu.RadioGroup
    │       ├── dropdownmenu.RadioItem
    │       └── dropdownmenu.RadioItem
    └── dropdownmenu.Sub
        ├── dropdownmenu.SubTrigger
        └── dropdownmenu.SubContent
            └── dropdownmenu.Group
                ├── dropdownmenu.Label
                ├── dropdownmenu.Item
                └── dropdownmenu.Item
```

## Basic

A basic dropdown menu with labels and separators.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"
)

templ DropdownMenuBasic() {
	@dropdownmenu.DropdownMenu() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: dropdownmenu.Trigger(ctx),
		}) {
			Open
		}
		@dropdownmenu.Content() {
			@dropdownmenu.Group() {
				@dropdownmenu.Label() {
					My Account
				}
				@dropdownmenu.Item() {
					Profile
				}
				@dropdownmenu.Item() {
					Billing
				}
				@dropdownmenu.Item() {
					Settings
				}
			}
			@dropdownmenu.Separator()
			@dropdownmenu.Item() {
				GitHub
			}
			@dropdownmenu.Item() {
				Support
			}
			@dropdownmenu.Item(dropdownmenu.ItemProps{Disabled: true}) {
				API
			}
		}
	}
}
```

## Submenu

Use `dropdownmenu.Sub` to nest secondary actions.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"
)

templ DropdownMenuSubmenu() {
	@dropdownmenu.DropdownMenu() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: dropdownmenu.Trigger(ctx),
		}) {
			Open
		}
		@dropdownmenu.Content() {
			@dropdownmenu.Group() {
				@dropdownmenu.Item() {
					Team
				}
				@dropdownmenu.Sub() {
					@dropdownmenu.SubTrigger() {
						Invite users
					}
					@dropdownmenu.SubContent() {
						@dropdownmenu.Item() {
							Email
						}
						@dropdownmenu.Item() {
							Message
						}
						@dropdownmenu.Sub() {
							@dropdownmenu.SubTrigger() {
								More options
							}
							@dropdownmenu.SubContent() {
								@dropdownmenu.Item() {
									Calendly
								}
								@dropdownmenu.Item() {
									Slack
								}
								@dropdownmenu.Separator()
								@dropdownmenu.Item() {
									Webhook
								}
							}
						}
						@dropdownmenu.Separator()
						@dropdownmenu.Item() {
							Advanced...
						}
					}
				}
				@dropdownmenu.Item() {
					New Team
					@dropdownmenu.Shortcut() {
						⌘+T
					}
				}
			}
		}
	}
}
```

## Shortcuts

Add `dropdownmenu.Shortcut` to show keyboard hints.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"
)

templ DropdownMenuShortcuts() {
	@dropdownmenu.DropdownMenu() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: dropdownmenu.Trigger(ctx),
		}) {
			Open
		}
		@dropdownmenu.Content() {
			@dropdownmenu.Group() {
				@dropdownmenu.Label() {
					My Account
				}
				@dropdownmenu.Item() {
					Profile
					@dropdownmenu.Shortcut() {
						⇧⌘P
					}
				}
				@dropdownmenu.Item() {
					Billing
					@dropdownmenu.Shortcut() {
						⌘B
					}
				}
				@dropdownmenu.Item() {
					Settings
					@dropdownmenu.Shortcut() {
						⌘S
					}
				}
			}
			@dropdownmenu.Separator()
			@dropdownmenu.Item() {
				Log out
				@dropdownmenu.Shortcut() {
					⇧⌘Q
				}
			}
		}
	}
}
```

## Icons

Combine icons with labels for quick scanning.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ DropdownMenuIcons() {
	@dropdownmenu.DropdownMenu() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: dropdownmenu.Trigger(ctx),
		}) {
			Open
		}
		@dropdownmenu.Content() {
			@dropdownmenu.Item() {
				@icon.User()
				Profile
			}
			@dropdownmenu.Item() {
				@icon.CreditCard()
				Billing
			}
			@dropdownmenu.Item() {
				@icon.Settings()
				Settings
			}
			@dropdownmenu.Separator()
			@dropdownmenu.Item(dropdownmenu.ItemProps{Variant: dropdownmenu.ItemVariantDestructive}) {
				@icon.LogOut()
				Log out
			}
		}
	}
}
```

## Checkboxes

Use `dropdownmenu.CheckboxItem` for toggles.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"
)

templ DropdownMenuCheckboxes() {
	@dropdownmenu.DropdownMenu() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: dropdownmenu.Trigger(ctx),
		}) {
			Open
		}
		@dropdownmenu.Content(dropdownmenu.ContentProps{Class: "w-40"}) {
			@dropdownmenu.Group() {
				@dropdownmenu.Label() {
					Appearance
				}
				@dropdownmenu.CheckboxItem(dropdownmenu.CheckboxItemProps{Checked: true}) {
					Status Bar
				}
				@dropdownmenu.CheckboxItem(dropdownmenu.CheckboxItemProps{Disabled: true}) {
					Activity Bar
				}
				@dropdownmenu.CheckboxItem() {
					Panel
				}
			}
		}
	}
}
```

## Checkboxes Icons

Add icons to checkbox items.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ DropdownMenuCheckboxesIcons() {
	@dropdownmenu.DropdownMenu() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: dropdownmenu.Trigger(ctx),
		}) {
			Notifications
		}
		@dropdownmenu.Content(dropdownmenu.ContentProps{Class: "w-48"}) {
			@dropdownmenu.Group() {
				@dropdownmenu.Label() {
					Notification Preferences
				}
				@dropdownmenu.CheckboxItem(dropdownmenu.CheckboxItemProps{Checked: true}) {
					@icon.Mail()
					Email notifications
				}
				@dropdownmenu.CheckboxItem() {
					@icon.MessageSquare()
					SMS notifications
				}
				@dropdownmenu.CheckboxItem(dropdownmenu.CheckboxItemProps{Checked: true}) {
					@icon.Bell()
					Push notifications
				}
			}
		}
	}
}
```

## Radio Group

Use `dropdownmenu.RadioGroup` for exclusive choices.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"
)

templ DropdownMenuRadioGroupExample() {
	@dropdownmenu.DropdownMenu() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: dropdownmenu.Trigger(ctx),
		}) {
			Open
		}
		@dropdownmenu.Content(dropdownmenu.ContentProps{Class: "w-32"}) {
			@dropdownmenu.Group() {
				@dropdownmenu.Label() {
					Panel Position
				}
				@dropdownmenu.RadioGroup() {
					@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{Value: "top"}) {
						Top
					}
					@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{
						Value:   "bottom",
						Checked: true,
					}) {
						Bottom
					}
					@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{Value: "right"}) {
						Right
					}
				}
			}
		}
	}
}
```

## Radio Icons

Show radio options with icons.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ DropdownMenuRadioIcons() {
	@dropdownmenu.DropdownMenu() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: dropdownmenu.Trigger(ctx),
		}) {
			Payment Method
		}
		@dropdownmenu.Content(dropdownmenu.ContentProps{Class: "min-w-56"}) {
			@dropdownmenu.Group() {
				@dropdownmenu.Label() {
					Select Payment Method
				}
				@dropdownmenu.RadioGroup() {
					@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{
						Value:   "card",
						Checked: true,
					}) {
						@icon.CreditCard()
						Credit Card
					}
					@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{Value: "paypal"}) {
						@icon.Wallet()
						PayPal
					}
					@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{Value: "bank"}) {
						@icon.Building2()
						Bank Transfer
					}
				}
			}
		}
	}
}
```

## Destructive

Use `Variant: dropdownmenu.ItemVariantDestructive` for irreversible actions.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ DropdownMenuDestructive() {
	@dropdownmenu.DropdownMenu() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: dropdownmenu.Trigger(ctx),
		}) {
			Actions
		}
		@dropdownmenu.Content() {
			@dropdownmenu.Group() {
				@dropdownmenu.Item() {
					@icon.Pencil()
					Edit
				}
				@dropdownmenu.Item() {
					@icon.Share()
					Share
				}
			}
			@dropdownmenu.Separator()
			@dropdownmenu.Group() {
				@dropdownmenu.Item(dropdownmenu.ItemProps{Variant: dropdownmenu.ItemVariantDestructive}) {
					@icon.Trash()
					Delete
				}
			}
		}
	}
}
```

## Avatar

An account switcher dropdown triggered by an avatar.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/avatar"
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ DropdownMenuAvatar() {
	@dropdownmenu.DropdownMenu() {
		@button.Button(button.Props{
			Variant:    button.VariantGhost,
			Size:       button.SizeIcon,
			Class:      "rounded-full",
			Attributes: dropdownmenu.Trigger(ctx),
		}) {
			@avatar.Avatar() {
				@avatar.Image(avatar.ImageProps{
					Src: "https://github.com/axadrn.png",
					Alt: "axadrn",
				})
				@avatar.Fallback() {
					AA
				}
			}
		}
		@dropdownmenu.Content(dropdownmenu.ContentProps{Align: dropdownmenu.AlignEnd}) {
			@dropdownmenu.Group() {
				@dropdownmenu.Item() {
					@icon.BadgeCheck()
					Account
				}
				@dropdownmenu.Item() {
					@icon.CreditCard()
					Billing
				}
				@dropdownmenu.Item() {
					@icon.Bell()
					Notifications
				}
			}
			@dropdownmenu.Separator()
			@dropdownmenu.Item() {
				@icon.LogOut()
				Sign Out
			}
		}
	}
}
```

## Complex

A richer example combining groups, icons, and submenus.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ DropdownMenuComplex() {
	@dropdownmenu.DropdownMenu() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: dropdownmenu.Trigger(ctx),
		}) {
			Complex Menu
		}
		@dropdownmenu.Content(dropdownmenu.ContentProps{Class: "w-44"}) {
			@dropdownmenu.Group() {
				@dropdownmenu.Label() {
					File
				}
				@dropdownmenu.Item() {
					@icon.File()
					New File
					@dropdownmenu.Shortcut() {
						⌘N
					}
				}
				@dropdownmenu.Item() {
					@icon.Folder()
					New Folder
					@dropdownmenu.Shortcut() {
						⇧⌘N
					}
				}
				@dropdownmenu.Sub() {
					@dropdownmenu.SubTrigger() {
						@icon.FolderOpen()
						Open Recent
					}
					@dropdownmenu.SubContent() {
						@dropdownmenu.Group() {
							@dropdownmenu.Label() {
								Recent Projects
							}
							@dropdownmenu.Item() {
								@icon.FileCode()
								Project Alpha
							}
							@dropdownmenu.Item() {
								@icon.FileCode()
								Project Beta
							}
							@dropdownmenu.Sub() {
								@dropdownmenu.SubTrigger() {
									@icon.Ellipsis()
									More Projects
								}
								@dropdownmenu.SubContent() {
									@dropdownmenu.Item() {
										@icon.FileCode()
										Project Gamma
									}
									@dropdownmenu.Item() {
										@icon.FileCode()
										Project Delta
									}
								}
							}
						}
						@dropdownmenu.Separator()
						@dropdownmenu.Group() {
							@dropdownmenu.Item() {
								@icon.FolderSearch()
								Browse...
							}
						}
					}
				}
				@dropdownmenu.Separator()
				@dropdownmenu.Item() {
					@icon.Save()
					Save
					@dropdownmenu.Shortcut() {
						⌘S
					}
				}
				@dropdownmenu.Item() {
					@icon.Download()
					Export
					@dropdownmenu.Shortcut() {
						⇧⌘E
					}
				}
			}
			@dropdownmenu.Separator()
			@dropdownmenu.Group() {
				@dropdownmenu.Label() {
					View
				}
				@dropdownmenu.CheckboxItem(dropdownmenu.CheckboxItemProps{Checked: true}) {
					@icon.Eye()
					Show Sidebar
				}
				@dropdownmenu.CheckboxItem() {
					@icon.LayoutTemplate()
					Show Status Bar
				}
				@dropdownmenu.Sub() {
					@dropdownmenu.SubTrigger() {
						@icon.Palette()
						Theme
					}
					@dropdownmenu.SubContent() {
						@dropdownmenu.Group() {
							@dropdownmenu.Label() {
								Appearance
							}
							@dropdownmenu.RadioGroup() {
								@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{
									Value:   "light",
									Checked: true,
								}) {
									@icon.Sun()
									Light
								}
								@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{Value: "dark"}) {
									@icon.Moon()
									Dark
								}
								@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{Value: "system"}) {
									@icon.Monitor()
									System
								}
							}
						}
					}
				}
			}
			@dropdownmenu.Separator()
			@dropdownmenu.Group() {
				@dropdownmenu.Label() {
					Account
				}
				@dropdownmenu.Item() {
					@icon.User()
					Profile
					@dropdownmenu.Shortcut() {
						⇧⌘P
					}
				}
				@dropdownmenu.Item() {
					@icon.CreditCard()
					Billing
				}
				@dropdownmenu.Sub() {
					@dropdownmenu.SubTrigger() {
						@icon.Settings()
						Settings
					}
					@dropdownmenu.SubContent() {
						@dropdownmenu.Group() {
							@dropdownmenu.Label() {
								Preferences
							}
							@dropdownmenu.Item() {
								@icon.Keyboard()
								Keyboard Shortcuts
							}
							@dropdownmenu.Item() {
								@icon.Languages()
								Language
							}
							@dropdownmenu.Sub() {
								@dropdownmenu.SubTrigger() {
									@icon.Bell()
									Notifications
								}
								@dropdownmenu.SubContent() {
									@dropdownmenu.Group() {
										@dropdownmenu.Label() {
											Notification Types
										}
										@dropdownmenu.CheckboxItem(dropdownmenu.CheckboxItemProps{Checked: true}) {
											@icon.Bell()
											Push Notifications
										}
										@dropdownmenu.CheckboxItem(dropdownmenu.CheckboxItemProps{Checked: true}) {
											@icon.Mail()
											Email Notifications
										}
									}
								}
							}
						}
						@dropdownmenu.Separator()
						@dropdownmenu.Group() {
							@dropdownmenu.Item() {
								@icon.Shield()
								Privacy & Security
							}
						}
					}
				}
			}
			@dropdownmenu.Separator()
			@dropdownmenu.Group() {
				@dropdownmenu.Item() {
					@icon.CircleQuestionMark()
					Help & Support
				}
				@dropdownmenu.Item() {
					@icon.FileText()
					Documentation
				}
			}
			@dropdownmenu.Separator()
			@dropdownmenu.Group() {
				@dropdownmenu.Item(dropdownmenu.ItemProps{Variant: dropdownmenu.ItemVariantDestructive}) {
					@icon.LogOut()
					Sign Out
					@dropdownmenu.Shortcut() {
						⇧⌘Q
					}
				}
			}
		}
	}
}
```

## API Reference

### Content

The `dropdownmenu.Content` component is the menu surface, anchored to the trigger.

| Prop          | Type                                                    | Default      |
| ------------- | ------------------------------------------------------- | ------------ |
| `Side`        | `SideTop \| SideRight \| SideBottom \| SideLeft`   | `SideBottom` |
| `Align`       | `AlignStart \| AlignCenter \| AlignEnd`             | `AlignStart` |
| `SideOffset`  | `int`                                                   | `4`          |
| `AlignOffset` | `int`                                                   | `0`          |
| `Class`       | `string`                                                | -            |

### Item

The `dropdownmenu.Item` component is a selectable entry. It renders as a link when `Href` is set and closes the menu on click.

| Prop           | Type                                              | Default              |
| -------------- | ------------------------------------------------- | -------------------- |
| `Variant`      | `ItemVariantDefault \| ItemVariantDestructive` | `ItemVariantDefault` |
| `Inset`        | `bool`                                            | `false`              |
| `Disabled`     | `bool`                                            | `false`              |
| `Href`         | `string`                                          | -                    |
| `Target`       | `string`                                          | -                    |
| `DisableCloseOnClick` | `bool`                                            | `false`              |
| `Class`        | `string`                                          | -                    |

### CheckboxItem

The `dropdownmenu.CheckboxItem` component is a toggleable item with a check indicator. It keeps the menu open on click.

| Prop       | Type     | Default |
| ---------- | -------- | ------- |
| `Checked`  | `bool`   | `false` |
| `Disabled` | `bool`   | `false` |
| `Class`    | `string` | -       |

### RadioGroup

The `dropdownmenu.RadioGroup` component wraps radio items and enforces single selection among them.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### RadioItem

The `dropdownmenu.RadioItem` component is a single-select item with a dot indicator. It keeps the menu open on click.

| Prop       | Type     | Default |
| ---------- | -------- | ------- |
| `Value`    | `string` | -       |
| `Checked`  | `bool`   | `false` |
| `Disabled` | `bool`   | `false` |
| `Class`    | `string` | -       |

### SubTrigger

The `dropdownmenu.SubTrigger` component opens a nested submenu on hover. Wrap it with `dropdownmenu.SubContent` in a `dropdownmenu.Sub`.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Inset` | `bool`   | `false` |
| `Class` | `string` | -       |