Tailwind CSS Sidebar
Build Tailwind CSS sidebar layouts with collapsible nav groups, header and footer dropdowns, offcanvas behavior, content push, mini, and resizable variants.
Requires JS
Note that this component requires the use of our Overlay plugin, else you can skip this message if you are already using Preline UI as a package.
Collapsible nav groups
Group related navigation links inside collapsible sections to keep long sidebars easier to scan.
Header with dropdown
Add a dropdown to the sidebar header for workspace switching, quick actions, or account context.
Footer with dropdown
Place account controls or secondary actions in a dropdown anchored to the sidebar footer.
Offcanvas sidebar
Use an offcanvas sidebar that stays hidden until opened, then overlays the page content.
Sidebar with content push
Push the main content aside when the sidebar opens so both areas remain visible.
Content push with mini sidebar
Collapse the full sidebar into a mini rail on desktop while keeping the main content visible.
Resizable sidebar
Combine the sidebar with the layout splitter plugin so users can resize it.
Requires JS
Note that this component requires the use of our Layout splitter plugin, else you can skip this message if you are already using Preline UI as a package.
Empty sidebar shell
A minimal sidebar shell you can use as a starting point for a custom layout.