KQ-191 · POPOVER/MENU
Popover Menu
A trigger-anchored menu that unfolds from its button on a single crisp overshoot, a small arrow tracking the trigger. It flips side or alignment when the viewport runs short so it never spills off-screen, and carries full menu semantics: roving arrow keys, Home and End, Escape and outside-click to close, and focus returned to the trigger on select.
KQ-191 · POPOVER/MENU
Chose —
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/popover-menu
Props
- items
- PopoverMenuItem[]
- default —
- The menu rows — id, label, optional icon, disabled, onSelect.
- items[].children
- PopoverMenuItem[]
- default —
- One flyout level. A row with children opens on hover, click, or ArrowRight; ArrowLeft steps back, and Escape steps out before it closes the menu.
- children
- ReactNode
- default —
- Trigger label / content.
- side
- top | bottom
- default —
- Preferred side; flips when the viewport is tight.
- align
- start | end
- default —
- Preferred horizontal edge; flips on overflow.
- label
- string
- default —
- Accessible name for the menu surface.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | PopoverMenuItem[] | — | The menu rows — id, label, optional icon, disabled, onSelect. |
| items[].children | PopoverMenuItem[] | — | One flyout level. A row with children opens on hover, click, or ArrowRight; ArrowLeft steps back, and Escape steps out before it closes the menu. |
| children | ReactNode | — | Trigger label / content. |
| side | top | bottom | — | Preferred side; flips when the viewport is tight. |
| align | start | end | — | Preferred horizontal edge; flips on overflow. |
| label | string | — | Accessible name for the menu surface. |