6 Modern Responsive Sidebar Navigation Components for TailwindCSS

Category: Javascript , Menu & Navigation | April 17, 2025
0 Comment
Authorberkayderin
Last UpdateApril 17, 2025
LicenseMIT
Tags
, ,
Views2,145 views
OfficialGo to website
Live DemoDownload
6 Modern Responsive Sidebar Navigation Components for TailwindCSS

sidebar-components is a collection of six modern, responsive sidebar navigation components built for Tailwind CSS projects.

Think of it as a set of ready-to-use UI patterns for creating a sidebar layout, complete with styling, responsiveness, and basic interactions handled out of the box.

Features:

  • Multiple Themes: Six distinct sidebar patterns (HR, E-commerce, CRM, Deep Panel, Deep ERP, Deep UI) to match different application types.
  • Dark & Light Modes: Built-in theme switching powered by CSS variables and a simple vanilla JavaScript toggle.
  • Responsive Design: Adapts gracefully to different screen sizes, including a mobile-specific header and off-canvas behavior.
  • Tailwind CSS: Uses Tailwind utility classes for styling, making customization familiar if you already use Tailwind.
  • Vanilla JavaScript: Uses minimal, dependency-free JavaScript for interactions like theme switching and mobile menu toggling.
  • Modern UI Elements: Incorporates common patterns like icon integration (Feather Icons), badges, search inputs, and user profile sections.

Preview:

How to Use It:

1. Review the demo pages to select the visual style that fits your project.

  • HR Dashboard – A green-themed sidebar designed for human resources management
  • E-commerce Panel – A stylish orange-themed sidebar for online store management
  • CRM Dashboard – A modern blue sidebar for customer relationship management
  • Deep Panel – A general-purpose sidebar with a yellow-green theme
  • Deep ERP – A blue gradient sidebar for enterprise resource planning
  • Deep UI – A modern sidebar with a blue-themed main UI design

2. Grab the entire HTML structure for the chosen sidebar. This includes the main sidebar div (e.g., #sidebar), the mobile header (if needed), the main content area wrapper, and the overlay div for mobile. Pay attention to the id attributes used by the JavaScript (#sidebar, #theme-toggle, #mobile-menu-button, #close-sidebar, #overlay).

3. Copy CSS:

  • CSS Variables: The core of the theming lies in the CSS variables defined within the :root, .light, and .dark selectors in the <style> block. Copy these definitions into your main CSS file. You’ll likely want to integrate these variables into your existing Tailwind configuration or global CSS.
  • Component Styles: Copy the specific component CSS classes (e.g., .deep-ui-sidebar, .deep-ui-card, .deep-ui-button, .theme-switch, .badge-*, etc.). These rely on the CSS variables and Tailwind utilities. Ensure your Tailwind build process picks up the utility classes used in the HTML.

4. Copy JavaScript: Add the JavaScript code, typically placed before the closing </body> tag. This script handles:

  • Feather Icons: Calls feather.replace() to render icons. Make sure you include the Feather Icons library script (https://unpkg.com/feather-icons).
  • Theme Switching: Attaches event listeners to the theme toggle buttons (#theme-toggle, #mobile-theme-toggle). It checks localStorage for a saved theme preference or uses the system preference, adds/removes the dark class on the <html> element, and saves the preference.
  • Mobile Menu: Adds event listeners to the mobile menu button (#mobile-menu-button), close button (#close-sidebar), and overlay (#overlay) to toggle the sidebar’s visibility on smaller screens using transform classes (-translate-x-full) and managing the overlay display. It also includes a resize listener to handle transitions between mobile and desktop views correctly.

5. Tailwind Setup: Ensure your project is set up with Tailwind CSS. The components rely heavily on Tailwind utility classes. You might need to adjust your tailwind.config.js if you want to customize colors or other theme aspects beyond the provided CSS variables.

See Also:

You Might Be Interested In:

Leave a Reply