Material 3 Drawer [Light]

Related Examples

• 
  Sidebar

  This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

  Ameth Galarcio

  1 year ago

  4.6k
• 
  Tailwind Sidebar Layout

  Oliver Hansen

  3 years ago

  63.6k
• 
  sidebar responsive

  responsive sidebar with working links

  Ganesh Salunke

  8 months ago

  1.2k
• 
  SaaS Dashboard Navbar with Search, Notifications & Slide-In Mobile Menu

  SaaS dashboard navbar built with pure HTML and Tailwind CSS.

  JUGENDRA GANGWAR

  3 months ago

  223
• 
  Elegant Animated Drawer (Responsive)

  A static sidebar when the screen is >=lg. It collapses into a drawer when the screen is <lg. Still requires no JavaScript to function (although this example uses a bit of JS).

  Nick Girga

  1 year ago

  2.2k
• 
  gallary

  html , css

  Hacker Development

  1 year ago

  1.6k
• 
  Sticky left sidebar

  Lucas Martinez

  3 years ago

  16k
• 
  gallary

  html , css

  Hacker Development

  1 year ago

  1.6k
• 
  Dashboard sidebar

  farid

  1 year ago

  5.7k
• 
  sidebar

  Abhishek Kumar

  1 year ago

  1.2k
• 
  Creative Agency Navbar with Fullscreen Mobile Menu & Animated CTA

  A bold, editorial-style navigation bar designed for creative agencies, design studios, architecture firms, and portfolio websites. Built with pure HTML and Tailwind CSS, it features a minimalist branding system, fullscreen mobile navigation, animated call-to-action button, responsive layout, and modern typography inspired by premium digital agencies.

  JUGENDRA GANGWAR

  3 months ago

  257
• 
  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.

  nejaa badr

  1 year ago

  5k