Dropdowns

1
:::details
2
::summary[This is a dropdown]
3

4
- List item 1
5
- List item 2
6
- List item 3
7
- List item 4
8
  :::

1
:::details
2
::summary[Parent Dropdown]
3
Content in parent dropdown.
4
:::details
5
::summary[Nested Dropdown]
6
Content in nested dropdown.
7
:::
8
:::

1
:::details
2
::summary[Show table data]
3

4
| Feature          | Supported | Notes             |
5
| ---------------- | --------- | ----------------- |
6
| Markdown         | ✅        | Full support      |
7
| Images           | ✅        | Local and remote  |
8
| Code blocks      | ✅        | All languages     |
9
| Nested dropdowns | ✅        | Unlimited nesting |
10

11
:::

1
:::details
2
::summary[What is a dropdown?]
3
A dropdown is a collapsible content area that can be toggled to show or hide information.
4
:::
5

6
:::details
7
::summary[How do I create nested dropdowns?]
8
You can nest dropdowns by placing one `:::details` block inside another.
9
:::
10

11
:::details
12
::summary[Can I use HTML inside dropdowns?]
13
Yes! You can use any valid Markdown or HTML content inside dropdowns.
14
:::

1
:::details
2
::summary[Show image]
3
![Dropdown Image](https://res.cloudinary.com/ankitz007/image/upload/v1755239543/samples/coffee.jpg)
4
:::

1
import {
2
  DropdownMenu,
3
  DropdownMenuTrigger,
4
  DropdownMenuContent,
5
  DropdownMenuItem,
6
} from '@/components/ui/dropdown-menu'
7
;<DropdownMenu>
8
  <DropdownMenuTrigger>
9
    <button>Open Menu</button>
10
  </DropdownMenuTrigger>
11
  <DropdownMenuContent>
12
    <DropdownMenuItem>Item 1</DropdownMenuItem>
13
    <DropdownMenuItem>Item 2</DropdownMenuItem>
14
    <DropdownMenuItem>Item 3</DropdownMenuItem>
15
  </DropdownMenuContent>
16
</DropdownMenu>

1
import {
2
  DropdownMenu,
3
  DropdownMenuTrigger,
4
  DropdownMenuContent,
5
  DropdownMenuItem,
6
  DropdownMenuGroup,
7
  DropdownMenuSeparator,
8
  DropdownMenuLabel,
9
  DropdownMenuShortcut,
10
} from '@/components/ui/dropdown-menu'
11
;<DropdownMenu>
12
  <DropdownMenuTrigger asChild>
13
    <button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
14
      Open Advanced Menu
15
    </button>
16
  </DropdownMenuTrigger>
17
  <DropdownMenuContent>
18
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
19
    <DropdownMenuSeparator />
20
    <DropdownMenuGroup>
21
      <DropdownMenuItem>
22
        Profile
23
        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
24
      </DropdownMenuItem>
25
      <DropdownMenuItem>
26
        Settings
27
        <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
28
      </DropdownMenuItem>
29
    </DropdownMenuGroup>
30
    <DropdownMenuSeparator />
31
    <DropdownMenuItem>
32
      Log out
33
      <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
34
    </DropdownMenuItem>
35
  </DropdownMenuContent>
36
</DropdownMenu>