Sticky left sidebar

Related Examples

• 
  Tailwind Sidebar Layout

  Author:
  Oliver Hansen

  3 years ago

  62k
• 
  Sticky sidebar menu for big screens

  Author:
  Prajwal Hallale

  2 years ago

  12.8k
• 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

  2 years ago

  28k
• 
  Responsive navbar with dark mode support

  Sidebar on small screen devices

  Author:
  TailwindFlex

  3 years ago

  19.7k
• 
  Ticket

  Sirve para ticket

  Author:
  ANGEL EMILIANO MARQUEZ VAZQUEZ

  1 year ago

  1.9k
• 
  Tailwind Sidebar Layout

  Author:
  nejaa badr

  1 year ago

  8.3k
• 
  Sidebar with only icons

  Author:
  Rajesh Maheshwari

  1 year ago

  2.1k
• 
  Material 3 Drawer (Responsive) [Light]

  A sidebar drawer that conforms to Google's Material 3 design guidelines. Static sidebar when the screen is >=lg. Collapses into a drawer when the screen is <lg.

  Author:
  Nick Girga

  9 months ago

  1.3k
• 
  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

  10 months ago

  1.4k
• 
  Daystar Day care Dashboard

  Daystar Day care Dashboard

  Author:
  Paul Livingstone Ssenoga

  1 year ago

  10.3k
• 
  Sidebar Off canvas

  How it Works: Off-Canvas Sidebar Component This component uses HTML5, Tailwind CSS, and Vanilla JavaScript to create a smooth, performant sidebar navigation. The Trigger Mechanism: The Menu Button uses an onclick="toggleSidebar()" event to trigger the opening sequence. We use a semantic <button> tag for accessibility. The UI Structure (HTML & Tailwind): Overlay (#sidebar-overlay): A fixed inset-0 div covers the entire screen with a semi-transparent black background (bg-black/50). It starts hidden and transparent (opacity-0 hidden) to prevent interaction when closed. Sidebar Panel (#sidebar-panel): Positioned with fixed top-0 left-0 h-full, it occupies the full height of the screen. Animation State: We use transform -translate-x-full to hide the panel completely off-screen to the left by default. The transition-transform duration-300 class ensures the sliding movement is smooth. The Logic (JavaScript): The toggleSidebar() function handles the state: Opening: It removes the -translate-x-full class (sliding the panel into view) and removes hidden/opacity-0 from the overlay (fading it in). Closing: It adds the classes back to reverse the animation. Crucially, it uses setTimeout(..., 300) when closing. This delays the hidden class application by 300ms, allowing the CSS fade-out animation to complete fully before the element is removed from the flow. Flexbox Layout: The panel uses flex flex-col to vertically stack the Header, Content, and Footer. The middle section has flex-1 overflow-y-auto, ensuring that if the menu items exceed the screen height, only that area scrolls while the header and footer stay pinned.

  Author:
  Juan D. Cortorreal

  3 months ago

  383
• 
  Sidebar with Tailwind CSs and alpinejs

  Author:
  Michael Andreuzza

  1 year ago

  4k