Dropdown menu
A menu of actions (Angular Aria).
My account
Profile
Settings
Log out
import {
Menu, MenuItem, MenuTrigger,
BuiDropdownMenu, BuiDropdownMenuItem, BuiDropdownMenuLabel, BuiDropdownMenuSeparator,
} from 'ng-blatui';
<div class="relative inline-block">
<button buiButton variant="outline" ngMenuTrigger [menu]="m">Open menu</button>
<div ngMenu #m="ngMenu" buiDropdownMenu>
<div buiDropdownMenuLabel>My account</div>
<div buiDropdownMenuSeparator></div>
<div ngMenuItem value="profile" buiDropdownMenuItem>Profile</div>
<div ngMenuItem value="settings" buiDropdownMenuItem>Settings</div>
</div>
</div>With icons
Profile
Billing
Log out
<div ngMenuItem value="profile" buiDropdownMenuItem>
<svg><!-- user --></svg> Profile
</div>
<div buiDropdownMenuSeparator></div>
<div ngMenuItem value="logout" buiDropdownMenuItem><svg><!-- logout --></svg> Log out</div>Account
<div buiDropdownMenuLabel>
<div class="flex flex-col"><span class="font-medium">Sofia Carter</span><span class="text-muted-foreground text-xs">[email protected]</span></div>
</div>
<div buiDropdownMenuSeparator></div>
<div ngMenuItem value="profile" buiDropdownMenuItem>Profile</div>Checkboxes
Appearance
Status bar
Activity bar
<!-- compose a checkbox item: a signal + a conditional check indicator -->
<div ngMenuItem buiDropdownMenuItem (click)="statusBar.set(!statusBar())">
<span class="inline-flex w-4 justify-center">
@if (statusBar()) { <svg><path d="M20 6 9 17l-5-5" /></svg> }
</span>
Status bar
</div>Radio group
Panel position
top
bottom
right
<!-- radio: one signal holds the selected value -->
<div ngMenuItem [value]="pos" buiDropdownMenuItem (click)="panel.set(pos)">
<span class="inline-flex w-4 justify-center">
@if (panel() === pos) { <svg viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" /></svg> }
</span>
{{ pos }}
</div>Submenu
Profile
Invite users
Settings
<!-- a relative wrapper + group-hover flyout, styled with buiDropdownMenuItem -->
<div class="group/sub relative">
<div ngMenuItem buiDropdownMenuItem class="justify-between">Invite users <svg><!-- chevron --></svg></div>
<div class="absolute top-0 left-full ml-1 hidden ... group-hover/sub:block">
<button buiDropdownMenuItem>Email</button>
<button buiDropdownMenuItem>Message</button>
</div>
</div>