> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Dropdown Menu

> Contextual menu for grouped actions.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/dropdown-menu-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=00ce1675a7397ee992969d658ae613b0" alt="Dropdown Menu component preview (light)" width="180" data-path="images/ui/dropdown-menu-light.png" />
</Frame>

* **Location**: `sabo/src/components/ui/dropdown-menu.tsx`

## When to use

* Show grouped actions related to a trigger (row actions, avatar menu).
* Supports labels, separators, checkbox/radio items, and submenus.

## Usage

```tsx sabo/src/components/ui/dropdown-menu.tsx theme={null}
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";

export function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Open menu</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent sideOffset={4}>
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Billing</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem checked>Notifications</DropdownMenuCheckboxItem>
        <DropdownMenuSeparator />
        <DropdownMenuRadioGroup value="b">
          <DropdownMenuRadioItem value="a">Option A</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="b">Option B</DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
```

## Key props

<ParamField path="sideOffset" type="number" default="4">
  Space in pixels between trigger and content.
</ParamField>

<ParamField path="DropdownMenuItem.variant" type="string">
  <code>default</code> | <code>destructive</code> — styles a dangerous action.
</ParamField>

<Note>
  This component forwards all props from Radix Dropdown Menu primitives (Root/Trigger/Content/Item, etc.). Above are commonly used props. For the full API, see Radix docs: [https://www.radix-ui.com/primitives/docs/components/dropdown-menu](https://www.radix-ui.com/primitives/docs/components/dropdown-menu)
</Note>

## Styling tip

* Keep menus compact (<code>text-sm</code>). Use separators and labels to group related actions.
* For submenus, use <code>DropdownMenuSub</code> and related parts.

## Accessibility

* Trigger is a native button by default (<code>asChild</code> supported).
* Arrow keys navigate items; checked/radio items announce state.