Sticky sidebar menu for big screens

This tailwind example is contributed by Prajwal Hallale, on 07-May-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is drawer

Sidebar

Author Prajwal Hallale

Tailwind v3.4 13k 6

Fork Fullscreen

<aside class="hidden md:w-1/3 lg:w-1/4 py-4 md:block">
        <div class="sticky top-12 flex flex-col gap-2 p-2 border rounded-xl">

<a href="" class="px-3 py-1 font-semibold hover:bg-indigo-50 rounded-md">
                Dashboard
            </a>

<a href="" class="px-3 py-1 font-semibold opacity-90 hover:bg-indigo-50 rounded-md">
                Study Lists
            </a>

<a href="" class="px-3 py-1 font-semibold opacity-90 hover:bg-indigo-50 rounded-md">
                Your contribution
            </a>

<div class="inline-flex items-center pl-1">
                <svg class="w-6 h-6 text-gray-800" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                        clip-rule="evenodd"></path>
                </svg>
                <a href="" class="py-1 font-semibold hover:bg-indigo-50 rounded-md">
                    Recently viewed
                </a>
            </div>

<a href="" class="px-3 py-1 font-semibold opacity-90 hover:bg-indigo-50 rounded-md">
                Settings
            </a>

<main class="md:w-2/3 lg:w-3/4 w-full py-1 min-h-screen">
        <div class="p-2 md:p-4">
            <h1 class="font-bold text-xl md:text-2xl my-4">Recently Viewed</h1>

<div>

<h2 class="text-xl font-bold mb-4">Today</h2>

<ul class="space-y-10">
                    <li class="flex items-center space-x-4">
                        <img src="https://source.unsplash.com/random/200x200" alt="Product 1"
                            class="w-16 h-16 rounded-full">
                        <div>
                            <h3 class="text-lg font-semibold">Product 1</h3>
                            <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                        </div>
                    </li>
                    <li class="flex items-center space-x-4">
                        <img src="https://source.unsplash.com/random/200x200" alt="Product 2"
                            class="w-16 h-16 rounded-full">
                        <div>
                            <h3 class="text-lg font-semibold">Product 2</h3>
                            <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                        </div>
                    </li>
                    <li class="flex items-center space-x-4">
                        <img src="https://source.unsplash.com/random/200x200" alt="Product 3"
                            class="w-16 h-16 rounded-full">
                        <div>
                            <h3 class="text-lg font-semibold">Product 3</h3>
                            <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                        </div>
                    </li>
                </ul>

<h2 class="text-xl font-bold my-4">Yesterday</h2>
                <ul class="space-y-10">
                    <li class="flex items-center space-x-4">
                        <img src="https://source.unsplash.com/random/200x200" alt="Product 1"
                            class="w-16 h-16 rounded-full">
                        <div>
                            <h3 class="text-lg font-semibold">Product 1</h3>
                            <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                        </div>
                    </li>
                    <li class="flex items-center space-x-4">
                        <img src="https://source.unsplash.com/random/200x200" alt="Product 2"
                            class="w-16 h-16 rounded-full">
                        <div>
                            <h3 class="text-lg font-semibold">Product 2</h3>
                            <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                        </div>
                    </li>
                    <li class="flex items-center space-x-4">
                        <img src="https://source.unsplash.com/random/200x200" alt="Product 3"
                            class="w-16 h-16 rounded-full">
                        <div>
                            <h3 class="text-lg font-semibold">Product 3</h3>
                            <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                        </div>
                    </li>
                </ul>

</div>

</div>
    </main>
</div>

Related Examples

Tailwind Sidebar Layout

Oliver Hansen

3 years ago

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

2 years ago

28.9k
Sticky left sidebar

Lucas Martinez

3 years ago

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

TailwindFlex

4 years ago

20.5k
Ecommerce Navbar with products, Expanding Search & Mobile sidebar filter
luxury ecommerce navigation bar crafted with pure HTML and Tailwind CSS.

JUGENDRA GANGWAR

3 months ago

196
SaaS Dashboard Navbar with Search, Notifications & Slide-In Mobile Menu
SaaS dashboard navbar built with pure HTML and Tailwind CSS.

JUGENDRA GANGWAR

3 months ago

223
Sidebar with Tailwind CSs and alpinejs

Michael Andreuzza

2 years ago

4.6k
Creative Agency Navbar with Fullscreen Mobile Menu & Animated CTA
A bold, editorial-style navigation bar designed for creative agencies, design studios, architecture firms, and portfolio websites. Built with pure HTML and Tailwind CSS, it features a minimalist branding system, fullscreen mobile navigation, animated call-to-action button, responsive layout, and modern typography inspired by premium digital agencies.

JUGENDRA GANGWAR

3 months ago

257
Tailwind Sidebar Layout (improved)
Improved Tailwind Sidebar Layout. - Responsive sidebar working - Close responsive sidebar working - Positioning menu-toggle correctly - Added some fresh icons - Added sub-items - showing on click - Added animation and swap on icons using 'peer'

Hielke Brandsma

1 year ago

4k
Daystar Day care Dashboard
Daystar Day care Dashboard

Paul Livingstone Ssenoga

2 years ago

11.4k
Tailwind Sidebar Layout

Junior Gauze

1 year ago

2.5k
Startup Glassmorphism Navbar with Neon Gradient & Floating Navigation
AI startup navbar built with pure HTML and Tailwind CSS.

JUGENDRA GANGWAR

3 months ago

314