Basic
A simple context menu with a few actions.
Icons
Icons by @ng-icons/tabler-icons
The component library does not provide icons.
Component Blueprint
Context Menu
Right-click and long-press menus with actions, groups, submenus, shortcuts, checkbox and radio items.
02 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>03 Examples
Submenu
Use submenus to nest secondary actions.
Shortcuts
Add shortcuts to show keyboard hints beside actions.
Groups
Group related actions with labels and separators.
Icons
Combine icons with labels for quick scanning.
Checkboxes
Use checkbox items for independent toggles.
Radio
Use radio items for exclusive choices.
Destructive
Use destructive variants for dangerous actions.
Custom Styling
Context menus reuse dropdown-menu tokens for visual customization.
RTL
Context menus inherit direction from the trigger tree.
05 Token Inspector
Inspect the shared dropdown-menu tokens used by context menus.
06 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: var(--frame-radius-sm);
--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;