Burger

The built-in burger tag — a hamburger / cross menu toggle on Mantine's Burger. Usage, options, and live examples (opened state, size, color, line thickness).

A built-in tag for the classic hamburger menu toggle, built on Mantine’s Burger. Set opened=true to render the cross (an open state) instead of the three lines, and tune size, color, lineSize (bar thickness), and the morph transition. It is presentational on its own — wire interactivity with an onclick handler or drive it from a snippet.

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

Demonstrations

Closed and open

Without opened, the burger shows the three lines. Set opened=true to show the cross. Always give it a label — it becomes the aria-label, since the button has no visible text.

Sizes, colors, and line thickness

size takes xs–xl or any CSS size; color takes any theme color; lineSize sets the bar thickness in pixels.

Transition tuning

transitionDuration (ms) and transitionTimingFunction (any CSS timing function) control the burger↔cross morph.

With other components

Burger is presentational on its own. To wire a real click, forward an onclick through the island attr={...} channel; for true open/close state, drive it from a snippet where you own the React state and pass opened/onClick to component('Burger', ...). Here it sits in a {% group %} next to a label.

Attributes

Omit any attribute to take its default. Burger renders a <button> and takes no body.

CSS Selectors

The control mounts inside an island wrapper carrying data-aardvark-island="Burger"; Mantine’s Styles API exposes the button root and the morphing bars.

[data-aardvark-island="Burger"]  /* the island wrapper */
.mantine-Burger-root             /* the <button> */
.mantine-Burger-burger           /* the three-line / cross glyph */

Injecting Attributes

attr={…} forwards raw HTML attributes (including event handlers) onto the rendered button — the same channel the onclick shortcut above rides.