1. Components
  2. 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.

Learn more

Content examples

Empty content

Basic empty content example to start building.

Basic usage

Basic example with branding and links.

Collapsible group

This is a collapisble groups example.

Header

Header example with dropdown.

Footer example with dropdown.

Types

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

Sidebar content push example.

Mini sidebar

A smaller version of a regular sidebar.

Layout splitter New

Sidebar with layout splitter.

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.

Learn more