Dropdown

View Original

A dropdown menu displays a list of actions or options that a user can choose from. Supports click, hover, and context menu triggers with keyboard navigation.

Goshtoso Component

Go + Templ

Click to Open

Hover to Open

With Dividers

With Icons

Context Menu

Actions Menu (button items: onclick / disabled / danger / icon-only trigger)

Usage Example

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

// Hover Dropdown
@dropdown.Dropdown(dropdown.Config{
    Label:       "Actions Menu",
    TriggerMode: dropdown.TriggerHover,
    Sections:    []dropdown.Section{...},
})

// Dropdown 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: "#"},
        }},
    },
})

// 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: "Cut", Icon: cutIcon(), Shortcut: "X"},
            {Label: "Copy", Icon: copyIcon(), Shortcut: "C"},
            {Label: "Paste", Icon: pasteIcon(), Shortcut: "V"},
        }},
    },
})

Combobox (new) File Input