components / 03
marked dropdown
the menu behaves normally. cheez only draws where attention changes.
shadcn
npx shadcn@latest add berkantay/cheez/marked-dropdownlive
last action: none yetplayground
use pointer, arrow keys, Home, End, Enter, Space, and Escape.
size
side
character
open mark
interaction mark
open ink
interaction ink
<MarkedDropdown>
<MarkedDropdownTrigger
size="medium"
mark="circle"
interactionMark="short-underline"
character="rushed"
markColor="#8f74ff"
interactionColor="#35d9ff"
>
view options
</MarkedDropdownTrigger>
<MarkedDropdownContent side="bottom">
<MarkedDropdownItem>duplicate</MarkedDropdownItem>
<MarkedDropdownCheckboxItem checked={showGrid}>
show grid
</MarkedDropdownCheckboxItem>
</MarkedDropdownContent>
</MarkedDropdown>trigger
quiet until intent appearsstates
menu
selection persists, navigation does notitem states
duplicate
duplicate
show gridyes
compactselected
archive
delete
reference
actions, toggles, and single selectionapi
| part | prop | type | default | purpose |
|---|---|---|---|---|
| Root | open | boolean | — | controlled menu visibility |
| Root | defaultOpen | boolean | false | initial menu visibility |
| Root | onOpenChange | function | — | visibility callback |
| Root | loopFocus | boolean | true | wrap keyboard navigation |
| Root | modal | boolean | true | contain interaction while open |
| Trigger | mark | CheezType | "circle" | persistent open mark |
| Trigger | interactionMark | CheezType | "short-underline" | hover and focus mark |
| Trigger | markColor | string | "#ff4f2e" | open mark color |
| Trigger | interactionColor | string | markColor | hover and focus color |
| Trigger | marked | boolean | undefined | controlled mark preview |
| Trigger | size | "small" | "medium" | "large" | "medium" | trigger scale |
| Content | side | "top" | "right" | "bottom" | "left" | "bottom" | preferred placement |
| Content | align | "start" | "center" | "end" | "start" | anchor alignment |
| Content | sideOffset | number | 8 | distance from trigger |
| Item | disabled | boolean | false | skip interaction |
| Item | tone | "default" | "danger" | "default" | semantic item color |
| Item | mark | CheezType | "short-underline" | highlight mark |
| CheckboxItem | checked | boolean | — | controlled toggle state |
| CheckboxItem | onCheckedChange | function | — | toggle callback |
| RadioGroup | value | any | — | controlled selected value |
| RadioItem | value | any | required | item selection value |
behavior notes
- closed triggers remain visually quiet
- hover and focus use a brief interaction mark
- open triggers keep their full enclosing mark
- highlight follows pointer and roving keyboard focus
- checkbox and radio selections keep a persistent mark
- disabled items are skipped and never animate
- Escape closes and restores focus to the trigger