DropdownMenu
An anchored menu with full keyboard control.
import
import { DropdownMenu, MenuItem, MenuLabel, MenuSeparator } from '@joshicodes/cock';Menu
Keyboard
- ↑ ↓
- Moves between items, wrapping at the ends
- Home / End
- First and last item
- Esc
- Closes and returns focus to the trigger
- Tab
- Closes and moves on
Behaviour
- Renders into `<body>` and positions itself against its trigger, so an `overflow: hidden` ancestor or a scrolling table cannot clip it.
- Opening with the mouse or the keyboard focuses the first item either way.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
<DropdownMenu>
Props
| Prop | Type | Default |
|---|---|---|
open bindable | boolean | false |
placement | Placement | 'bottom-start' |
offset | number | 6 |
class | string | — |
label | string | 'Menu' |
Snippets
| Snippet | Type | Default |
|---|---|---|
trigger required | Snippet<[TriggerAttrs]> | — |
children required | Snippet | — |
<MenuItem>
Props
| Prop | Type | Default |
|---|---|---|
href Render as a link instead of a button. | string | — |
disabled | boolean | false |
variant | 'default' | 'danger' | 'default' |
hint Trailing hint, e.g. a keyboard shortcut. | string | — |
class | string | — |
Snippets
| Snippet | Type | Default |
|---|---|---|
icon Leading icon slot. | Snippet | — |
children | Snippet | — |
Events
| Event | Type | Default |
|---|---|---|
onselect | () => void | — |
<MenuLabel>
Props
| Prop | Type | Default |
|---|---|---|
class | string | — |
Snippets
| Snippet | Type | Default |
|---|---|---|
children | Snippet | — |
<MenuSeparator>
Props
| Prop | Type | Default |
|---|---|---|
class | string | — |