Home
Rajesh Maheshwari
Sidebar with only icons

Sidebar with only icons

This tailwind example is contributed by Rajesh Maheshwari, on 28-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is drawer

Header Sidebar Navigations Navbar

Author Rajesh Maheshwari

758

2

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<body class="bg-gray-100">
    <div class="flex h-screen">
        
        <aside class="w-20 bg-white border-r border-gray-200">
            <div class="h-full flex flex-col items-center py-4">
                
                <div class="p-2">
                    <img src="https://tailwindflex.com/images/logo.svg" alt="Logo" class="h-8 w-8">
                </div>

<nav class="flex-1 w-full px-2 space-y-2 mt-6">
                    <button class="w-full p-3 flex justify-center rounded-lg bg-indigo-50 text-indigo-600">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                        </svg>
                    </button>

<button class="w-full p-3 flex justify-center rounded-lg text-gray-500 hover:bg-gray-50">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                        </svg>
                    </button>

<button class="w-full p-3 flex justify-center rounded-lg text-gray-500 hover:bg-gray-50">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
                        </svg>
                    </button>

<button class="w-full p-3 flex justify-center rounded-lg text-gray-500 hover:bg-gray-50">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                    </button>

<button class="w-full p-3 flex justify-center rounded-lg text-gray-500 hover:bg-gray-50">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                        </svg>
                    </button>

<button class="w-full p-3 flex justify-center rounded-lg text-gray-500 hover:bg-gray-50">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                        </svg>
                    </button>
                </nav>

<div class="mt-auto pb-4">
                    <button class="w-12 h-12 rounded-full overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User" class="w-full h-full object-cover">
                    </button>
                </div>
            </div>
        </aside>

<main class="flex-1 p-6 bg-gray-100">
            <h1 class="text-2xl font-semibold text-gray-900">Dashboard</h1>
            <div class="mt-4 p-6 bg-white rounded-lg shadow-md">
                <p class="text-gray-600">This is an icon-only sidebar example.</p>
            </div>
        </main>
    </div>

<script>
        // Add active state to buttons
        const buttons = document.querySelectorAll('aside button');
        buttons.forEach(button => {
            button.addEventListener('click', () => {
                buttons.forEach(btn => {
                    btn.classList.remove('bg-indigo-50', 'text-indigo-600');
                    btn.classList.add('text-gray-500');
                });
                button.classList.remove('text-gray-500');
                button.classList.add('bg-indigo-50', 'text-indigo-600');
            });
        });
    </script>
</body>
</html>

Related Examples

header

Author:
alex_bel

1 year ago

3.2k
Previous page - Next page Buttons

Author:
Krishna Gudpalle

2 years ago

12.7k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Author:
Ameth Galarcio

3 months ago

1.1k
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.

Author:
Rajesh Pandey

2 weeks ago

91
Hero

Author:
Aman kumar

1 year ago

6k
Responsive Navbar with search profile options

Author:
Rajesh Maheshwari

3 months ago

828
gallary
html , css

Author:
Hacker Development

3 weeks ago

126
tradition music
by salvator

Author:
Baraka Salvator

1 week ago

49
Navbar with two CTA buttons

Author:
Juraj

3 months ago

666
Hero section
Hero section for your project

Author:
Prajwal Hallale

2 years ago

8.9k
Game changer
by salvator

Author:
Baraka Salvator

1 week ago

31
Home page
Home page для ПО, страница для входа в приложение.

Author:
Алла Телегина

3 months ago

511

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1