alder-ui demos

al-menu

A popover of links or buttons. The optional script adds menu roles, roving arrow keys and closing on select.

Without JavaScript

The menu is a popover of plain links; the platform opens and closes it. No roles or arrow keys (those come from al-menu.js).

Profile Settings

Enhanced

With the script: arrow keys, Home/End, focus on the first item, closes on select. Try it with the keyboard. An <hr> is a separator; data-variant="destructive" tints an item (and its icon) with the destructive colour.

Edit Duplicate

Anchored elsewhere

anchor names another element by id; the menu opens against it, not its invoker (this needs al.js).

Profile Settings