- Components
- Sidebar
Navigations
Tailwind CSS Sidebar
Build hidden sidebars into your project for navigation, shopping carts, and more.
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.
Basic usage
A simple sidebar example featuring your brand logo and navigation links for easy access.
Collapsible group
This example demonstrates a collapsible group that can be expanded or collapsed to reveal additional content.
Header
This example demonstrates a sidebar with a dropdown menu in the header. The dropdown menu can be used to navigate to different sections of the sidebar.
Footer
This example demonstrates a sidebar with a dropdown menu in the footer. The dropdown menu can be used to navigate to different sections of the sidebar.
Offcanvas
An offcanvas sidebar is a hidden sidebar that can be toggled open and closed from any page on a website. It is typically used to provide additional navigation options, such as links to menus, account settings, or social media pages.
Content push
This example demonstrates a sidebar that, when opened, pushes the main page content to the side instead of overlaying it. This approach keeps both the sidebar and the main content visible, providing a seamless navigation experience.
Content push to mini sidebar New
On desktop, closing the sidebar transitions it into a compact mini sidebar mode, ensuring both the sidebar and main content remain visible for a smooth and uninterrupted navigation experience.
Mini sidebar
The mini sidebar offers a compact alternative to the standard sidebar, saving space while still providing essential navigation.
Layout splitter New
This example demonstrates a sidebar integrated with a layout splitter, allowing users to easily resize the sidebar for a more flexible and customizable layout.
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.
