Menu

Example:

---

Code example:

from htmy import ComponentType, html

from htmui.unstyled import menu


def example() -> ComponentType:
    return html.div(
        html.p("Menu with custom TailwindCSS styles:"),
        html.div(
            menu.group(
                menu.menu_item(html.span("Commit"), data_label="commit"),
                menu.menu_item(html.span("Pull"), data_label="pull"),
                menu.menu_item(html.span("Push"), data_label="push"),
                id="command-group-1",
                label="Git",
                label_props={"class": "font-semibold"},
            ),
            menu.separator(),
            menu.group(
                menu.menu_item(html.span("Review"), data_label="review"),
                menu.menu_item(html.span("Approve"), data_label="approve", disabled=True),
                menu.menu_item(html.span("Comment"), data_label="comment"),
                id="command-group-2",
                label="Actions",
                label_props={"class": "font-semibold"},
            ),
            id="menu-example",
            class_="flex flex-col gap-2 p-2 bg-popover rounded",
        ),
        class_="flex flex-col gap-2",
    )

---

Component implementation:

from htmy import ComponentType, Properties, PropertyValue, html


def group(
    *items: ComponentType, id: str, label: str, label_props: Properties | None = None
) -> ComponentType:
    label_id = f"{id}-label"
    return html.div(
        html.span(label, id=label_id, role="heading", **(label_props or {})),
        *items,
        id=id,
        role="group",
        aria_labelledby=label_id,
    )


def separator() -> ComponentType:
    return html.hr(role="separator")


def menu_item(*children: ComponentType, disabled: bool = False, **kwargs: PropertyValue) -> ComponentType:
    if disabled:
        kwargs["aria-disabled"] = "true"

    return html.div(*children, role="menuitem", **kwargs)