Spartans get ready! v1 is coming!

We are very close to our first stable release. Expect more announcements in the coming weeks. v1 was made possible by our partner Zerops.

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 { BrnMenuImports } from '@spartan-ng/brain/menu';

import { HlmMenuImports } from '@spartan-ng/helm/menu';

@Component({
	selector: 'spartan-context-menu-preview',
	imports: [BrnMenuImports, HlmMenuImports],
	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

Usage

import { BrnContextMenuImports } from '@spartan-ng/brain/menu';
import { HlmMenuImports } 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>

Stateful

Right click here

import { Component } from '@angular/core';
import { BrnMenuImports } from '@spartan-ng/brain/menu';
import { HlmMenuImports } from '@spartan-ng/helm/menu';

@Component({
	selector: 'spartan-context-menu-with-state',
	imports: [BrnMenuImports, HlmMenuImports],
	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 {}

Brain API

BrnContextMenuTrigger

Selector: [brnCtxMenuTriggerFor]

Inputs

Prop	Type	Default	Description
brnCtxMenuTriggerFor	TemplateRef<unknown> \| null	null	-
brnCtxMenuTriggerData	unknown	undefined	-
align	BrnMenuAlign	center	-
side	BrnMenuSide	bottom	-

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	center	-
side	BrnMenuSide	bottom	-

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	-	-

Data Table

Command