Menu

The built-in menu tag — a dropdown of actions and links anchored to a trigger button, with section labels and dividers. Usage, options, and live examples.

A dropdown menu of actions and links anchored to a trigger button. label is the trigger button; items is a JSON array describing the entries — actions, links, section headings, and dividers. The dropdown opens on click (or hover) after the page hydrates, so in a static screenshot you’ll see only the trigger button; click it in a live browser to open the menu.

Use it as {% menu %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'menu', …).

Each entry in items is a small JSON object:

• An item — a label, plus optional href (renders the item as a link), color (e.g. red for a destructive action), and disabled.
• A section heading — {"section": "…"}, a non-clickable group label.
• A divider — {"divider": true}, a horizontal rule.

Demonstrations

Sections and dividers

A section entry adds a non-clickable group label; a divider entry draws a rule between groups.

Links, colors, and disabled items

An href turns an item into a link; color tints a destructive action; disabled greys one out. targetVariant restyles the trigger, position anchors the dropdown, and withArrow points it at the button.

Open on hover

Set trigger='hover' to open the menu on hover instead of click. width, shadow, offset, and radius size and style the dropdown.

Keep the menu open after a click

By default the menu closes once an item is chosen. Set closeOnItemClick=false to keep it open — handy for a menu of toggles.

With other components

Because items is plain data, a Python caller can build the menu from a loop — for example, mapping a list of pages to link entries — and render it alongside a Text heading:

Attributes

Omit any attribute to take its Mantine default.

CSS Selectors

Target the rendered element through its island marker, [data-aardvark-island="Menu"], or through the Mantine Styles API classes. The dropdown mounts into a portal and its parts exist only while the menu is open. The relevant classes:

/* Every rendered Menu carries this island marker */
[data-aardvark-island="Menu"] { }

/* Mantine Styles API classes */
.mantine-Menu-dropdown { }
.mantine-Menu-item { }
.mantine-Menu-label { }
.mantine-Menu-divider { }

Injecting Attributes

attr={…} forwards raw HTML attributes — including event handlers — onto the rendered dropdown. Open the menu and click an item: the injected onclick reads the dropdown’s text and alerts it.