Dropdown Component - Goshtoso UI Library for Go

A menu of actions or options triggered by click, hover, or right-click (context). Supports sections/dividers, item icons, keyboard navigation, button items with handlers, disabled and danger items, and an icon-only trigger.

Usage Example

@dropdown.Dropdown(dropdown.Config{
    Label: "Actions Menu",
    Sections: []dropdown.Section{
        {Items: []dropdown.Item{
            {Label: "Dashboard", Href: "#"},
            {Label: "Settings", Href: "#"},
            {Label: "Sign Out", Href: "#"},
        }},
    },
})

Hover to Open

TriggerMode: dropdown.TriggerHover opens the menu on pointer hover.

Hover to Open

@dropdown.Dropdown(dropdown.Config{
    Label:       "Actions Menu",
    TriggerMode: dropdown.TriggerHover,
    Sections:    sections,
})

With Dividers

Each dropdown.Section is separated by a divider — group related items.

With Dividers

@dropdown.Dropdown(dropdown.Config{
    Label: "Actions Menu",
    Sections: []dropdown.Section{
        {Items: []dropdown.Item{{Label: "Dashboard", Href: "#"}, {Label: "Messages", Href: "#"}}},
        {Items: []dropdown.Item{{Label: "Profile", Href: "#"}, {Label: "Settings", Href: "#"}}},
        {Items: []dropdown.Item{{Label: "Sign Out", Href: "#"}}},
    },
})

With Icons

Give each dropdown.Item an Icon component for a leading glyph.

With Icons

@dropdown.Dropdown(dropdown.Config{
    Label: "Actions Menu",
    Sections: []dropdown.Section{
        {Items: []dropdown.Item{{Label: "Dashboard", Href: "#", Icon: dashboardIcon()}}},
    },
})

TriggerMode: dropdown.TriggerContext opens on right-click. Items can carry a Shortcut hint.

Context Menu

@dropdown.Dropdown(dropdown.Config{
    TriggerMode: dropdown.TriggerContext,
    Sections: []dropdown.Section{
        {Items: []dropdown.Item{{Label: "Undo", Icon: undoIcon(), Shortcut: "Z"}}},
        {Items: []dropdown.Item{{Label: "Copy", Icon: copyIcon(), Shortcut: "C"}}},
    },
})

Action Items (onclick / disabled / danger)

Items can run OnClick handlers, be Disabled (with a Tooltip), or be styled Danger. Pair with an icon-only trigger via TriggerIcon + TriggerIconOnly.

Action Items (onclick / disabled / danger)

@dropdown.Dropdown(dropdown.Config{
    Label:           "cluster actions",
    TriggerIcon:     dotsVerticalIcon(),
    TriggerIconOnly: true,
    Sections: []dropdown.Section{
        {Items: []dropdown.Item{
            {Label: "Edit", Icon: settingsIcon(), OnClick: "editOpen = true"},
            {Label: "Archive", Disabled: true, Tooltip: "Not available"},
        }},
        {Items: []dropdown.Item{{Label: "Delete", Danger: true, OnClick: "deleteOpen = true"}}},
    },
})

API Reference

Prop	Type	Default	Description
`Label`	`string`	`""`	Trigger button text (also the aria-label for icon-only triggers).
`TriggerMode`	`TriggerMode`	`TriggerClick`	Open on: "click", "hover", or "context" (right-click).
`Sections`	`[]Section`	`nil`	Groups of Items; each section is divider-separated. Item: Label, Href/OnClick, Icon, Shortcut, Disabled, Danger, Tooltip, ID.
`TriggerIcon`	`templ.Component`	`nil`	Custom trigger icon.
`TriggerIconOnly`	`bool`	`false`	Render only the icon as the trigger (uses Label for aria-label).
`MenuAlign`	`MenuAlign`	`left`	Horizontal alignment of the menu relative to the trigger.
`ID`	`string`	`""`	Container id (scopes the menu and Alpine state).

Breadcrumbs Link