Context Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a right click.
Right click here
import { Component } from '@angular/core';
import { BrnContextMenuTrigger, BrnMenuTrigger } from '@spartan-ng/brain/menu';
import {
HlmMenu,
HlmMenuGroup,
HlmMenuItem,
HlmMenuItemCheck,
HlmMenuItemCheckbox,
HlmMenuItemRadio,
HlmMenuItemRadioIndicator,
HlmMenuItemSubIndicator,
HlmMenuLabel,
HlmMenuSeparator,
HlmMenuShortcut,
HlmSubMenu,
} from '@spartan-ng/helm/menu';
@Component({
selector: 'spartan-context-menu-preview',
imports: [
BrnMenuTrigger,
BrnContextMenuTrigger,
HlmMenu,
HlmSubMenu,
HlmMenuItem,
HlmMenuItemSubIndicator,
HlmMenuLabel,
HlmMenuShortcut,
HlmMenuSeparator,
HlmMenuItemCheck,
HlmMenuItemRadio,
HlmMenuGroup,
HlmMenuItemCheckbox,
HlmMenuItemRadio,
HlmMenuItemRadioIndicator,
],
template: `
<div
[brnCtxMenuTriggerFor]="menu"
class="border-border flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm"
>
Right click here
</div>
<ng-template #menu>
<hlm-menu class="w-64">
<hlm-menu-group>
<button inset hlmMenuItem>
Back
<hlm-menu-shortcut>⌘[</hlm-menu-shortcut>
</button>
<button disabled inset hlmMenuItem>
Forward
<hlm-menu-shortcut>⌘]</hlm-menu-shortcut>
</button>
<button disabled inset hlmMenuItem>
Reload
<hlm-menu-shortcut>⌘R</hlm-menu-shortcut>
</button>
<button inset hlmMenuItem [brnMenuTriggerFor]="moreTools">
More Tools
<hlm-menu-item-sub-indicator />
</button>
</hlm-menu-group>
<hlm-menu-separator />
<hlm-menu-group>
<button hlmMenuItemCheckbox checked>
<hlm-menu-item-check />
Show Booksmarks Bar
<hlm-menu-shortcut>⌘⇧B</hlm-menu-shortcut>
</button>
<button hlmMenuItemCheckbox>
<hlm-menu-item-check />
Show full URLs
</button>
</hlm-menu-group>
<hlm-menu-separator />
<hlm-menu-label inset>People</hlm-menu-label>
<hlm-menu-separator />
<hlm-menu-group>
<button hlmMenuItemRadio checked>
<hlm-menu-item-radio />
Pedro Duarte
</button>
<button hlmMenuItemRadio>
<hlm-menu-item-radio />
Colm Tuite
</button>
</hlm-menu-group>
</hlm-menu>
</ng-template>
<ng-template #moreTools>
<hlm-sub-menu class="w-48">
<button hlmMenuItem>
Save Page as...
<hlm-menu-shortcut>⇧⌘S</hlm-menu-shortcut>
</button>
<button hlmMenuItem>Create Shortcut...</button>
<button hlmMenuItem>Name Window...</button>
<hlm-menu-separator />
<button hlmMenuItem>Developer Tools</button>
</hlm-sub-menu>
</ng-template>
`,
})
export class ContextMenuPreview {}Installation
npx nx g @spartan-ng/cli:ui contextmenu
ng @spartan-ng/cli:ui contextmenu
Usage
import { BrnContextMenuTriggerDirective, BrnMenuTriggerDirective } from '@spartan-ng/brain/menu';
import {
HlmMenu
HlmMenuGroup
HlmMenuItemCheck
HlmMenuItemCheckbox
HlmMenuItem
HlmMenuItemIcon
HlmMenuItemRadio
HlmMenuItemRadio
HlmMenuItemSubIndicator
HlmMenuLabel
HlmMenuSeparator
HlmMenuShortcut
HlmSubMenu
} from '@spartan-ng/helm/menu';<div [brnCtxMenuTriggerFor]="menu">Right click here</div>
<ng-template #menu>
<hlm-menu class="w-64">
<hlm-menu-group>
<button inset hlmMenuItem>
Save
<hlm-menu-shortcut>⌘S</hlm-menu-shortcut>
</button>
</hlm-menu-group>
</hlm-menu>
</ng-template>Brain API
BrnContextMenuTrigger
Selector: [brnCtxMenuTriggerFor]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| brnCtxMenuTriggerFor | TemplateRef<unknown> | null | null | - |
| brnCtxMenuTriggerData | unknown | undefined | - |
| align | BrnMenuAlign | undefined | - |
BrnMenuBar
Selector: [brnMenuBar]
BrnMenuGroup
Selector: [brnMenuGroup]
BrnMenuItemCheckbox
Selector: [brnMenuItemCheckbox]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | unknown | this._cdkMenuItem.checked | - |
| disabled | unknown | this._cdkMenuItem.disabled | - |
BrnMenuItemRadio
Selector: [brnMenuItemRadio]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | unknown | this._cdkMenuItem.checked | - |
| disabled | unknown | this._cdkMenuItem.disabled | - |
BrnMenuItem
Selector: [brnMenuItem]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| disabled | unknown | this._cdkMenuItem.disabled | - |
BrnMenuTrigger
Selector: [brnMenuTriggerFor]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| align | BrnMenuAlign | undefined | - |
BrnMenu
Selector: [brnMenu],[brnSubMenu]
Helm API
HlmMenuBarItem
Selector: [hlmMenuBarItem]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmMenuBar
Selector: hlm-menu-bar
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmMenuGroup
Selector: hlm-menu-group
HlmMenuItemCheck
Selector: hlm-menu-item-check
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmMenuItemCheckbox
Selector: [hlmMenuItemCheckbox]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmMenuItemIcon
Selector: [hlmMenuIcon]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmMenuItemRadioIndicator
Selector: hlm-menu-item-radio
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmMenuItemRadio
Selector: [hlmMenuItemRadio]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmMenuItemSubIndicator
Selector: hlm-menu-item-sub-indicator
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmMenuItem
Selector: [hlmMenuItem]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'destructive' | default | - |
| inset | boolean | false | - |
| class | ClassValue | - | - |
HlmMenuLabel
Selector: hlm-menu-label
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| inset | boolean | false | - |
| class | ClassValue | - | - |
HlmMenuSeparator
Selector: hlm-menu-separator
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmMenuShortcut
Selector: hlm-menu-shortcut
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmMenu
Selector: hlm-menu
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
| variant | MenuVariants['variant'] | default | - |
HlmSubMenu
Selector: hlm-sub-menu
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
Stateful
Right click here
import { Component } from '@angular/core';
import { BrnContextMenuTrigger } from '@spartan-ng/brain/menu';
import { HlmMenu, HlmMenuGroup, HlmMenuItem, HlmMenuShortcut } from '@spartan-ng/helm/menu';
@Component({
selector: 'spartan-context-menu-with-state',
imports: [BrnContextMenuTrigger, HlmMenu, HlmMenuItem, HlmMenuShortcut, HlmMenuGroup],
template: `
<div
[brnCtxMenuTriggerData]="{ $implicit: { data: 'SomeValue' } }"
[brnCtxMenuTriggerFor]="menu"
class="border-border flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm"
>
Right click here
</div>
<ng-template #menu let-ctx>
<hlm-menu class="w-64">
<hlm-menu-group>
<button inset hlmMenuItem>
{{ ctx.data }}
<hlm-menu-shortcut>⌘S</hlm-menu-shortcut>
</button>
</hlm-menu-group>
<button inset hlmMenuItem>
Back
<hlm-menu-shortcut>⌘[</hlm-menu-shortcut>
</button>
<button disabled inset hlmMenuItem>
Forward
<hlm-menu-shortcut>⌘]</hlm-menu-shortcut>
</button>
<button disabled inset hlmMenuItem>
Reload
<hlm-menu-shortcut>⌘R</hlm-menu-shortcut>
</button>
</hlm-menu>
</ng-template>
`,
})
export class ContextMenuPreviewWithState {}