Tailwind CSS Ecommerce Menus Blocks

Ecommerce Menus

Account, wishlist, favorites, and product discovery menus for ecommerce shopping flows.

Profile trigger opens an auth card first, then a short list of account and order links below it.

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                      <button id="hs-pro-shadnli" type="button" class="relative shrink-0 inline-flex justify-center items-center gap-x-2 size-9.5 rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                      </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] md:duration-150 hs-dropdown-open:opacity-100 opacity-0 w-full sm:w-80 hidden z-10 bg-dropdown border-y sm:border-x border-dropdown-line sm:border-line-1 sm:mt-2 sm:rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shadnli">
                        <div class="p-1">
                          
                          <div class="p-5 bg-surface rounded-lg">
                            <div class="mb-3 text-center">
                              <span class="block font-medium text-foreground">
                                Account
                              </span>
                            </div>

<p class="mt-3 text-center text-sm text-muted-foreground-1">
                              Don't have an account?
                              <a class="text-[13px] text-muted-foreground-1 underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/ecommerce/storefront/create-account.html">
                                Register
                              </a>
                            </p>
                          </div>

<div class="-mx-3 py-3 px-5">
                            
                            <div class="pb-1 mb-1 border-b border-line-2 last:pb-0 last:mb-0 last:border-b-0">
                              <a class="py-2 px-3 flex items-center gap-x-3 hover:bg-muted-hover rounded-md focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/my-orders.html">
                                <div class="grow">
                                  <div class="flex gap-x-3">
                                    <svg class="shrink-0 size-4 mt-1 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>

<div class="grow">
                                      <span class="text-sm text-foreground">
                                        My orders
                                      </span>
                                    </div>
                                  </div>
                                </div>
                                <div class="ms-auto">
                                  <svg class="shrink-0 size-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                                </div>
                              </a>
                            </div>

<div class="pb-1 mb-1 border-b border-line-2 last:pb-0 last:mb-0 last:border-b-0">
                              <a class="py-2 px-3 flex items-center gap-x-3 hover:bg-muted-hover rounded-md focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/order-status.html">
                                <div class="grow">
                                  <div class="flex gap-x-3">
                                    <svg class="shrink-0 size-4 mt-1 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8c0 3.613-3.869 7.429-5.393 8.795a1 1 0 0 1-1.214 0C9.87 15.429 6 11.613 6 8a6 6 0 0 1 12 0"/><circle cx="12" cy="8" r="2"/><path d="M8.714 14h-3.71a1 1 0 0 0-.948.683l-2.004 6A1 1 0 0 0 3 22h18a1 1 0 0 0 .948-1.316l-2-6a1 1 0 0 0-.949-.684h-3.712"/></svg>

<div class="grow">
                                      <span class="text-sm text-foreground">
                                        Order status
                                      </span>
                                    </div>
                                  </div>
                                </div>
                                <div class="ms-auto">
                                  <svg class="shrink-0 size-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                                </div>
                              </a>
                            </div>

<div class="pb-1 mb-1 border-b border-line-2 last:pb-0 last:mb-0 last:border-b-0">
                              <a class="py-2 px-3 flex items-center gap-x-3 hover:bg-muted-hover rounded-md focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/help.html">
                                <div class="grow">
                                  <div class="flex gap-x-3">
                                    <svg class="shrink-0 size-4 mt-1 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>

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

Open related favorites page

Account row, grouped profile links, and a logout action are stacked into one menu panel.

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                      <button id="hs-pro-shadnli" type="button" class="relative shrink-0 inline-flex justify-center items-center gap-x-2 size-9.5 rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                        <img class="shrink-0 size-8 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                      </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] md:duration-150 hs-dropdown-open:opacity-100 opacity-0 w-full sm:w-72 hidden z-10 bg-dropdown border-y sm:border-x border-dropdown-line sm:border-line-1 sm:mt-2 sm:rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shadnli">
                        <div class="p-2">
                          
                          <a class="py-2 px-2.5 flex items-center gap-3 rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/account.html">
                            <img class="shrink-0 size-10 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">

<div class="grow">
                              <span class="block font-medium text-sm text-foreground">
                                James Collins
                              </span>
                              <p class="text-xs text-muted-foreground-1">
                                jamescollins@site.so
                              </p>
                            </div>
                          </a>

<ul class="flex flex-col space-y-0.5">
                            <li>
                              <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/personal-info.html">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                Personal Info
                              </a>
                            </li>

<li>
                              <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/my-orders.html">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
                                My Orders
                              </a>
                            </li>

<li>
                              <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/order-details.html">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M8 7v10"/><path d="M12 7v10"/><path d="M17 7v10"/></svg>
                                Order Details
                              </a>
                            </li>

<li>
                              <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/addresses.html">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22a1 1 0 0 1-1-1v-4a1 1 0 0 1 .445-.832l3-2a1 1 0 0 1 1.11 0l3 2A1 1 0 0 1 22 17v4a1 1 0 0 1-1 1z"/><path d="M18 10a8 8 0 0 0-16 0c0 4.993 5.539 10.193 7.399 11.799a1 1 0 0 0 .601.2"/><path d="M18 22v-3"/><circle cx="10" cy="10" r="3"/></svg>
                                Addresses
                              </a>
                            </li>

