Context Menu — uicraft

Default

Right-click on the dashed area to trigger the context menu. Shown statically here for preview.

html

Right click here

Back

Forward

Reload

Save As...

Print...

View Source

<div class="uc-rounded-lg uc-border uc-shadow-lg uc-p-1 uc-w-56">
  <div class="uc-rounded-sm uc-px-2 uc-py-1.5 uc-text-sm">Back</div>
  <div class="uc-rounded-sm uc-px-2 uc-py-1.5 uc-text-sm">Forward</div>
  <div class="uc-rounded-sm uc-px-2 uc-py-1.5 uc-text-sm">Reload</div>
  <hr />
  <div class="uc-rounded-sm uc-px-2 uc-py-1.5 uc-text-sm">View Source</div>
</div>

With Icons and Shortcuts

Context menu items with leading icons and right-aligned keyboard shortcuts.

html

Cut ⌘X

Copy ⌘C

Paste ⌘V

Select All ⌘A

Delete

<div class="uc-rounded-lg uc-border uc-bg-neutrals-surface uc-shadow-lg uc-p-1 uc-w-56">
  <div class="uc-rounded-sm uc-px-2 uc-py-1.5 uc-text-sm uc-flex uc-items-center uc-gap-2">
    <svg class="uc-w-4 uc-h-4">...</svg>
    <span>Cut</span>
    <span class="uc-text-xs uc-text-fg-disabled uc-ml-auto">⌘X</span>
  </div>
  <div class="uc-rounded-sm uc-px-2 uc-py-1.5 uc-text-sm uc-flex uc-items-center uc-gap-2">
    <svg class="uc-w-4 uc-h-4">...</svg>
    <span>Copy</span>
    <span class="uc-text-xs uc-text-fg-disabled uc-ml-auto">⌘C</span>
  </div>
  ...
</div>

With Submenu

A context menu with a submenu expanding to the right on the Share item.

html

Back

Forward

Reload

Share

View Source

Email

Messages

AirDrop

Notes

<div class="uc-flex uc-items-start uc-gap-0">
  <div class="uc-rounded-lg uc-border uc-bg-neutrals-surface uc-shadow-lg uc-p-1 uc-w-56">
    <div class="uc-rounded-sm uc-px-2 uc-py-1.5 uc-text-sm">Back</div>
    <div class="uc-rounded-sm uc-px-2 uc-py-1.5 uc-text-sm">Forward</div>
    <hr />
    <div class="uc-rounded-sm uc-px-2 uc-py-1.5 uc-text-sm uc-flex uc-items-center uc-justify-between">
      <span>Share</span>
      <svg class="uc-w-4 uc-h-4">...</svg>
    </div>
  </div>
  <div class="uc-rounded-lg uc-border uc-bg-neutrals-surface uc-shadow-lg uc-p-1 uc-w-48">
    <div class="uc-rounded-sm uc-px-2 uc-py-1.5 uc-text-sm">Email</div>
    <div class="uc-rounded-sm uc-px-2 uc-py-1.5 uc-text-sm">Messages</div>
    ...
  </div>
</div>

With Checkbox & Radio

Context menu with checkable items and radio group for exclusive selection.

html

Show Toolbar

Show Sidebar

Show Status Bar

Sort By

Name

Date

Size

<div class="uc-rounded-lg uc-border uc-bg-neutrals-surface uc-shadow-lg uc-p-1 uc-w-56">
  <div class="uc-rounded-sm uc-px-2 uc-py-1.5 uc-text-sm uc-flex uc-items-center uc-gap-2">
    <span class="uc-w-3.5 uc-h-3.5 uc-rounded-sm uc-border uc-bg-accents-blue uc-flex uc-items-center uc-justify-center">
      <svg class="uc-w-3 uc-h-3">...</svg>
    </span>
    Show Toolbar
  </div>
  <hr />
  <div class="uc-px-2 uc-py-1.5 uc-text-xs uc-font-semibold uc-text-fg-disabled">Sort By</div>
  <div class="uc-rounded-sm uc-px-2 uc-py-1.5 uc-text-sm uc-flex uc-items-center uc-gap-2">
    <span class="uc-w-3.5 uc-h-3.5 uc-rounded-full uc-border uc-border-accents-blue uc-flex uc-items-center uc-justify-center">
      <span class="uc-w-1.5 uc-h-1.5 uc-rounded-full uc-bg-accents-blue"></span>
    </span>
    Name
  </div>
  ...
</div>

API Reference

All CSS classes available for the Context Menu component.

Class	Type	Description
`uc-rounded-lg`	Base	Rounded corners on the menu container
`uc-border`	Base	Border around the menu panel
`uc-bg-neutrals-surface`	Base	Surface background color for the menu
`uc-shadow-lg`	Base	Elevated shadow for the floating menu
`uc-p-1`	Base	Inner padding for the menu container
`uc-rounded-sm`	Base	Subtle rounding on individual menu items
`uc-hover:bg-neutrals-subtle`	State	Hover highlight on menu items
`uc-text-accents-red`	Modifier	Destructive/danger item text color
`uc-text-fg-disabled`	Modifier	Muted text for shortcuts and group labels
`uc-bg-accents-blue`	State	Active checkbox fill color
`uc-border-accents-blue`	State	Active radio/checkbox border color

Accessibility

Keyboard and screen reader support.

Feature	Details
Role	Use role="menu" on the context menu container
Items	Menu items use role="menuitem", groups use role="group"
Keyboard	Arrow keys navigate items, Enter/Space activate, Escape closes
Trigger	Right-click area should have aria-haspopup="menu"