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 sets tone on an <a> or <button> that keeps its own href / type / x-on:click wiring.

<a koala-menu-item>

Tone

koala-menu-item="Neutral"
koala-menu-item="Danger"

As a menu

States

Neutral
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

Section nav

A sticky rail of anchor links to sections already on the page. The page owns the sections and the anchors — this component is only the rail's presentation and the Alpine store that tracks which one is in view.

koala-section-nav

API

koala-menu-item NeutralDanger
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-section-nav label string (default: On this page)
koala-section-nav interactive bool (default: true)
koala-section-nav-item section id, matched against an element's own id on the page