Dropdown

Dropdown

The b.Dropdown constructor creates a dropdown menu.

Modifier	Action
`b.Active`	Open the menu
`b.Clickable`	Make the menu open when the button is clicked (javascript is automatically added)
`b.Hoverable`	Make the menu open when the cursor hovers the button
`b.Up`	Make the dropdown open to the top

Child	Action
`b.OnDropdown(...any)`	Apply children to the `<div class="dropdown">` element
`b.OnTrigger(...any)`	Apply children to the `<div class="dropdown-trigger">` element
`b.OnMenu(...any)`	Apply children to the `<div class="dropdown-menu">` element
`b.OnContent(...any)`	Apply children to the `<div class="dropdown-content">` element
`b.DropdownButton(...any)`	Make this button (part of) the trigger
`b.DropdownDivider(...any)`	Apply divider to the `<div class="dropdown-content">` element
`b.DropdownItem(...any)`	Apply item to the `<div class="dropdown-content">` element
`b.DropdownAHref(...any)`	Apply link item to the `<div class="dropdown-content">` element
`b.ID`	Set the ID of the `<div class="dropdown-menu">` element
`e.Class`	Apply class to the `<div class="dropdown">` element
`string`	Create a dropdown button with this label
`e.Element`	Wrap child with the `b.DropdownItem` constructor and add it to the `<div class="dropdown-content">` element
`gomponents.Node`of type `gomponents.AttributeType`	Apply child to the `<div class="dropdown">` element
`gomponents.Node`of type `gomponents.ElementType`	Wrap child with the `b.DropdownItem` constructor and add it to the `<div class="dropdown-content">` element
Anything else	Apply child to the `<div class="dropdown">` element

The b.DropdownButton constructor creates a button to be used as a dropdown trigger. It automatically adds a Font Awesome icon to the right if no icon is provided.

The b.DropdownItem constructor creates a dropdown item.

The b.DropdownAHref constructor creates a dropdown link item.

The b.DropdownDivider constructor creates a dropdown divider.

Bulma examples

Bulma documentation

Example

Code

b.Dropdown(
	b.Clickable,
	b.OnTrigger(
		b.Button(
			e.AriaHasPopupTrue,
			e.AriaControlsID("dropdown-menu"),
			"Dropdown button",
			fa.Icon(fa.Solid, "angle-down", b.Small),
		),
	),
	b.ID("dropdown-menu"),
	b.DropdownAHref("#", "Dropdown item"),
	b.DropdownItem(html.A, "Other dropdown item"),
	b.DropdownAHref("#", b.Active, "Active dropdown item"),
	b.DropdownAHref("#", "Other dropdown item"),
	b.DropdownDivider(),
	b.DropdownAHref("#", "With a divider"),
	b.Active,
)

ResultHTML

<div class="dropdown is-active" onclick="this.classList.toggle('is-active')"><div class="dropdown-trigger"><button class="button" aria-haspopup="true" aria-controls="dropdown-menu"><span>Dropdown button</span><span class="icon is-small"><i class="fa-solid fa-angle-down"></i></span></button></div><div class="dropdown-menu" role="menu" id="dropdown-menu"><div class="dropdown-content"><a class="dropdown-item" href="#">Dropdown item</a><a class="dropdown-item">Other dropdown item</a><a class="dropdown-item is-active" href="#">Active dropdown item</a><a class="dropdown-item" href="#">Other dropdown item</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">With a divider</a></div></div></div>

Hoverable or Toggable

Bulma documentation

Bulma-Gomponents provides theeasy.ClickableDropdown and easy.HoverableDropdownvariants:

Example

Code

b.Dropdown(
	b.Clickable,
	"Click me",
	b.DropdownAHref("#", "Overview"),
	b.DropdownAHref("#", "Modifiers"),
	b.DropdownAHref("#", "Grid"),
	b.DropdownAHref("#", "Form"),
	b.DropdownAHref("#", "Elements"),
	b.DropdownAHref("#", "Components"),
	b.DropdownAHref("#", "Layout"),
	b.DropdownDivider(),
	b.DropdownAHref("#", "More"),
)

