Home
Rajesh Maheshwari
Sidebar with only icons

45

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

631

1

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

Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
TailwindFlex

2 years ago

17.3k
Minimalistic navbar
Responsive navbar

Author:
Sophia Baker

2 years ago

19k
Navbar compoent

Author:
Amit Pachange

2 years ago

14.8k
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

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

Author:
Eamon Carter

1 year ago

24.7k
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

1 year ago

6.6k
Animated navigation with Tailwind CSS and Apinejs

Author:
Michael Andreuzza

1 year ago

3.6k
Sidebar with Tailwind CSs and alpinejs

Author:
Michael Andreuzza

1 year ago

2.6k
Daystar Day care Dashboard
Daystar Day care Dashboard

Author:
Paul Livingstone Ssenoga

1 year ago

8.2k
New Nav Component
A new navigation component

Author:
Amit PR

1 year ago

2.8k
Navbar
E-commerce Navbar

Author:
Aman kumar

1 year ago

3.5k
Tailwind Sidebar Layout

Author:
nejaa badr

1 year ago

6.1k

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