Dropdown
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import {
lucideCircleUser,
lucideLayers,
lucideMessageSquare,
lucideCode,
lucideMail,
lucideLogOut,
lucideSmile,
lucideCog,
lucideGithub,
lucideKeyboard,
lucideUser,
lucidePlus,
lucideCirclePlus,
lucideCircleHelp,
} from '@ng-icons/lucide';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
import { BrnMenuTriggerDirective } from '@spartan-ng/ui-menu-brain';
import {
HlmMenuComponent,
HlmMenuGroupComponent,
HlmMenuItemDirective,
HlmMenuItemIconDirective,
HlmMenuItemSubIndicatorComponent,
HlmMenuLabelComponent,
HlmMenuSeparatorComponent,
HlmMenuShortcutComponent,
HlmSubMenuComponent,
} from '@spartan-ng/ui-menu-helm';
@Component({
selector: 'spartan-dropdown-preview',
standalone: true,
imports: [
BrnMenuTriggerDirective,
HlmMenuComponent,
HlmSubMenuComponent,
HlmMenuItemDirective,
HlmMenuItemSubIndicatorComponent,
HlmMenuLabelComponent,
HlmMenuShortcutComponent,
HlmMenuSeparatorComponent,
HlmMenuItemIconDirective,
HlmMenuGroupComponent,
HlmButtonDirective,
HlmIconComponent,
],
providers: [
provideIcons({
lucideUser,
lucideLayers,
lucideCog,
lucideKeyboard,
lucideCircleUser,
lucideSmile,
lucidePlus,
lucideGithub,
lucideCircleHelp,
lucideCode,
lucideLogOut,
lucideMail,
lucideMessageSquare,
lucideCirclePlus,
}),
],
template: `
<div class="flex w-full items-center justify-center pt-[20%]">
<button hlmBtn variant="outline" align="end" [brnMenuTriggerFor]="menu">Open</button>
</div>
<ng-template #menu>
<hlm-menu class="w-56">
<hlm-menu-label>My Account</hlm-menu-label>
<hlm-menu-separator />
<hlm-menu-group>
<button hlmMenuItem>
<hlm-icon name="lucideUser" hlmMenuIcon />
<span>Profile</span>
<hlm-menu-shortcut>⇧⌘P</hlm-menu-shortcut>
</button>
<button hlmMenuItem>
<hlm-icon name="lucideLayers" hlmMenuIcon />
<span>Billing</span>
<hlm-menu-shortcut>⌘B</hlm-menu-shortcut>
</button>
<button hlmMenuItem>
<hlm-icon name="lucideCog" hlmMenuIcon />
<span>Settings</span>
<hlm-menu-shortcut>⌘S</hlm-menu-shortcut>
</button>
<button hlmMenuItem>
<hlm-icon name="lucideKeyboard" hlmMenuIcon />
<span>Keyboard Shortcuts</span>
<hlm-menu-shortcut>⌘K</hlm-menu-shortcut>
</button>
</hlm-menu-group>
<hlm-menu-separator />
<hlm-menu-group>
<button hlmMenuItem>
<hlm-icon name="lucideCircleUser" hlmMenuIcon />
<span>Team</span>
<hlm-menu-shortcut>⌘B</hlm-menu-shortcut>
</button>
<button hlmMenuItem [brnMenuTriggerFor]="invite">
<hlm-icon name="lucideSmile" hlmMenuIcon />
<span>Invite Users</span>
<hlm-menu-item-sub-indicator />
</button>
<button hlmMenuItem>
<hlm-icon name="lucidePlus" hlmMenuIcon />
<span>New Team</span>
<hlm-menu-shortcut>⌘+T</hlm-menu-shortcut>
</button>
</hlm-menu-group>
<hlm-menu-separator />
<hlm-menu-group>
<button hlmMenuItem>
<hlm-icon name="lucideGithub" hlmMenuIcon />
<span>Github</span>
</button>
<button hlmMenuItem>
<hlm-icon name="lucideCircleHelp" hlmMenuIcon />
<span>Support</span>
</button>
<button hlmMenuItem disabled>
<hlm-icon name="lucideCode" hlmMenuIcon />
<span>API</span>
</button>
</hlm-menu-group>
<hlm-menu-separator />
<button hlmMenuItem>
<hlm-icon name="lucideLogOut" hlmMenuIcon />
<span>Logout</span>
<hlm-menu-shortcut>⇧⌘Q</hlm-menu-shortcut>
</button>
</hlm-menu>
</ng-template>
<ng-template #invite>
<hlm-sub-menu>
<button hlmMenuItem>
<hlm-icon name="lucideMail" hlmMenuIcon />
Email
</button>
<button hlmMenuItem>
<hlm-icon name="lucideMessageSquare" hlmMenuIcon />
Message
</button>
<hlm-menu-separator />
<button hlmMenuItem>
<hlm-icon name="lucideCirclePlus" hlmMenuIcon />
<span>More</span>
</button>
</hlm-sub-menu>
</ng-template>
`,
})
export class DropdownPreviewComponent {}
Installation
npx nx g @spartan-ng/cli:ui menu
ng g @spartan-ng/cli:ui menu
Usage
import { BrnMenuTriggerDirective } from '@spartan-ng/ui-menu-brain';
import {
HlmMenuComponent,
HlmMenuGroupComponent,
HlmMenuItemDirective,
HlmMenuItemIconDirective,
HlmMenuItemSubIndicatorComponent,
HlmMenuLabelComponent,
HlmMenuSeparatorComponent,
HlmMenuShortcutComponent,
HlmSubMenuComponent,
} from '@spartan-ng/ui-menu-helm';
<button [brnMenuTriggerFor]="menu">Open</button>
<ng-template #menu>
<hlm-menu>
<hlm-menu-label>My Account</hlm-menu-label>
<hlm-menu-separator />
<hlm-menu-group>
<button hlmMenuItem>
Profile
<hlm-menu-shortcut>⇧⌘P</hlm-menu-shortcut>
</button>
<hlm-menu-separator />
<button hlmMenuItem [brnMenuTriggerFor]="invite">
Invite Users
<hlm-menu-item-sub-indicator />
</button>
</hlm-menu-group>
</hlm-menu>
</ng-template>
Examples
Stateful
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideUndo2 } from '@ng-icons/lucide';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
import { BrnMenuTriggerDirective } from '@spartan-ng/ui-menu-brain';
import {
HlmMenuComponent,
HlmMenuGroupComponent,
HlmMenuItemCheckboxDirective,
HlmMenuItemCheckComponent,
HlmMenuItemDirective,
HlmMenuItemIconDirective,
HlmMenuItemRadioComponent,
HlmMenuItemRadioDirective,
HlmMenuItemSubIndicatorComponent,
HlmMenuLabelComponent,
HlmMenuSeparatorComponent,
HlmMenuShortcutComponent,
HlmSubMenuComponent,
} from '@spartan-ng/ui-menu-helm';
@Component({
selector: 'spartan-dropdown-with-state',
standalone: true,
imports: [
BrnMenuTriggerDirective,
HlmMenuComponent,
HlmSubMenuComponent,
HlmMenuItemDirective,
HlmMenuItemSubIndicatorComponent,
HlmMenuLabelComponent,
HlmMenuShortcutComponent,
HlmMenuSeparatorComponent,
HlmMenuItemIconDirective,
HlmMenuItemCheckComponent,
HlmMenuItemRadioComponent,
HlmMenuGroupComponent,
HlmMenuItemRadioDirective,
HlmMenuItemCheckboxDirective,
HlmButtonDirective,
HlmIconComponent,
],
providers: [provideIcons({ lucideUndo2 })],
template: `
<div class="flex w-full items-center justify-center pt-[20%]">
<button hlmBtn variant="outline" align="center" [brnMenuTriggerFor]="menu">Open</button>
</div>
<ng-template #menu>
<hlm-menu class="w-56">
<hlm-menu-group>
<hlm-menu-label>Appearance</hlm-menu-label>
<button hlmMenuItemCheckbox [checked]="isPanel" (triggered)="isPanel = !isPanel">
<hlm-menu-item-check />
<span>Panel</span>
</button>
<button hlmMenuItemCheckbox disabled [checked]="isActivityBar" (triggered)="isActivityBar = !isActivityBar">
<hlm-menu-item-check />
<span>Activity Bar</span>
</button>
<button hlmMenuItemCheckbox [checked]="isStatusBar" (triggered)="isStatusBar = !isStatusBar">
<hlm-menu-item-check />
<span>Status Bar</span>
</button>
</hlm-menu-group>
<hlm-menu-separator />
<hlm-menu-label>Panel Position</hlm-menu-label>
<hlm-menu-group>
@for (size of panelPositions; track size) {
<button hlmMenuItemRadio [checked]="size === selectedPosition" (triggered)="selectedPosition = size">
<hlm-menu-item-radio />
<span>{{ size }}</span>
</button>
}
</hlm-menu-group>
<hlm-menu-separator />
<button hlmMenuItem (triggered)="reset()">
<hlm-icon name="lucideUndo2" hlmMenuIcon />
Reset
</button>
</hlm-menu>
</ng-template>
`,
})
export class DropdownWithStatePreviewComponent {
isStatusBar = false;
isPanel = false;
isActivityBar = false;
panelPositions = ['Top', 'Bottom', 'Right', 'Left'] as const;
selectedPosition: (typeof this.panelPositions)[number] | undefined = 'Bottom';
reset() {
this.isStatusBar = false;
this.isPanel = false;
this.isActivityBar = false;
this.selectedPosition = 'Bottom';
}
}