Home
Michael Andreuzza
Sidebar with Tailwind CSs and alpinejs

Sidebar with Tailwind CSs and alpinejs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is drawer

Header Sidebar

Author Michael Andreuzza

Fork Fullscreen

<div class="bg-white">
 
 <div x-data="{ open: false }" @keydown.window.escape="open = false">
  
  <div x-show="open" class="relative z-50" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state." x-ref="dialog" aria-modal="true" style="display: none;">
   
   <div x-show="open" class="fixed inset-0 bg-teal-900/50" x-description="Off-canvas menu backdrop, show/hide based on off-canvas menu state." style="display: none;"></div>
   
   <div class="fixed inset-0 flex">
    <div x-show="open" x-description="Off-canvas menu, show/hide based on off-canvas menu state." class="relative mr-16 flex w-full max-w-lg flex-1" @click.away="open = false" style="display: none;">
     
     <div x-show="open" x-description="Close button, show/hide based on off-canvas menu state." class="absolute left-full top-0 flex w-16 justify-center pt-5" style="display: none;">
       <button type="button" class="-m-2.5 p-2.5" @click="open = false">
        <span class="sr-only">Close sidebar</span> 
        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
       </svg>
      </button>
     </div>
     <!--
                // Navigation list within the sidebar
                // Styling for the navigation container
                // Styling for navigation links
                // Dynamically generate menu items

-->
     <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-black px-6 pb-2">
      <nav class="flex flex-1 flex-col pt-6">
       <ul role="list" class="flex flex-1 flex-col justify-center gap-y-7 text-3xl text-white uppercase lg:text-6xl">
        <li> <a class="hover:text-[#1f57ef]" href="#">⏤ Work</a> </li>
        <li> <a class="hover:text-[#1f57ef]" href="#">⏤ Stack</a> </li>
        <li> <a class="hover:text-[#1f57ef]" href="#">⏤ Store</a> </li>
        <li> <a class="hover:text-[#1f57ef]" href="#">⏤ News</a> </li>
        <li> <a class="hover:text-[#1f57ef]" href="#">⏤ Blog</a> </li>
       </ul>
      </nav>
     </div>
    </div>
   </div>
  </div>
  
  <div class="sticky top-0 z-40 flex justify-start gap-x-6 bg-white px-4 py-4 shadow-sm sm:px-10">
    <button type="button" class="-m-2.5 p-2.5 text-neutral-700" @click="open = true">
     <span class="sr-only">Open sidebar</span>  <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
     <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
    </svg>
   </button>
   Lexington
  </div> 
  <main class="py-4 px-10 h-screen">
   
   <p class="text-xl  z-20 top-10 left-10 text-black uppercase">
    Your content goes here
   </p> 
   <div class="grid grid-cols-3 gap-2 h-full rounded-3xl overflow-hidden">
     <img class="w-full h-full object-cover" src="https://tutorials.lexingtonthemes.com/images/gradient.png"><img class="w-full h-full object-cover" src="https://tutorials.lexingtonthemes.com/images/gradient.png"><img class="w-full h-full object-cover" src="https://tutorials.lexingtonthemes.com/images/gradient.png">
   </div>
  </main> 
  <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center sm:px-6 sm:pb-5 lg:px-8 ">
   <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
    <div class="flex w-0 flex-1 items-center p-4">
     <div class="w-full">
      <p class="text-sm font-medium text-neutral-900">Tutorial</p>
      <p class="mt-1 text-sm text-neutral-500">
       How to create a responsive sidebar with Astro, Tailwind CSS, and Alpine.js
      </p>
      <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com">
        by © Lexington Themes</a> </p>
     </div>
    </div>
    <div class="flex">
     <div class="flex flex-col divide-y divide-neutral-200">
      <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-sidebar-navigation-with-tailwindcss-and-alpine-js/" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
      <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/pricing-table/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
     </div>
    </div>
   </div>
  </div> 
 </div>
</div>

Resources1× 0.5× 0.25×Rerun

Related Examples

Basic sidebar

Author:
Rajesh Maheshwari

5 months ago

915
Admin panel with collapsible menus

Author:
Rajesh Maheshwari

5 months ago

3.1k
Sidebar with only icons

Author:
Rajesh Maheshwari

5 months ago

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

8 months ago

2.8k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

6 months ago

1.4k
App Hero Section With header

Author:
Abdul Baset Bappy

1 month ago

312
Sticky left sidebar

Author:
Lucas Martinez

2 years ago

14.7k
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

540
Software Developer
A software developer designs, builds, tests, and maintains software applications and systems. They use programming languages to create code that meets user needs and client specifications. Software developers may work on various projects, including applications, systems software, or web development

Author:
nii fanny

2 months ago

571
Active Beauty Main Page

Author:
Maxim

4 months ago

639
Title

Author:
Morris Muriuki Muthigani

1 week ago

73
Creative Hero Section

Author:
Ijila Itunu

3 months ago

694

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components