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

3.2k

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

6 months ago

1.1k
Admin panel with collapsible menus

Author:
Rajesh Maheshwari

6 months ago

3.6k
Sidebar with only icons

Author:
Rajesh Maheshwari

6 months ago

1.3k
Header with logo, menu and buttons
Header with logo, menu and buttons. If you want to toggle the visibility of the mobile menu when clicking on the hamburger menu icon you can achieve this with JavaScript by adding and removing a class that controls the visibility of the mobile menu

Author:
Mike Varen

1 year ago

3.8k
Elegant Animated Drawer
Useful Tailwind classes for constructing an animated sidebar drawer that can be controlled via labels. The component itself is pure CSS and does not require JavaScript to use (although this example uses a bit of JS).

Author:
Nick Girga

4 months ago

440
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

26.4k
SocialConnect - Stay Connected
SocialConnect - Stay Connected

Author:
Uwera Dorcas

3 months ago

311
tradition music
by salvator

Author:
Baraka Salvator

3 months ago

472
Yvette
nice

Author:
Umutoniwase Yvette

3 months ago

341
Ticket
Sirve para ticket

Author:
ANGEL EMILIANO MARQUEZ VAZQUEZ

9 months ago

1.4k
Acode master
Welcome to Hamza's official portfolio — a creative developer blending modern design with powerful code. Explore animations, projects, and innovations crafted with HTML, Tailwind CSS, and passion.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

253
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

4 months ago

854

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components