hansui

Appearance

Dropdown ​

Reveals a list of options when activated, allowing users to select from multiple choices.

Features ​

  • Full keyboard navigation
  • Can expand one or multiple items

Anatomy ​

  • Root: The root container for the dropdown
  • Trigger
  • Content
    • Item
    • Divider

Usage ​

To create a dropdown, you can use the New function as shown in the example at the top of this page, or alternatively, you can follow the Builder or Functional patterns. Be sure to follow the anatomy defined above.

New function

templ
@dropdown.New(id string, props ...*Props)
  • id - An unique string identifying the dropdown instance.
  • props - A pointer to the dropdown.Props struct that defines the configuration options for the dropdown (see here).
templ
@dropdown.New("demo", &dropdown.Props{CloseOnOutsideClick: true}) {
    @dropdown.Trigger("Click")
    @dropdown.Content() {
        @dropdown.Item("Profile",
            dropdown.ItemProps{
                Url:  "/profile",
                Icon: profileIcon,
            },
        )
        @dropdown.Item("GitHub",
            dropdown.ItemProps{
                Url:      "https://github.com",
                External: true,
                Icon:     globeIcon,
            },
        )
        @dropdown.Divider()
        @dropdown.Item("Button",
            dropdown.ItemProps{
                Icon:  clickIcon,
                Attrs: templ.Attributes{
                    "onclick": "alert('Hello @hans/dropdown');"
                },
            },
        )
    }
}
Builder pattern

The Builder pattern creates an instance using method chaining. The With methods, such as WithColor or WithBorderStyle, are chainable configuration functions that allow you to customize various properties of the component:

templ
@dropdown.Builder("builder").WithAbsolute(true).Render() {
    @dropdown.Trigger("Click")
    @dropdown.Content() {
        @dropdown.Item("Profile",
            dropdown.ItemProps{
                Url: "/profile",
                Icon: profileIcon,
            },
        )
        /* ... */
    }
}
Functional pattern

The Functional pattern applies configurations through individual function calls before rendering the button. Like in the Builder pattern, With methods customize the component by setting specific properties:

templ
@dropdown.Render("functional", dropdown.WithCloseOnOutsideClick(true)) {
    @dropdown.Trigger("Click")
    @dropdown.Content() {
        @dropdown.Item("Profile",
            dropdown.ItemProps{
                Url: "/profile",
                Icon: profileIcon,
            },
        )
        /* ... */
    }
}

API Reference ​

Below is a list of each struct field, along with its type, default value, and allowed values where applicable.

Variant ​

Specifies the style variant of the dropdown.

  • type: string
  • values: lifted, stacked, cyberpunk, brutalist, retro

Placement ​

Defines the placement of the dropdown relative to the trigger element.

  • type: string
  • default: bottom
  • values: top, bottom, left, right

Absolute ​

If true, positions the dropdown absolutely within its container.

  • type: bool
  • default: false

CloseOnOutsideClick ​

If true, the dropdown will close when a click is detected outside of the dropdown.

  • type: bool
  • default: true

ButtonRing ​

If true, applies a focus ring around the button that triggers the dropdown.

  • type: bool
  • default: false

NoIcon ​

If true, no icon will be displayed with the dropdown button.

  • type: bool
  • default: false

Icon ​

Optional icon configuration for the dropdown button.

  • type: *hansui.IconProps

Attrs ​

Additional HTML attributes for the accordion element. Allows you to set custom attributes such as data attributes, ARIA roles or others.

  • type: templ.Attributes

Icon ​

The icon displayed next to the dropdown item.

  • type: hansui.Icon

Url ​

The URL associated with the dropdown item.

  • type: string

External ​

If true, indicates that the URL is an external link and should be opened accordingly.

  • type: bool
  • default: false

Attrs ​

A map of additional attributes to be added to the dropdown item element.

  • type: templ.Attributes