ResultHTML

<div class="dropdown" onclick="this.classList.toggle('is-active')"><div class="dropdown-trigger"><button class="button" aria-haspopup="true" onblur="this.closest('.dropdown').classList.remove('is-active')"><span>Click me</span><span class="icon"><i class="fa-angle-down is-small fa-solid"></i></span></button></div><div class="dropdown-menu" role="menu"><div class="dropdown-content"><a class="dropdown-item" href="#">Overview</a><a class="dropdown-item" href="#">Modifiers</a><a class="dropdown-item" href="#">Grid</a><a class="dropdown-item" href="#">Form</a><a class="dropdown-item" href="#">Elements</a><a class="dropdown-item" href="#">Components</a><a class="dropdown-item" href="#">Layout</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">More</a></div></div></div>

Example

Code

b.Dropdown(
	b.Hoverable,
	"Hover me",
	e.P("You can insert ", e.Strong("any type of content"), " within the dropdown menu."),
)

ResultHTML

<div class="dropdown is-hoverable"><div class="dropdown-trigger"><button class="button" aria-haspopup="true"><span>Hover me</span><span class="icon"><i class="fa-angle-down is-small fa-solid"></i></span></button></div><div class="dropdown-menu" role="menu"><div class="dropdown-content"><div class="dropdown-item"><p>You can insert <strong>any type of content</strong> within the dropdown menu.</p></div></div></div></div>

Right aligned

Bulma documentation

Example

Code

b.Dropdown(
	b.Clickable,
	b.DropdownButton("Left aligned"),
	e.P("The dropdown is ", e.Strong("left-aligned"), " by default."),
)

ResultHTML

<div class="dropdown" onclick="this.classList.toggle('is-active')"><div class="dropdown-trigger"><button class="button" aria-haspopup="true" onblur="this.closest('.dropdown').classList.remove('is-active')"><span>Left aligned</span><span class="icon"><i class="is-small fa-solid fa-angle-down"></i></span></button></div><div class="dropdown-menu" role="menu"><div class="dropdown-content"><div class="dropdown-item"><p>The dropdown is <strong>left-aligned</strong> by default.</p></div></div></div></div>

Example

Code

b.Dropdown(
	b.Clickable,
	b.Right,
	b.DropdownButton("Right aligned"),
	e.P("Add the ", e.Code("b.Right"), " modifier for a ", e.Strong("right-aligned"), " dropdown."),
)

ResultHTML

<div class="is-right dropdown" onclick="this.classList.toggle('is-active')"><div class="dropdown-trigger"><button class="button" aria-haspopup="true" onblur="this.closest('.dropdown').classList.remove('is-active')"><span>Right aligned</span><span class="icon"><i class="is-small fa-solid fa-angle-down"></i></span></button></div><div class="dropdown-menu" role="menu"><div class="dropdown-content"><div class="dropdown-item"><p>Add the <code>b.Right</code> modifier for a <strong>right-aligned</strong> dropdown.</p></div></div></div></div>

Dropup

Bulma documentation

Example

Code

b.Dropdown(
	b.Clickable,
	b.Up,
	e.P("You can use the ", e.Code("b.Up"), " modifier to have a dropdown menu that appears above the dropdown button."),
)

ResultHTML

<div class="dropdown is-up" onclick="this.classList.toggle('is-active')"><div class="dropdown-trigger"><button class="button" aria-haspopup="true" onblur="this.closest('.dropdown').classList.remove('is-active')"><span>Dropup button</span><span class="icon"><i class="is-small fa-solid fa-angle-up"></i></span></button></div><div class="dropdown-menu" role="menu"><div class="dropdown-content"><div class="dropdown-item"><p>You can use the <code>b.Up</code> modifier to have a dropdown menu that appears above the dropdown button.</p></div></div></div></div>

Bulma examples

Dropdown content

Hoverable or Toggable

Right aligned

Dropup