Components Sidebar toggle

Sidebar toggle

Mobile-only hamburger button. Toggles an Alpine state variable to open/close the shell's sidebar, and rotates 180 degrees while swapping the PanelLeft icon for an X.

<koala-sidebar-toggle>

Canonical

Click me — the icon flips and the parent sidebarOpen state toggles.

sidebarOpen =

<nav x-data="{ sidebarOpen: false }">
    <koala-sidebar-toggle target-state="sidebarOpen" />
    @* sidebar binds to the same sidebarOpen state *@
</nav>

Hidden on lg+ — the sidebar is always visible at that breakpoint, so the toggle is mobile-only.

Variants

2 examples

Default target

target-state="sidebarOpen"

Custom target

target-state="menuOpen"

Custom target — point at any Alpine state declared on an ancestor.

<koala-sidebar-toggle target-state="menuOpen" />

States

3 states

Closed

PanelLeft icon; aria-expanded="false".

Open

X icon, rotated 180°; click again to close.

Hover

Hover the button — the surface tints bg-surface-dim.

Props

3 attributes

Attribute	Values	Notes
target-state	string	The Alpine variable to toggle. Defaults to `sidebarOpen`. The variable must be declared on an ancestor's `x-data`.
id	string?	Optional id (e.g. `guided-tour-hamburger`) to pin tour steps.
extra-class	string?	Tailwind utilities appended to the button class list.

Do & don't

Do Declare the state variable on the navbar (or an ancestor) so the toggle and the sidebar both bind to the same Alpine scope.

Don't Don't reference a state name no ancestor declares. The click handler still runs but mutates a local variable Alpine creates on the fly — nothing else sees it.