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 v3.4. It is responsive. It supports dark mode. similar terms for this example are Register, Sign in,drawer,Toast, Snackbar

Author Rajesh Pandey

Tailwind v3.4 1.5k 1

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

TailwindFlex

4 years ago

20.5k
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
Daystar Day care Dashboard
Daystar Day care Dashboard

Paul Livingstone Ssenoga

2 years ago

11.4k
Tailwind Sidebar Layout

nejaa badr

2 years ago

9.2k
Tailwind Sidebar Layout
Place edited for the search button

Nur Pratap Karki

2 years ago

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

Pardha Saradhy Madabhushi

2 years ago

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

Muhammad Rizqi Juniyanto

1 year ago

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

Ameth Galarcio

1 year ago

4.6k
Tailwind Sidebar Layout

Junior Gauze

1 year ago

2.5k
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
Notification
Dev Community Notification Clone

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

3.8k