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 312

Fork Fullscreen

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

<div>

Admin Panel

</h2>

Manage your Items efficiently

</p>

</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>

<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">

</div>

<div class="hidden sm:block">

Admin User

</p>

Administrator

</p>

</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]'">

</svg>

</div>

Related Examples

sidebar responsive
responsive sidebar with working links

Ganesh Salunke

9 months ago

1.3k
Tailwind Sidebar Layout
Place edited for the search button

Nur Pratap Karki

2 years ago

6k
Features Component

KULDEEP

1 year ago

1.5k
sidebar dash
sidebar dash

Omer fils ELENGA

9 months ago

977
Basic sidebar

Rajesh Maheshwari

1 year ago

2.8k
Material 3 Drawer [Light]
A sidebar drawer that conforms to Google's Material 3 design guidelines

Nick Girga

1 year ago

1.1k
side bar
html css

Hacker Development

1 year ago

1.6k
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Nick Girga

1 year ago

2k
Elegant Animated Drawer
Useful Tailwind classes for constructing an animated sidebar drawer that can be controlled via labels. The component itself is pure CSS and does not require JavaScript to use (although this example uses a bit of JS).

Nick Girga

1 year ago

1.6k
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.

Eamon Carter

3 years ago

29k
Daystar Day care Dashboard
Daystar Day care Dashboard

Paul Livingstone Ssenoga

2 years ago

11.4k
Tailwind Sidebar Layout

Oliver Hansen

3 years ago

63.6k