AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Dropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
My Account
Profile⇧⌘P
Billing⌘B
Settings⌘S
Log out⇧⌘Q
templ
templ DropdownMenuDemo() {
@ui.DropdownMenu("", nil) {
@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantOutline, ui.ButtonSizeDefault, "", ui.DropdownMenuTriggerAttrs) {
Open
}
@ui.DropdownMenuContent(ui.DropdownMenuAlignLeft, "w-56", nil) {
@ui.DropdownMenuLabel("", nil) {
My Account
}
@ui.DropdownMenuSeparator("", nil)
@ui.DropdownMenuItem("", nil) {
@icons.User(icons.Props{Class: "mr-2 h-4 w-4"})
<span>Profile</span>
@ui.DropdownMenuShortcut("", nil) {
{ "⇧⌘P" }
}
}
@ui.DropdownMenuItem("", nil) {
@icons.CreditCard(icons.Props{Class: "mr-2 h-4 w-4"})
<span>Billing</span>
@ui.DropdownMenuShortcut("", nil) {
{ "⌘B" }
}
}
@ui.DropdownMenuItem("", nil) {
@icons.Settings(icons.Props{Class: "mr-2 h-4 w-4"})
<span>Settings</span>
@ui.DropdownMenuShortcut("", nil) {
{ "⌘S" }
}
}
@ui.DropdownMenuSeparator("", nil)
@ui.DropdownMenuItem("", nil) {
@icons.LogOut(icons.Props{Class: "mr-2 h-4 w-4"})
<span>Log out</span>
@ui.DropdownMenuShortcut("", nil) {
{ "⇧⌘Q" }
}
}
}
}
}