Dropdown Menu

Displays a menu to the user—such as a set of actions or functions—triggered by a button.

Default

A full-featured dropdown menu with groups, icons, shortcuts, and sub-menus.

Checkboxes

Dropdown menu items that can be toggled on or off using checkboxes.

Radio Group

A set of dropdown menu items where only one can be selected at a time.

API Reference

Brain API (Angular CDK Menu)

The dropdown menu is powered by the Angular CDK Menu, providing robust accessibility and functional logic.

DirectiveSelectorInputs / Outputs
CdkMenu[cdkMenu]
  • closed: EventEmitter<void>
CdkMenuTrigger[cdkMenuTriggerFor]
  • cdkMenuTriggerFor: template
  • cdkMenuOpened: EventEmitter<void>
  • cdkMenuClosed: EventEmitter<void>
CdkMenuItem[cdkMenuItem]
  • cdkMenuItemDisabled: boolean
  • cdkMenuItemTriggered: EventEmitter<void>

Helm API (Styling)

Helm directives and components apply spartan/ui styling to the CDK Menu elements.

Component / DirectiveSelectorInputs / Outputs
HlmDropdownMenuhlm-dropdown-menu, [hlmDropdownMenu]
  • sideOffset: number (Default: 1)
HlmDropdownMenuTrigger[hlmDropdownMenuTrigger]
  • align: MenuAlign
  • side: MenuSide
  • hlmDropdownMenuOpened: EventEmitter<void>
  • hlmDropdownMenuClosed: EventEmitter<void>
HlmDropdownMenuGroup[hlmDropdownMenuGroup], hlm-dropdown-menu-groupContainer to group related menu items.
HlmDropdownMenuItem[hlmDropdownMenuItem]
  • disabled: boolean (Default: false)
  • variant: 'default' | 'destructive' (Default: 'default')
  • inset: boolean (Default: false)
  • triggered: EventEmitter<void>
HlmDropdownMenuItemSubIndicatorhlm-dropdown-menu-item-sub-indicatorVisual indicator for sub-menus.
HlmDropdownMenuLabel[hlmDropdownMenuLabel], hlm-dropdown-menu-label
  • inset: boolean (Default: false)
HlmDropdownMenuSeparator [hlmDropdownMenuSeparator], hlm-dropdown-menu-separator Horizontal line separating menu groups.
HlmDropdownMenuShortcut [hlmDropdownMenuShortcut], hlm-dropdown-menu-shortcut Styles keyboard shortcut indicators.
HlmDropdownMenuCheckbox[hlmDropdownMenuCheckbox]
  • checked: boolean
  • disabled: boolean
  • triggered: EventEmitter<void>
HlmDropdownMenuCheckboxIndicatorhlm-dropdown-menu-checkbox-indicatorVisual indicator for checkbox menu items.
HlmDropdownMenuRadio[hlmDropdownMenuRadio]
  • checked: boolean
  • disabled: boolean
  • triggered: EventEmitter<void>
HlmDropdownMenuRadioIndicatorhlm-dropdown-menu-radio-indicatorVisual indicator for radio menu items.
HlmDropdownMenuSub[hlmDropdownMenuSub], hlm-dropdown-menu-subA container for nested menu items.

Installation & Usage

Installation

Imports

Basic Skeleton