Dropdown Menu

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

Loading...
import { Component } from '@angular/core';
import {
DropdownSide,
RdxDropdownMenuContentDirective,
RdxDropdownMenuItemCheckboxDirective,
RdxDropdownMenuItemDirective,
RdxDropdownMenuItemIndicatorDirective,
RdxDropdownMenuItemRadioDirective,
RdxDropdownMenuItemRadioGroupDirective,
RdxDropdownMenuSeparatorDirective,
RdxDropdownMenuTriggerDirective
} from '@radix-ng/primitives/dropdown-menu';
import { Check, Dot, LucideAngularModule, Menu } from 'lucide-angular';
@Component({
standalone: true,
selector: 'dropdown-menu-demo',
styleUrl: 'dropdown-menu-demo.css',
imports: [
RdxDropdownMenuTriggerDirective,
RdxDropdownMenuItemDirective,
RdxDropdownMenuItemCheckboxDirective,
RdxDropdownMenuItemIndicatorDirective,
RdxDropdownMenuSeparatorDirective,
RdxDropdownMenuContentDirective,
LucideAngularModule,
RdxDropdownMenuItemRadioGroupDirective,
RdxDropdownMenuItemRadioDirective
],
template: `
<button
class="IconButton"
[rdxDropdownMenuTrigger]="menu"
sideOffset="4"
alignOffset="-5"
aria-label="Customise options"
>
<lucide-angular [img]="MenuIcon" size="16" style="display: flex;" />
</button>
<ng-template #menu>
<div class="DropdownMenuContent" rdxDropdownMenuContent>
<button class="DropdownMenuItem" rdxDropdownMenuItem>
New Tab
<div class="RightSlot">⌘ T</div>
</button>
<button class="DropdownMenuItem" rdxDropdownMenuItem>
New Window
<div class="RightSlot">⌘ N</div>
</button>
<button class="DropdownMenuItem" rdxDropdownMenuItem disabled>
New Private Window
<div class="RightSlot">⇧+⌘+N</div>
</button>
<button
class="DropdownMenuItem DropdownMenuSubTrigger"
[rdxDropdownMenuTrigger]="share"
[side]="DropdownSide.Right"
rdxDropdownMenuItem
>
More Tools
<div class="RightSlot">></div>
</button>
<div class="DropdownMenuSeparator" rdxDropdownMenuSeparator></div>
<button class="DropdownMenuItem" [(checked)]="itemChecked1" rdxDropdownMenuItemCheckbox>
<div class="DropdownMenuItemIndicator" rdxDropdownMenuItemIndicator>
<lucide-icon [img]="CheckIcon" size="13" />
</div>
Show Bookmarks
<div class="RightSlot">⌘+B</div>
</button>
<button class="DropdownMenuItem" [(checked)]="itemChecked2" rdxDropdownMenuItemCheckbox>
<div class="DropdownMenuItemIndicator" rdxDropdownMenuItemIndicator>
<lucide-icon [img]="CheckIcon" size="13" />
</div>
Show Full URLs
</button>
<div class="DropdownMenuSeparator" rdxDropdownMenuSeparator></div>
<div class="DropdownMenuLabel" rdxDropdownMenuLabel>People</div>
<div [(value)]="selectedValue" (valueChange)="onValueChange($event)" rdxDropdownMenuItemRadioGroup>
<div class="DropdownMenuRadioItem" [value]="'1'" rdxDropdownMenuItemRadio>
<div class="DropdownMenuItemIndicator" rdxDropdownMenuItemIndicator>
<lucide-icon [img]="DotIcon" size="13" strokeWidth="6" />
</div>
Pedro Duarte
</div>
<div class="DropdownMenuRadioItem" [value]="'2'" rdxDropdownMenuItemRadio>
<div class="DropdownMenuItemIndicator" rdxDropdownMenuItemIndicator>
<lucide-icon [img]="DotIcon" size="13" strokeWidth="6" />
</div>
Colm Tuite
</div>
</div>
</div>
</ng-template>
<ng-template #share>
<div class="DropdownMenuSubContent" rdxDropdownMenuContent>
<button class="DropdownMenuItem" rdxDropdownMenuItem>
Save Page As...
<div class="RightSlot">⌘+S</div>
</button>
<button class="DropdownMenuItem" rdxDropdownMenuItem>Create Shortcut...</button>
<button class="DropdownMenuItem" rdxDropdownMenuItem>Name Windows...</button>
<div class="DropdownMenuSeparator" rdxDropdownMenuSeparator></div>
<button class="DropdownMenuItem" rdxDropdownMenuItem>Developer Tools</button>
</div>
</ng-template>
`
})
export class DropdownMenuDemo {
protected readonly MenuIcon = Menu;
protected readonly CheckIcon = Check;
protected readonly DotIcon = Dot;
protected readonly DropdownSide = DropdownSide;
itemChecked1 = true;
itemChecked2 = false;
selectedValue = '1';
onValueChange(value: string) {
this.selectedValue = value;
}
}

Anatomy

Import all parts and piece them together.

API Reference

Trigger

The button that toggles the dropdown menu. By default, the DropdownMenu.Content will position itself against the trigger.

Prop Type Default
align
DropdownAlign
-
alignOffset
number
-
rdxDropdownMenuTrigger
TemplateRef | null
-
side
DropdownSide
-
sideOffset
number
-
onOpenChange
-
outputFromObservable(this.opened)
Data attribute Values
[data-state]
"open" | "closed"
[data-disabled]
Present when disabled

Content

The component that pops out when the dropdown menu is open.

Prop Type Default
closeOnEscape
boolean
true
onEscapeKeyDown
function
() => undefined
highlighted
-
new Subject<RdxDropdownMenuItemDirective>()
menuTrigger
-
inject(RdxDropdownMenuTriggerDirective, { optional: true })