Tailwind Sidebar Layout

This tailwind example is contributed by Oliver Hansen, on 12-Feb-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is drawer

Sidebar Navbar

Author Oliver Hansen

Tailwind v3.4 63.6k 29

Fork Fullscreen

<div class="hidden md:flex flex-col w-64 bg-gray-800">
        <div class="flex items-center justify-center h-16 bg-gray-900">
            <span class="text-white font-bold uppercase">Sidebar</span>
        </div>
        <div class="flex flex-col flex-1 overflow-y-auto">
            <nav class="flex-1 px-2 py-4 bg-gray-800">
                <a href="#" class="flex items-center px-4 py-2 text-gray-100 hover:bg-gray-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                    Dashboard
                </a>
                <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-100 hover:bg-gray-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M6 18L18 6M6 6l12 12" />
                    </svg>
                    Messages
                </a>
                <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-100 hover:bg-gray-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                    Settings
                </a>
            </nav>
        </div>
    </div>

<div class="flex flex-col flex-1 overflow-y-auto">
        <div class="flex items-center justify-between h-16 bg-white border-b border-gray-200">
            <div class="flex items-center px-4">
                <button class="text-gray-500 focus:outline-none focus:text-gray-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>
                <input class="mx-4 w-full border rounded-md px-4 py-2" type="text" placeholder="Search">
            </div>
            <div class="flex items-center pr-4">

<button
                    class="flex items-center text-gray-500 hover:text-gray-700 focus:outline-none focus:text-gray-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 19l-7-7 7-7m5 14l7-7-7-7" />
                    </svg>
                </button>
            </div>
        </div>
        <div class="p-4">
            <h1 class="text-2xl font-bold">Welcome to my dashboard!</h1>
            <p class="mt-2 text-gray-600">This is an example dashboard using Tailwind CSS.</p>
        </div>
    </div>
    
</div>

Related Examples

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

2 years ago

28.9k
Admin Panel
Source https://gist.github.com/visualval/8aaaad794256313fa2310b997e8a9b8f

Mr Robot

4 years ago

25.7k
Sticky sidebar menu for big screens

Prajwal Hallale

3 years ago

13k
Sticky left sidebar

Lucas Martinez

3 years ago

16k
Responsive navbar
navbar with the dropdown on mobile devices

Piet Vriend

3 years ago

39.9k
Fixed navbar

Oliver Hansen

3 years ago

28.6k
Responsive navbar with dark mode support
Sidebar on small screen devices

TailwindFlex

4 years ago

20.5k
Navbar Section
Responsive Navbar

Noob

4 years ago

24.5k
Minimalistic navbar
Responsive navbar

Sophia Baker

3 years ago

21.8k
Navbar with search
Use this example of a navbar element to also show a search input element that you can integrate for a site-wide search.

Mamadou Diouma II Bah

2 years ago

17k
Responsive Navbar Example
A working example of the navbar

Noob

4 years ago

17.9k
Navbar compoent

Amit Pachange

3 years ago

17.3k
Tailwindflex navbar

Amit Pachange

3 years ago

17.4k
Simple navbar
semi transparent

Laurits

3 years ago

14.9k
Navigation Bar Responsive

SAI BENDE

2 years ago

11.2k
Very simple navbar

Arya

3 years ago

15k
Semi transparent navbar

Laurits

3 years ago

16.7k
Daystar Day care Dashboard
Daystar Day care Dashboard

Paul Livingstone Ssenoga

2 years ago

11.4k