shadcn.io is not affiliated with official shadcn/ui
Context Menu examples · Canvas
Align and Distribute Menu Context Menu for React
A canvas context menu with Align and Distribute submenus for lining up selected objects.
Right-click a canvas selection for two submenus: Align with six alignments and Distribute with horizontal and vertical spacing. Design tools group these so the top level stays short.
Preview
Installation
FAQ
How are the submenus built?
ContextMenuSub wraps a ContextMenuSubTrigger, with its icon and label, and a ContextMenuSubContent with the nested items. Hovering the trigger or pressing the right arrow opens it, and the left arrow closes it.
What do the submenus hold?
Align lists Align Left, Center, Right, Top, Middle and Bottom, each with an icon; Distribute lists Distribute Horizontally and Distribute Vertically as text.
What opens the menu?
A right-click inside the dashed area, which reads Right click here on a mouse and Long press here on a touch screen.
The area is ContextMenuTrigger; a long press on it opens the menu too.
Wrap your own row, file or canvas in the trigger instead.
How do I run an action when an item is chosen?
Pass onClick to each ContextMenuItem.
The menu closes after the action runs.
How do keyboard and touch users find these actions?
The arrow keys move through an open menu, Enter runs an item and Escape closes it. A right-click is easy to miss, so also offer the same actions from a visible button, such as a Dropdown Menu.
Related
- Transform Menu Context MenuA canvas context menu with a Rotate
- Layer Arrange Menu Context MenuA canvas context menu to bring objects
- Group and Lock Menu Context MenuA canvas context menu to group, ungroup
- Text Alignment Menu Context MenuA text context menu with an Align Text
- Layer Management Menu Context MenuA labeled Layer Options context menu to
- Archive and Compress Menu Context MenuA file context menu with a Compress