Source: https://tailwindcss.com/plus/ui-blocks/application-ui/application-shells/sidebar

• • Marketing

  • Application UI

  • Ecommerce

  • Documentation

• Application Shells

  • Stacked Layouts

  • Sidebar Layouts

  • Multi-Column Layouts

• Headings

  • Page Headings

  • Card Headings

  • Section Headings

• Data Display

  • Description Lists

  • Stats

  • Calendars

• Lists

  • Stacked Lists

  • Tables

  • Grid Lists

  • Feeds

• Forms

  • Form Layouts

  • Input Groups

  • Select Menus

  • Sign-in and Registration

  • Textareas

  • Radio Groups

  • Checkboxes

  • Toggles

  • Action Panels

  • Comboboxes

• Feedback

  • Alerts

  • Empty States

• Navigation

  • Navbars

  • Pagination

  • Tabs

  • Vertical Navigation

  • Sidebar Navigation

  • Breadcrumbs

  • Progress Bars

  • Command Palettes

• Overlays

  • Modal Dialogs

  • Drawers

  • Notifications

• Elements

  • Avatars

  • Badges

  • Dropdowns

  • Buttons

  • Button Groups

• Layout

  • Containers

  • Cards

  • List containers

  • Media Objects

  • Dividers

• Page Examples

  • Home Screens

  • Detail Screens

  • Settings Screens

5-day Mini-Course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course

Sidebar Layouts

Use these Tailwind CSS sidebar layout examples to build interfaces where the primary navigation is positioned to the side. These layouts are designed and built by the Tailwind CSS team, and include a variety of different styles. All layouts are fully responsive and optimized for desktop, tablet, and mobile screen sizes.

Simple sidebar

---

Preview

Get the code →

Simple sidebar

---

Preview

Get the code →

Simple dark sidebar

---

Preview

Get the code →

Simple dark sidebar

---

Preview

Get the code →

Sidebar with header

---

Preview

Get the code →

Sidebar with header

---

Preview

Get the code →

Dark sidebar with header

---

Preview

Get the code →

Dark sidebar with header

---

Preview

Get the code →

With constrained content area

---

Preview

Get the code →

With constrained content area

---

Preview

Get the code →

With off-white background

---

Preview

Get the code →

With off-white background

---

Preview

Get the code →

Simple brand sidebar

---

Preview

Get the code →

Simple brand sidebar

---

Preview

Get the code →

Brand sidebar with header

---

Preview

Get the code →

Brand sidebar with header

---

Preview

Get the code →