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 =

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"

Props

3 attributes

Attribute	Type	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.