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. Any in-page link to one of those sections glides there. Every item keeps a dot slot before its label, so the dot that marks a section someone else changed since your last visit appears without moving anything. Actions on the whole record sit at the end in koala-section-nav-actions, and stay on screen however long the list: the rail never grows taller than the page scroller, so the links scroll inside it instead. Render the same items in the header's koala-row-actions for screens without the rail.

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
koala-section-nav-item count string shown at the end of the item
koala-section-nav-item count-id element id for the count, so a response can replace it
koala-section-nav-item changed bool: someone else changed the section since the reader's last visit; fills the dot slot every item keeps
koala-section-nav-item starts-group bool: sets the item apart from the group above with space
koala-section-nav-aside label string heading for rows beneath the list, such as links to related records