A right-click menu that opens at the pointer. Attach [base-context-menu-trigger] to any host, then define items inside <base-context-menu>. Also opens with Shift+F10 or the Context Menu key when the host is focused.
Right-click the surface below (or focus it and press Shift+F10).
Each row can bind its own menu. Useful for file managers, tables, and lists.
Run the following command to add this component to your project:
npx base-ui-cli add context-menu
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.
npx -y base-ui-mcp
Base UI provides standalone components. Import the exact elements you want to use into your component.
// Install: npx base-ui-cli add context-menu
// Paths are relative to aliases.components (default: src/app/components)
import { ContextMenuPanel } from './context-menu/context-menu-panel';
import { ContextMenuComponent } from './context-menu/context-menu.component';
import { ContextMenuDirective } from './context-menu/context-menu.directive';
@Component({
selector: 'app-your-component',
imports: [
ContextMenuComponent,
ContextMenuDirective
],
template: `...`
})
export class YourComponent {} API for context-menu — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
ContextMenuPanel | templateRef | Signal<TemplateRef<T>> | — | — |
ContextMenuPanel | closed | OutputEmitterRef<void> | — | — |
base-context-menu | size | string | — | Optional custom width for the context menu container. |
base-context-menu | (closed) | void | — | Emitted when the menu should close (Escape, Tab, or after an item is chosen). |
[base-context-menu-trigger] | base-context-menu-trigger | ContextMenuPanel<T> | (required) | The reference to the `base-context-menu` component to open. |
[base-context-menu-trigger] | disabled | boolean | false | When true, the native browser context menu is not suppressed and the Base UI menu will not open. |
Content