Menus

Menu uses a <dialog popover> element styled with a glass background and can be anchored to a trigger using the Popover API.

Create a button that will trigger the menu:

button({ id: "menu-button", popovertarget: "demo-menu" }, ellipsisHorizontalOutlineIcon());

Create the menu and anchor it to the button using the button's ID:

menu({ id: "demo-menu", anchor: "menu-button" },
    menuItem({ href: "#", leading: userOutlineIcon() }, "Profile"),
    menuItem(
        {
            href: "#",
            leading: cog6ToothOutlineIcon(),
            trailing: chevronRightOutlineIcon(),
        },
        "Settings",
    ),
    menuItem(
        { href: "#", leading: questionMarkCircleOutlineIcon() },
        "Help",
    ),
    menuDivider(),
    menuItem(
        { role: "destructive", leading: trashOutlineIcon() },
        "Delete account",
    ),
);
ProfileSettingsHelp