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

1 year ago

2.1k
Admin panel with collapsible menus

Author:
Rajesh Maheshwari

1 year ago

5.5k
Sidebar with only icons

Author:
Rajesh Maheshwari

1 year ago

2.1k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Author:
Ameth Galarcio

1 year ago

2.4k
Yvette
nice

Author:
Umutoniwase Yvette

9 months ago

744
Animated Title
App Logo or Main Title

Author:
khalidrootdevs

2 years ago

7.1k
section header

Author:
Raul antonio de la cruz hernandez

3 months ago

367
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

2 years ago

11.9k
Navbar
E-commerce Navbar

Author:
Aman kumar

1 year ago

4.8k
sidebar
This sidebar implementation includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support 4. Beautiful animations and effects: 1. Slide-in animation when opening the sidebar 2. Fade-in animation for menu items with staggered delays 3. Hover effects on menu items with underline animation 4. Smooth color transitions 5. SVG icons for menu items 6. User profile section at the bottom of the sidebar 7. Close button for easy dismissal on mobile 8. Main content area with a toggle button for the sidebar 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The sidebar has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Menu items have hover effects with background color changes and underline animations - Icons change color on hover - The sidebar slides in from the left with a smooth animation - Menu items fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The layout is responsive, with the sidebar hiding off-screen on mobile and a toggle button to show/hide it This implementation provides a visually appealing and functional sidebar with various animations and effects, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions.

Author:
nejaa badr

1 year ago

4.7k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

3.9k
Animated navigation with Tailwind CSS and Apinejs

Author:
Michael Andreuzza

1 year ago

5.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components