Components Menu item

Menu item

A row inside a dropdown / action menu — the links and buttons in the popover behind a "more" trigger, custom pickers, and context menus. Applied as an attribute so the element keeps its own href / type / x-on:click wiring. Two colours: Default and Danger (for destructive rows).

Canonical

<ul class="p-1.5">
    <li><a koala-menu-item="Default" href="@editUrl"><koala-icon name="Pencil" />Edit</a></li>
    <li><button koala-menu-item="Danger" type="button" x-on:click="removeOpen = true">Remove</button></li>
</ul>

Put each item in an <li> inside the popover's <ul class="p-1.5">. A <koala-icon> first gives an icon + label row; the gap-2 spacing is built in.

Colours

2 colours

Default

koala-menu-item

Danger

koala-menu-item="Danger"

<button koala-menu-item="Danger" type="button">Remove</button>

Props

1 attribute

Attribute	Values	Notes
koala-menu-item	Default, Danger	Colour. Defaults to Default; Danger is for destructive rows (remove / disable). Targets both `<a>` and `<button>`. All other attributes (`href`, `type`, `x-on:click`, `koala-tray-link`) pass through; extra classes merge.

Do & don't

Do Use koala-menu-item="Danger" for destructive rows so remove/disable read consistently across menus.

Don't Don't hand-roll the row with raw flex w-full … px-3 py-2 hover:bg-surface-dim classes — the spacing and hover drift between menus.