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

1.1k

Fork Fullscreen

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

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

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

Related Examples

NFT Header with Hero

Author:
Abdul Baset Bappy

1 month ago

292
Hero simple
hero design simple

Author:
QQ-VVN

2 months ago

326
flower
by salvator

Author:
Baraka Salvator

2 months ago

221
Yvette
nice

Author:
Umutoniwase Yvette

2 months ago

304
3D Animation Studio
3D animation is the process of creating three-dimensional products, objects, backgrounds, etc., and setting them in motion within a digital environment. It's commonly used for the web, social media marketing, product design, film, cartoons, commercials, and video games.

Author:
Nicole Shalom

2 months ago

671
Hero $ Navigation
This is a modern, AI-focused landing page for a company called NEURALCORE that offers enterprise-grade AI solutions.

Author:
ishimwe shadad

2 months ago

509
Markert shop
wellcome tothe my online shoping

Author:
Umutoniwase Yvette

2 months ago

33
Tailwind Header
responsive mobile menu with a smooth transition

Author:
Anonymous

7 months ago

2.8k
Features Component

Author:
KULDEEP

1 month ago

192
Header with logo, menu and buttons
Header with logo, menu and buttons. If you want to toggle the visibility of the mobile menu when clicking on the hamburger menu icon you can achieve this with JavaScript by adding and removing a class that controls the visibility of the mobile menu

Author:
Mike Varen

1 year ago

3.8k
New Nav Component
A new navigation component

Author:
Amit PR

1 year ago

3.1k
Creative Hero Section

Author:
Ijila Itunu

3 months ago

700

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components