Tailwind CSS Sidebar Navigation Blocks

Sidebar Navigation

Vertical sidebar navigation patterns for account menus, help categories, and other app-specific sidebar navigation lists.

A fixed left rail groups account links in one vertical list beside the main content area.

<div class="mb-5 lg:mb-0 lg:hidden flex flex-wrap justify-between items-center gap-x-5">
                      
                      <ol class=" flex items-center whitespace-nowrap">
                        <li class="flex items-center">
                          
                          <a class="py-0.5 px-1.5 flex items-center gap-x-1 text-sm rounded-md text-foreground hover:bg-surface-hover focus:bg-surface-focus focus:outline-hidden" href="index.html">
                            Home
                          </a>
                          <svg class="shrink-0 overflow-visible size-4  text-muted-foreground" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"></path></svg>
                        </li>
                        <li class="flex items-center truncate">
                          
                          <a class="py-0.5 px-1.5 flex items-center truncate gap-x-1 text-sm truncate rounded-md text-foreground hover:bg-surface-hover focus:bg-surface-focus focus:outline-hidden" href="account.html">
                            <span class="truncate">Account</span>
                          </a>
                          <svg class="shrink-0 overflow-visible size-4  text-muted-foreground" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"></path></svg>
                        </li>
                        <li class="ps-1.5 flex items-center truncate font-semibold text-foreground text-sm truncate">
                          <span class="truncate">Personal Info</span>
                        </li>
                      </ol>

<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-shas" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-shas">
                        <span class="sr-only">Toggle navigation</span>
                        <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="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m8 9 3 3-3 3"/></svg>
                      </button>
                      
                    </div>

<div id="hs-pro-shas" class="hs-overlay [--auto-close:lg]
                      hs-overlay-open:translate-x-0
                      -translate-x-full transition-all duration-300 transform
                      w-72 lg:w-56 xl:w-72 h-full min-h-160
                      hidden
                      fixed inset-y-0 inset-s-0 z-60
                      bg-sidebar border-e border-sidebar-line
                      lg:block lg:static lg:z-0 lg:translate-x-0" role="dialog" tabindex="-1" aria-label="Sidebar">
                      <div class="p-5 lg:pt-5 lg:pb-12 lg:ps-0">
                        
                        <div class="ps-2.5 mb-5 flex justify-between items-center gap-x-3">
                          <div class="grow">
                            <span class="block font-medium text-sidebar-nav-foreground">
                              Account
                            </span>
                          </div>

<button type="button" class="lg:hidden size-6 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-shas" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-shas">
                            <span class="sr-only">Close</span>
                            <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                          </button>
                          
                        </div>

<ul class="flex flex-col space-y-1">
                          <li>
                            <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus bg-sidebar-nav-active" 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-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-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-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-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-1">
                          <li>
                            <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-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>

<p>
                          <button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover hover:text-destructive focus:muted-focus focus:bg-sidebar-nav-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>

A vertical help rail stacks category links and section groups beside the support content area.

<div id="hs-pro-shas" class="hs-overlay [--auto-close:lg]
                      hs-overlay-open:translate-x-0
                      -translate-x-full transition-all duration-300 transform
                      w-80 lg:w-72 h-full
                      hidden
                      fixed inset-y-0 inset-s-0 z-60
                      bg-sidebar border-e border-sidebar-line
                      lg:block lg:sticky lg:top-10 lg:z-0 lg:translate-x-0" role="dialog" tabindex="-1" aria-label="Sidebar">
                      <div class="lg:sticky top-10 inset-s-0 h-full flex-1 flex flex-col lg:h-auto">
                        
                        <div class="lg:hidden py-3 px-5 flex justify-between items-center gap-x-3 border-b border-sidebar-divider">
                          <div class="grow">
                            <span class="block font-medium text-foreground">
                              Categories
                            </span>
                          </div>

<button type="button" class="lg:hidden size-6 inline-flex justify-center items-center gap-x-2 rounded-full bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-shas" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-shas">
                            <span class="sr-only">Close</span>
                            <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                          </button>
                          
                        </div>

<div class="h-full overflow-y-auto overflow-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          <div class="p-5 ps-3 lg:pt-10 lg:ps-0 flex flex-col">

<ul class="[--scrollspy-offset:60] space-y-1" data-hs-scrollspy="#hs-pro-shh-scrollspy">
                              
                              <li>
                                <a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus hs-scrollspy-active:bg-sidebar-nav-active active" href="#delivery">
                                  <svg class="shrink-0 mt-0.5 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="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/></svg>
                                  Delivery
                                </a>
                              </li>

<li>
                                <a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus hs-scrollspy-active:bg-sidebar-nav-active" href="#store">
                                  <svg class="shrink-0 mt-0.5 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="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"/><path d="M2 7h20"/><path d="M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7"/></svg>
                                  Store
                                </a>
                              </li>

<li>
                                <a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus hs-scrollspy-active:bg-sidebar-nav-active" href="#products">
                                  <svg class="shrink-0 mt-0.5 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="M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"/></svg>
                                  Products
                                </a>
                              </li>
                              
                            </ul>

<div class="pt-5 mt-5 space-y-1 border-t border-sidebar-divider">
                              
                              <a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                <svg class="shrink-0 mt-0.5 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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M8 10h.01"/><path d="M12 10h.01"/><path d="M16 10h.01"/></svg>
                                <div class="grow">
                                  <div class="flex flex-wrap justify-between items-center gap-2">
                                    Chat
                                    <span class="inline-flex items-center gap-x-1.5 text-xs text-sidebar-nav-foreground underline underline-offset-4">Open chat</span>
                                  </div>
                                </div>
                              </a>

<a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                <svg class="shrink-0 mt-0.5 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="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/><path d="M14.05 2a9 9 0 0 1 8 7.94"/><path d="M14.05 6A5 5 0 0 1 18 10"/></svg>
                                <div class="grow">
                                  <div class="flex flex-wrap justify-between items-center gap-2">
                                    Phone
                                    <span class="inline-flex items-center gap-x-1.5 text-xs text-sidebar-nav-foreground underline underline-offset-4">(0161) 347 8854</span>
                                  </div>
                                </div>
                              </a>

<a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                <svg class="shrink-0 mt-0.5 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>
                                <div class="grow">
                                  <div class="flex flex-wrap justify-between items-center gap-2">
                                    Email
                                    <span class="inline-flex items-center gap-x-1.5 text-xs text-sidebar-nav-foreground underline underline-offset-4">Send us email</span>
                                  </div>
                                </div>
                              </a>

<a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                <svg class="shrink-0 mt-0.5 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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                                <div class="grow">
                                  <div class="flex flex-wrap justify-between items-center gap-2">
                                    Send us feedback
                                  </div>
                                </div>
                              </a>
                              
                            </div>
                            
                          </div>
                        </div>
                        
                      </div>
                    </div>

Open related storefront help template

Sidebar Navigation

Account Sidebar Navigation Pro

Help Center Sidebar Navigation Pro