dropdown

Oat documentation: https://oat.ink/components/dropdown/

The dropdown helpers compose trigger and menu markup for small action lists and contextual menus.

Anatomy

A dropdown usually has a trigger control and a popover menu with one or more item actions.

Recipes

A basic dropdown menu

import glaze/oat/dropdown
import lustre/element/html

fn user_menu() {
  dropdown.dropdown([], [
    html.button([dropdown.trigger_for("user-menu")], [html.text("Open")]),
    dropdown.menu("user-menu", [], [
      dropdown.item([], [html.text("Profile")]),
      dropdown.item([], [html.text("Sign out")]),
    ]),
  ])
}

References

MDN Popover API: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
MDN popovertarget: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget
MDN <menu>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu

Values

</>

pub fn dropdown(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

Render the dropdown container element.

Use this as the wrapper around the trigger and the menu.

item

</>

pub fn item(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

Render an item action inside a dropdown menu.

Each item is rendered as a button with role="menuitem".

</>

pub fn menu(
  name: String,
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

Render the dropdown menu.

Pass the same name used by trigger_for.

popover_target_attrs

</>

pub fn popover_target_attrs(
  name: String,
) -> List(attribute.Attribute(msg))

Return the base attributes needed for a dropdown popover target.

This includes an id and an empty popover attribute.

trigger_for

</>

pub fn trigger_for(name: String) -> attribute.Attribute(msg)

Set the popover target for a trigger control.

Apply this to the element that opens the dropdown menu.