Sidebar
Tailwind CSS and Alpine JS Sidebar
Sidebars help users find what they need by organizing navigation into clearly labelled sections. They support flat lists, grouped sections, nested sub-items, collapsible menus, and overlay modes.
Simple Sidebar
A sidebar with a logo, search input, and icon navigation links. Profile is marked as active.
Sidebar with Sections
Grouped navigation with section titles for logical organization of links.
Sidebar with Sub-Items
Documentation-style sidebar with parent items and nested child links, similar to API reference navigation.
Collapsible Sections
Each section can be collapsed or expanded using Alpine.js. Click the section headers to toggle visibility.
Overlay Sidebar
A sidebar that opens as an overlay with a dark backdrop, triggered by a hamburger button. Uses Alpine.js for toggle state.
Click the hamburger to open