Koala logo Design
No matches for “
↑↓ navigate open Esc close
PrimitivesAct & navigateMenu item

Menu item

A row inside a dropdown or action menu. One attribute taps colour on an <a> or <button> that keeps its own href / type / x-on:click wiring.

<a koala-menu-item>

Colour

koala-menu-item="Default"
koala-menu-item="Danger"

As a menu

States

Default
Danger hover

Menu action

A menu row with its own idle → pending → success/error lifecycle. It posts its enclosing form itself, crossfades between stacked states in place (the row never reflows), and once the success beat has played it refreshes the element named by refresh-target through Alpine-AJAX instead of reloading the page. This demo is live — the first row succeeds, the second is refused by the server and returns to idle for a retry.

pending / success / error labels

Row actions

The trailing menu on a list row. Its panel is positioned from JavaScript and fixed to the viewport, because a list table scrolls inside overflow-x-auto and would clip a panel hanging below the row. Items are ordinary koala-menu-item rows.

API

koala-menu-item DefaultDanger
koala-menu-action icon IconName
koala-menu-action label string
koala-menu-action pending-label string (default: label + …)
koala-menu-action success-label string (default: Done)
koala-menu-action error-label string (default: Couldn't complete)
koala-menu-action refresh-target element id refreshed via Alpine-AJAX after success (default: full reload)
koala-row-actions label string
koala-row-actions icon IconName