shadcn-templ

Dropdown Menu

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

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" }
				}
			}
		}
	}
}