Logo

Context Menu

Right-click and long-press menus with actions, groups, submenus, shortcuts, checkbox and radio items.

Preview

Right click here Long press on touch

Usage

HTML 

<div frContextMenu>
  <div [frContextMenuTrigger]="menu">Right click here</div>

  <ng-template #menu="frContextMenuContent" frContextMenuContent>
    <div frContextMenuPanel>
      <button frContextMenuItem type="button">Profile</button>
      <button frContextMenuItem type="button">Billing</button>
      <button frContextMenuItem type="button">Team</button>
      <button frContextMenuItem type="button">Subscription</button>
    </div>
  </ng-template>
</div>

Examples

Basic

A simple context menu with a few actions.

Right click here Long press on touch

Submenu

Use submenus to nest secondary actions.

Right click here Long press on touch

Shortcuts

Add shortcuts to show keyboard hints beside actions.

Right click here Long press on touch

Groups

Group related actions with labels and separators.

Right click here Long press on touch

Icons

Combine icons with labels for quick scanning.

Right click here Long press on touch

Checkboxes

Use checkbox items for independent toggles.

Right click here Long press on touch

Radio

Use radio items for exclusive choices.

Right click here Long press on touch

Destructive

Use destructive variants for dangerous actions.

Right click here Long press on touch

Custom Styling

Context menus reuse dropdown-menu tokens for visual customization.

Right click here Long press on touch

RTL

Context menus inherit direction from the trigger tree.

انقر بزر الماوس الأيمن هنا Long press on touch

Token Inspector

Inspect the shared dropdown-menu tokens used by context menus.

File
View

Design Tokens

Context menu is built on the same menu primitives as Dropdown Menu, so it intentionally inherits the shared `--frame-dropdown-menu-*` token contract instead of defining a duplicate context-menu token namespace.

SCSS 


  --frame-dropdown-menu-panel-min-width: 13rem;
  --frame-dropdown-menu-panel-radius: var(--frame-radius-md);
  --frame-dropdown-menu-panel-bg: var(--frame-surface);
  --frame-dropdown-menu-panel-color: var(--frame-surface-foreground);
  --frame-dropdown-menu-panel-border: var(--frame-border);
  --frame-dropdown-menu-panel-shadow: var(--frame-shadow-md);
  --frame-dropdown-menu-panel-padding: 0.25rem;
  --frame-dropdown-menu-label-color: var(--frame-muted-foreground);
  --frame-dropdown-menu-label-font-size: 0.75rem;
  --frame-dropdown-menu-label-font-weight: 600;
  --frame-dropdown-menu-separator-margin: 0.25rem -0.25rem;
  --frame-dropdown-menu-separator-bg: var(--frame-border);
  --frame-dropdown-menu-item-gap: 0.5rem;
  --frame-dropdown-menu-item-height: 2rem;
  --frame-dropdown-menu-item-radius: calc(var(--frame-radius-md) - 0.125rem);
  --frame-dropdown-menu-item-padding: 0.375rem 0.5rem;
  --frame-dropdown-menu-item-font-size: 0.875rem;
  --frame-dropdown-menu-item-hover-bg: var(--frame-accent);
  --frame-dropdown-menu-item-hover-color: var(--frame-accent-foreground);
  --frame-dropdown-menu-item-disabled-opacity: 0.5;
  --frame-dropdown-menu-item-destructive-color: var(--frame-destructive);
  --frame-dropdown-menu-item-destructive-hover-bg: color-mix(in srgb, var(--frame-destructive) 12%, var(--frame-surface));
  --frame-dropdown-menu-item-destructive-hover-color: var(--frame-destructive);
  --frame-dropdown-menu-item-inset-padding: 2rem;
  --frame-dropdown-menu-shortcut-gap: 0.75rem;
  --frame-dropdown-menu-shortcut-color: var(--frame-muted-foreground);
  --frame-dropdown-menu-shortcut-font-size: 0.75rem;
  --frame-dropdown-menu-indicator-size: 1rem;
  --frame-dropdown-menu-motion-duration: 140ms;
  --frame-dropdown-menu-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --frame-dropdown-menu-motion-distance: 0.2rem;
  --frame-dropdown-menu-motion-scale: 0.98;