SideBar

Sidebar

This tailwind example is contributed by nitro-x, on 17-Jul-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is drawer

Sidebar

Author nitro-x

Tailwind v3.4 315

Fork Fullscreen

<header
  class="h-20 bg-white border-b border-slate-200
         flex items-center justify-between
         px-6 lg:px-8">

<div class="flex items-center gap-4">

<div>

<h2
        class="text-xl font-semibold
               text-slate-900">

Admin Panel

</h2>

<p
        class="text-sm text-slate-500">

Manage your Items efficiently

</p>

</div>

</div>

<div class="flex items-center gap-5">

<button
      class="relative p-2 rounded-lg
             text-slate-500
             hover:bg-slate-100
             hover:text-slate-900
             transition">

<svg
        class="w-5 h-5"
        fill="none"
        stroke="currentColor"
        stroke-width="1.8"
        viewBox="0 0 24 24">

<path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4" />

</svg>

<span
        class="absolute top-1.5 right-1.5
               w-2 h-2
               rounded-full
               bg-slate-900
               border-2 border-white">

</span>

</button>

<div
      class="h-8 w-px bg-slate-200">

</div>

<div
      class="flex items-center gap-3">

<div
        class="w-10 h-10 rounded-full
               bg-slate-900
               flex items-center justify-center
               text-sm font-semibold
               text-white">

A

</div>

<div class="hidden sm:block">

<p
          class="text-sm font-semibold
                 text-slate-900">

Admin User

</p>

<p
          class="text-xs text-slate-500">

Administrator

</p>

</div>

</div>

</div>

</header>
<!-- 
<a
        routerLink="/admin/categories"
        routerLinkActive
        #rla="routerLinkActive"
        [routerLinkActiveOptions]="{exact:true}"

class="flex items-center gap-4
            px-5 py-4 rounded-2xl
            transition-all duration-300"

[ngClass]="
        rla.isActive
        ? 'bg-[#EEF5FF] text-[#2563EB] shadow-sm'
        : 'text-slate-600 hover:bg-[#F8FBFF]'">

<div
            class="h-10 w-10 rounded-xl flex items-center justify-center"
            [ngClass]="
            rla.isActive
            ? 'bg-blue-100 text-[#2563EB]'
            : 'text-slate-500'">

<svg
                class="h-6 w-6 text-[#2563EB]"
                fill="none"
                stroke="currentColor"
                stroke-width="1.8"
                viewBox="0 0 24 24">

<rect x="4" y="4" width="7" height="7" rx="1"/>
                <rect x="13" y="4" width="7" height="7" rx="1"/>
                <rect x="4" y="13" width="7" height="7" rx="1"/>
                <rect x="13" y="13" width="7" height="7" rx="1"/>

</svg>

</div>

<span class="font-medium">

Categories

</span>

@if(rla.isActive){

<div
                class="absolute left-0 top-2 bottom-2
                    w-1 rounded-r-full
                    bg-[#2563EB]">
            </div>

}

</a> -->

Related Examples

Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Muhammad Rizqi Juniyanto

2 years ago

3.9k
Tailwind Sidebar Layout
Place edited for the search button

Nur Pratap Karki

2 years ago

6k
Notification
Dev Community Notification Clone

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

3.8k
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Rajesh Pandey

1 year ago

1.7k
sidebar elastico

Raul antonio de la cruz hernandez

1 year ago

985
gallary
html , css

Hacker Development

1 year ago

1.7k
Modern Retail Analytics Dashboard UI with Interactive Charts
Dashboard built with HTML, Tailwind CSS, and vanilla JavaScript.

JUGENDRA GANGWAR

4 months ago

370
Responsive navbar with dark mode support
Sidebar on small screen devices

Pardha Saradhy Madabhushi

2 years ago

3k
Features Component

KULDEEP

1 year ago

1.5k
SaaS Dashboard Navbar with Search, Notifications & Slide-In Mobile Menu
SaaS dashboard navbar built with pure HTML and Tailwind CSS.

JUGENDRA GANGWAR

4 months ago

284
sidebar responsive
responsive sidebar with working links

Ganesh Salunke

10 months ago

1.3k
Sticky sidebar menu for big screens

Prajwal Hallale

3 years ago

13k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.