Dropdown

Floating menu for displaying a list of actions or options. Uses Popover for the popup.

Source Tailwind CSS JavaScript

package showcase

import (
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/dropdown"
	"github.com/templui/templui/internal/components/icon"
)

templ DropdownDefault() {
	@dropdown.Dropdown() {
		@dropdown.Trigger() {
			@button.Button(button.Props{
				Variant: button.VariantOutline,
			}) {
				Open
			}
		}
		@dropdown.Content(dropdown.ContentProps{
			Class: "w-56",
		}) {
			@dropdown.Label() {
				My Account
			}
			@dropdown.Separator()
			@dropdown.Group() {
				@dropdown.Item() {
					Team
				}
				@dropdown.Sub() {
					@dropdown.SubTrigger() {
						<span class="flex items-center">
							@icon.Users(icon.Props{Size: 16, Class: "mr-2"})
							Invite users
						</span>
					}
					@dropdown.SubContent() {
						@dropdown.Item() {
							<span class="flex items-center">
								@icon.Mail(icon.Props{Size: 16, Class: "mr-2"})
								Email
							</span>
						}
						@dropdown.Item() {
							<span class="flex items-center">
								@icon.MessageSquare(icon.Props{Size: 16, Class: "mr-2"})
								Message
							</span>
						}
						@dropdown.Separator()
						@dropdown.Item() {
							More...
						}
					}
				}
				@dropdown.Item() {
					New Team
					@dropdown.Shortcut() {
						⌘+T
					}
				}
			}
			@dropdown.Separator()
			@dropdown.Item(dropdown.ItemProps{
				Href:   "https://github.com",
				Target: "_blank",
			}) {
				<span class="flex items-center">
					@icon.Github(icon.Props{Size: 16, Class: "mr-2"})
					GitHub
				</span>
			}
			@dropdown.Item() {
				<span class="flex items-center">
					@icon.LifeBuoy(icon.Props{Size: 16, Class: "mr-2"})
					Support
				</span>
			}
			@dropdown.Item(dropdown.ItemProps{
				Disabled: true,
			}) {
				<span class="flex items-center">
					@icon.Code(icon.Props{Size: 16, Class: "mr-2"})
					API
				</span>
			}
			@dropdown.Separator()
			@dropdown.Item() {
				<span class="flex items-center">
					@icon.LogOut(icon.Props{Size: 16, Class: "mr-2"})
					Log out
				</span>
				@dropdown.Shortcut() {
					⇧⌘Q
				}
			}
		}
	}
}

Installation

Install the component
```
templui add dropdown
```
Add the JavaScript to your layout
```
@dropdown.Script()
@popover.Script()
```
Call this template in your base layout file (e.g., in the <head> section).

API Reference

Required parameter

Hover for description

Name	Type	Default
`ID` Unique identifier for the dropdown (used internally for context)	`string`	`randomID`

Trigger

Name	Type	Default
`ID` Unique identifier for the trigger element	`string`	`""`
`Class` Additional CSS classes to apply to the trigger	`string`	`""`
`Attributes` Additional HTML attributes to apply to the trigger	`templ.Attributes`	`nil`

Content

Name	Type	Default
`ID` Unique identifier for the content element	`string`	`""`
`Class` Additional CSS classes to apply to the content	`string`	`""`
`Attributes` Additional HTML attributes to apply to the content	`templ.Attributes`	`nil`
`Placement` Position of the dropdown relative to trigger (e.g., PlacementBottomEnd, PlacementTopStart)	`dropdown.Placement`	`PlacementBottomStart`

Group

Name	Type	Default
`ID` Unique identifier for the group element	`string`	`""`
`Class` Additional CSS classes to apply to the group	`string`	`""`
`Attributes` Additional HTML attributes to apply to the group	`templ.Attributes`	`nil`

Label

Name	Type	Default
`ID` Unique identifier for the label element	`string`	`""`
`Class` Additional CSS classes to apply to the label	`string`	`""`
`Attributes` Additional HTML attributes to apply to the label	`templ.Attributes`	`nil`

Item

Name	Type	Default
`ID` Unique identifier for the item element	`string`	`randomID`
`Class` Additional CSS classes to apply to the item	`string`	`""`
`Attributes` Additional HTML attributes to apply to the item	`templ.Attributes`	`nil`
`Disabled` Whether the item is disabled	`bool`	`false`
`Href` URL to navigate to when item is clicked (renders as anchor)	`string`	`""`
`Target` Target attribute for anchor items	`string`	`""`
`PreventClose` Whether to prevent dropdown from closing when item is clicked	`bool`	`false`

Separator

Name	Type	Default
`ID` Unique identifier for the separator element	`string`	`""`
`Class` Additional CSS classes to apply to the separator	`string`	`""`
`Attributes` Additional HTML attributes to apply to the separator	`templ.Attributes`	`nil`

Shortcut

Name	Type	Default
`ID` Unique identifier for the shortcut element	`string`	`""`
`Class` Additional CSS classes to apply to the shortcut	`string`	`""`
`Attributes` Additional HTML attributes to apply to the shortcut	`templ.Attributes`	`nil`

Sub

Name	Type	Default
`ID` Unique identifier for the submenu container	`string`	`randomID`
`Class` Additional CSS classes to apply to the submenu container	`string`	`""`
`Attributes` Additional HTML attributes to apply to the submenu container	`templ.Attributes`	`nil`

SubTrigger

Name	Type	Default
`ID` Unique identifier for the submenu trigger	`string`	`""`
`Class` Additional CSS classes to apply to the submenu trigger	`string`	`""`
`Attributes` Additional HTML attributes to apply to the submenu trigger	`templ.Attributes`	`nil`

SubContent

Name	Type	Default
`ID` Unique identifier for the submenu content	`string`	`""`
`Class` Additional CSS classes to apply to the submenu content	`string`	`""`
`Attributes` Additional HTML attributes to apply to the submenu content	`templ.Attributes`	`nil`

Menu

Getting Started

Components

Dropdown

Installation

API Reference

Trigger

Content

Group

Label

Item

Separator

Shortcut

Sub

SubTrigger

SubContent