Home
Rajesh Pandey
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores

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.

This tailwind example is contributed by Rajesh Pandey, on 16-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Register, Sign in,drawer,Toast, Snackbar

Author Rajesh Pandey

107

Fork Fullscreen

<div x-data="{ open: false }" class="flex h-screen bg-white dark:bg-gray-900">
  
  <div :class="open ? 'translate-x-0' : '-translate-x-full'" class="fixed z-30 inset-y-0 left-0 w-64 transition duration-300 transform bg-white dark:bg-gray-800 shadow-lg overflow-y-auto">
    <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">🛍️ MyShop</h2>
      <button @click="open = false" class="text-gray-600 dark:text-gray-300 hover:text-red-500 focus:outline-none text-2xl">&times;</button>
    </div>
    <nav class="p-4">
      <a href="#" class="block py-2 px-4 rounded text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Home</a>
      <a href="#" class="block py-2 px-4 rounded text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Shop</a>
      <a href="#" class="block py-2 px-4 rounded text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Categories</a>
      <a href="#" class="block py-2 px-4 rounded text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">About</a>
      <a href="#" class="block py-2 px-4 rounded text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Contact</a>
    </nav>
  </div>

<div class="flex-1 flex flex-col overflow-hidden w-full">
    
    <header class="flex items-center justify-between px-4 py-3 bg-white dark:bg-gray-800 shadow-md">
      <div class="flex items-center space-x-4">
        <button @click="open = true" class="text-gray-700 dark:text-gray-300 focus:outline-none text-2xl">
          &#9776;
        </button>
        <span class="text-xl font-semibold text-gray-800 dark:text-white">Jai Shree Ram Store</span>
      </div>
      <div class="flex items-center space-x-3">
        <button class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900">
          🛒
        </button>
        <button class="bg-yellow-400 text-white px-4 py-1 rounded hover:bg-yellow-500">Login</button>
      </div>
    </header>

<main class="flex-1 p-6 bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100">
      
      <h2 class="text-2xl font-bold">Welcome to Your Divine Shopping Experience</h2>
    </main>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

Related Examples

Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
TailwindFlex

2 years ago

17.5k
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

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

25.2k
Daystar Day care Dashboard
Daystar Day care Dashboard

Author:
Paul Livingstone Ssenoga

1 year ago

8.4k
Tailwind Sidebar Layout

Author:
nejaa badr

1 year ago

6.3k
Tailwind Sidebar Layout
Place edited for the search button

Author:
Nur Pratap Karki

11 months ago

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

Author:
Pardha Saradhy Madabhushi

10 months ago

1.8k
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

7 months ago

2.2k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

7 months ago

2.7k
Tailwind Sidebar Layout

Author:
Junior Gauze

7 months ago

1.3k
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'

Author:
Hielke Brandsma

7 months ago

2.5k
Notification
Dev Community Notification Clone

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

6 months ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components