1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
// @ts-nocheck
import * as mod from "./dropdown-menu"
import { Button } from "./button"
const docs = `### Overview
Dropdown menu built on Kobalte with composable items, groups, and submenus.
Use \`DropdownMenu.ItemLabel\`/\`ItemDescription\` for richer rows.
### API
- Root accepts Kobalte DropdownMenu props (\`open\`, \`defaultOpen\`, \`onOpenChange\`).
- Compose with \`Trigger\`, \`Content\`, \`Item\`, \`Separator\`, and optional \`Sub\` sections.
### Variants and states
- Supports item groups, separators, and nested submenus.
### Behavior
- Menu opens from trigger and renders in a portal by default.
### Accessibility
- TODO: confirm keyboard navigation from Kobalte.
### Theming/tokens
- Uses \`data-component="dropdown-menu"\` and slot attributes for styling.
`
export default {
title: "UI/DropdownMenu",
id: "components-dropdown-menu",
component: mod.DropdownMenu,
tags: ["autodocs"],
parameters: {
docs: {
description: {
component: docs,
},
},
},
}
export const Basic = {
render: () => (
<mod.DropdownMenu defaultOpen>
<mod.DropdownMenu.Trigger as={Button} variant="secondary" size="small">
Open menu
</mod.DropdownMenu.Trigger>
<mod.DropdownMenu.Portal>
<mod.DropdownMenu.Content>
<mod.DropdownMenu.Group>
<mod.DropdownMenu.GroupLabel>Actions</mod.DropdownMenu.GroupLabel>
<mod.DropdownMenu.Item>
<mod.DropdownMenu.ItemLabel>New file</mod.DropdownMenu.ItemLabel>
</mod.DropdownMenu.Item>
<mod.DropdownMenu.Item>
<mod.DropdownMenu.ItemLabel>Rename</mod.DropdownMenu.ItemLabel>
<mod.DropdownMenu.ItemDescription>Shift+R</mod.DropdownMenu.ItemDescription>
</mod.DropdownMenu.Item>
</mod.DropdownMenu.Group>
<mod.DropdownMenu.Separator />
<mod.DropdownMenu.Sub>
<mod.DropdownMenu.SubTrigger>More options</mod.DropdownMenu.SubTrigger>
<mod.DropdownMenu.SubContent>
<mod.DropdownMenu.Item>
<mod.DropdownMenu.ItemLabel>Duplicate</mod.DropdownMenu.ItemLabel>
</mod.DropdownMenu.Item>
<mod.DropdownMenu.Item>
<mod.DropdownMenu.ItemLabel>Move</mod.DropdownMenu.ItemLabel>
</mod.DropdownMenu.Item>
</mod.DropdownMenu.SubContent>
</mod.DropdownMenu.Sub>
</mod.DropdownMenu.Content>
</mod.DropdownMenu.Portal>
</mod.DropdownMenu>
),
}
export const CheckboxRadio = {
render: () => (
<mod.DropdownMenu defaultOpen>
<mod.DropdownMenu.Trigger as={Button} variant="secondary" size="small">
Open menu
</mod.DropdownMenu.Trigger>
<mod.DropdownMenu.Portal>
<mod.DropdownMenu.Content>
<mod.DropdownMenu.CheckboxItem checked>Show line numbers</mod.DropdownMenu.CheckboxItem>
<mod.DropdownMenu.CheckboxItem>Wrap lines</mod.DropdownMenu.CheckboxItem>
<mod.DropdownMenu.Separator />
<mod.DropdownMenu.RadioGroup value="compact">
<mod.DropdownMenu.RadioItem value="compact">Compact</mod.DropdownMenu.RadioItem>
<mod.DropdownMenu.RadioItem value="comfortable">Comfortable</mod.DropdownMenu.RadioItem>
</mod.DropdownMenu.RadioGroup>
</mod.DropdownMenu.Content>
</mod.DropdownMenu.Portal>
</mod.DropdownMenu>
),
}
|