<li>
                              <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/payment.html">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
                                Payment
                              </a>
                            </li>

<li>
                              <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/email-newsletter.html">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                                Email Newsletter
                              </a>
                            </li>
                          </ul>

<ul class="flex flex-col space-y-0.5">
                            <li>
                              <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/gift-cards.html">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></svg>
                                Gift Cards
                              </a>
                            </li>

<li>
                              <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/returns-and-refunds.html">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
                                Returns & Refunds
                              </a>
                            </li>
                          </ul>

<p>
                            <button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-foreground rounded-lg hover:bg-muted-hover hover:text-destructive focus:outline-hidden focus:bg-muted-focus focus:text-destructive">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>
                              Logout
                            </button>
                          </p>
                        </div>
                      </div>
                    </div>

Open related storefront homepage

Badge trigger opens a saved-products list with thumbnail rows and a footer link to the full list.

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                      <button id="hs-pro-dnnd" type="button" class="relative shrink-0 inline-flex justify-center items-center gap-x-2 size-9.5 rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg>
                        <span class="flex absolute top-0 inset-e-0 z-10 -mt-1 -me-1">
                          <span class="relative min-w-4.5 min-h-4.5 inline-flex justify-center items-center text-[10px] bg-secondary text-secondary-foreground rounded-full px-1">
                            2
                            <span class="sr-only">Notifications</span>
                          </span>
                        </span>
                      </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] md:duration-150 hs-dropdown-open:opacity-100 opacity-0 w-full sm:w-96 hidden z-10 bg-dropdown border-y sm:border-x border-dropdown-line sm:border-line-1 sm:mt-2 sm:rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnnd">
                        <div class="py-4 px-6">
                          <span class="block font-medium text-foreground">
                            Favorites
                          </span>
                        </div>

<div class="grow flex flex-col">
                                <p class="text-sm text-foreground">
                                  Everyday Solid Black T-Shirt
                                </p>
                                <span class="mt-1.5">
                                  <span class="text-sm text-muted-foreground-1">
                                    <s>$60</s>
                                  </span>
                                  <span class="text-sm text-red-500">
                                    $40
                                  </span>
                                </span>

<div class="">
                                  <button type="button" class="inline-flex items-center gap-x-1.5 text-[13px] text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-remove-element="#hs-pro-shfdi1">
                                    Remove
                                  </button>
                                </div>
                              </div>
                            </div>

<div id="hs-pro-shfdi2" class="hs-removing:opacity-0 duration-300 flex gap-x-5">
                              <div class="relative">
                                <img class="shrink-0 w-20 h-28 object-cover rounded-lg" src="https://images.unsplash.com/photo-1699595749116-33a4a869503c?q=80&w=320&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                              </div>

<div class="grow flex flex-col">
                                <p class="text-sm text-foreground">
                                  Nike Air Force 1
                                </p>

<div class="">
                                  <button type="button" class="inline-flex items-center gap-x-1.5 text-[13px] text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-remove-element="#hs-pro-shfdi2">
                                    Remove
                                  </button>
                                </div>
                              </div>
                            </div>
                            
                          </div>
                        </div>

<div class="py-4 px-6 text-center">
                          <a class="inline-flex justify-center items-center font-medium text-sm text-foreground underline underline-offset-4 decoration-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/ecommerce/storefront/favorites.html">
                            View favorites
                          </a>
                        </div>
                      </div>
                    </div>

Open related favorites page

Hover dot opens a compact product card over the image while keeping the full look visible underneath.

<div class="relative">
                      <div class="hs-dropdown [--auto-close:inside] [--trigger:hover] relative inline-flex">
                        
                        <button id="hs-pro-shpdcl1d1" type="button" class="group hover:scale-110 duration-200 focus:outline-hidden" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                          <span class="relative flex">
                            <span class="animate-ping absolute inline-flex size-full rounded-full bg-plain opacity-75"></span>
                            <span class="relative inline-flex rounded-full size-4 bg-plain"></span>
                            <span class="sr-only">Look Dot</span>
                          </span>
                        </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] duration-150 hs-dropdown-open:opacity-100 opacity-0 w-52 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-2.5 before:inset-s-0 before:w-full before:h-3" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shpdcl1d1">
                          <div class="p-1 bg-layer rounded-xl">
                            <a class="p-2.5 flex items-center gap-x-2 rounded-lg hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" href="#">
                              <div class="grow">
                                <span class="block text-sm text-foreground">
                                  Lightweight Cotton Hooded
                                </span>
                                <p class="mt-1 text-xs text-muted-foreground-1">
                                  Men's Clothing
                                </p>
                                <p class="font-medium text-sm text-foreground">
                                  $45
                                </p>
                              </div>
                              <svg class="shrink-0 size-4 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </a>
                          </div>
                        </div>
                        
                      </div>
                    </div>

Open related product detail page

Ecommerce Menus

Signed-Out Account Menu Pro

Signed-In Account Menu Pro

Favorites Preview Menu Pro

Complete-the-Look Dot Menu Pro