NextJS Tailwind Sidebar – Easy, Customizable Next.js Sidebar

Build beautiful and responsive sidebars in seconds! Nextjs Tailwind Sidebar is a lightweight and fully customizable sidebar component for React and Next.js projects. It comes with built-in support for light/dark mode, RTL layouts, and easy styling options. Change colors, fonts, and styles effortlessly using Tailwind classes or your own design system.

Perfect for dashboards, admin panels, and SaaS apps where you want speed, flexibility, and style — without writing repetitive code.

Live Demo

Screenshots

🧩 Live Example — Dashboard Template

We’ve built a complete Admin Dashboard Template using this npm package!
It’s the perfect example of how you can use nextjs-tailwind-sidebar in a real-world app.

👉 Check it out here: Dashboard Template

Installation

To install nextjs tailwind sidebar npm package

  npm i tailwind-sidebar

Issues

For any Issues, create new issue on https://github.com/adminmart/nextjs-tailwind-sidebar/issues

Usage/Examples

import React from "react";

import {
  AMSidebar,
  AMMenuItem,
  AMMenu,
  AMSubmenu,
  AMLogo,
} from "tailwind-sidebar";

import {
  Home,
  ShoppingCart,
  BarChart2,
  Calendar,
  MessageCircle,
  ShieldBan,
  Command,
  Layers2,
} from "lucide-react";

import "tailwind-sidebar/styles.css";

import Link from "next/link";

const App = () => {
  return (
    <AMSidebar width={"270px"} collapsible="none" className="bg-sidebar">
      <AMLogo
        img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png"
        component={Link}
        href="/"
      >
        Adminmart
      </AMLogo>

      <AMMenu subHeading="HOME">
        <AMMenuItem
          icon={<Home size={20} />}
          link="/"
          badge={true}
          badgeType="default"
          badgeColor={"bg-secondary"}
          isSelected={true}
        >
          Modern
        </AMMenuItem>

        <AMMenuItem icon={<ShoppingCart size={20} />} link="#">
          eCommerce
        </AMMenuItem>

        <AMMenuItem icon={<BarChart2 size={20} />} link="#">
          Analytical
        </AMMenuItem>
      </AMMenu>

      <AMMenu subHeading="APPS">
        <AMMenuItem icon={<MessageCircle size={20} />} link="#">
          Chat
        </AMMenuItem>

        <AMMenuItem icon={<Calendar size={20} />} link="#">
          Calendar
        </AMMenuItem>
      </AMMenu>

      <AMMenu subHeading="OTHER">
        <AMSubmenu title="Menu Level" icon={<Command size={20} />}>
          <AMMenuItem>Level 1.1</AMMenuItem>
          <AMMenuItem>Level 1.2</AMMenuItem>

          <AMSubmenu title="Level 2" icon={<Command size={20} />}>
            <AMMenuItem>Level 2.1</AMMenuItem>
            <AMMenuItem>Level 2.2</AMMenuItem>
          </AMSubmenu>
        </AMSubmenu>

        <AMMenuItem
          badge={true}
          badgeContent={"outline"}
          badgeType="outline"
          icon={<Layers2 size={20} />}
        >
          Outline
        </AMMenuItem>

        <AMMenuItem disabled={true} icon={<ShieldBan size={20} />}>
          Disabled
        </AMMenuItem>
      </AMMenu>
    </AMSidebar>
  );
};

export default App;

API Reference

Sidebar Api Reference

  <AMSidebar></AMSidebar>

| Props | Type | Default | Description | | :-------------------- | :--------- | :--------------- | --------------------------------------------------------------------------------------- | | width | string | 260px | set the width of sidebar | | textColor | string | #2b2b2b | set this color to all MenuItem and SubMenu of sidebar | | isCollapse | boolean | false | set the Sidebar to mini sidebar | | themeColor | string | #5d87ff | set the theme primary color | | themeSecondaryColor | string | #49beff | set the theme secondary color | | mode | string | light | set the mode of the Sidebar light or Dark | | direction | string | ltr | set the direction of Sidebar ltr or rtl | | userName | string | Mathew | set the user name of User Profile | | designation | string | Designer | set the user designation of User Profile | | showProfile | boolean | true | show the user profile true or false | | userimg | string | user image url | set the image of user in User Profile | | onLogout | function | handleLogout | set the logout function for user logout | | ClassName | string | | set the custom CSS class for Sidebar styling | | collapseWidth | string | 80px | set the width of Sidebar when collapsed | | variant | string | sidebar | set the styling variant of the Sidebar — options: "sidebar", "floating" ,"inset" | | side | string | left | set the position of the Sidebar on screen — options: "left", "right" | | animation | boolean | false | set whether to enable sidebar MenuItem animation effects | | collapsible | string | icon | set the collapse behavior of the Sidebar — options: "offcanvas" , "icon" , "none" | | showTrigger | boolean | false | how or hide the trigger icon for toggling the Sidebar — true to show, false to hide |

Menu Api Reference

  <AMMenu></AMMenu>

| Props | Type | Default | Description | | :----------- | :------- | :------ | ------------------------------------------ | | subHeading | string | menu | menu heading title | | ClassName | string | | set the custom CSS class for each MenuItem |

Submenu Api Reference

  <AMSubmenu></AMSubmenu>

| Props | Type | Default | Description | | :------------- | :---------------- | :------------------------ | ------------------------------------------------- | | title | string | blank | title of the submenu | | icon | React.ReactNode | Lucide icon - <Circle/> | set icon of submenu | | borderRadius | string | rounded-md | set border radius of Submenu | | textFontSize | string | text-sm | set text Font Size of the submenu | | disabled | boolean | false | enable/disable the Submenu | | ClassName | string | | set custom Tailwind CSS class for submenu styling |

MenuItem Api Reference

  <AMMenuItem></AMMenuItem>

| Props | Type | Default | Description | | :--------------- | :------------------ | :------------------------ | ------------------------------------------------------------------------------------- | | icon | React.ReactNode | Lucide icon - <Circle/> | set icon of menu item | | link | string | # | pass link for component to redirect | | component | React.ElementType | Link | set react router link or nextjs Link to apply route | | badge | boolean | false | set the badge on menu items | | badgeColor | string | bg-primary | set badge color | | badgeTextColor | string | #ffffff | set any badge text color | | badgeContent | string | New | set content on badge | | textFontSize | string | text-sm | set font size of menu item | | borderRadius | string | rounded-md | set border radius of menu item | | disabled | boolean | false | enable/disable the menu item | | badgeType | string | filled | set badgeType of menu item filled or outlined | | target | string | `` | set target of menu item _blank | | isSelected | boolean | false | set selected menu item | | ClassName | string | | set custom Tailwind CSS class for the menu item | | variant | string | default | set the visual style variant for the menu item button — options: "default", "outline" | | size | string | default | set the size of the menu item button — options: "default", "sm", "lg" |

Logo Api Reference

  <AMLogo></AMLogo>

| Props | Type | Default | Description | | :----------- | :------------------ | :--------- | --------------------------------------------------- | | img | string | Logo url | set the logo of the sidebar | | href | string | set url | set any url you wanted to redirect | | component | React.ElementType | Link | set react router link or nextjs Link to apply route |

Authors

• @adminmart

🔗 Related Sidebars

Looking for a Material UI alternative to this Tailwind CSS based sidebar?
Explore our companion package below:

React MUI Sidebar

A modern, responsive, and fully customizable sidebar component built with React and Material UI — perfect for creating clean and functional dashboards, admin panels, and web applications.

💡 Both react-mui-sidebar and nextjs-tailwind-sidebar are crafted to simplify sidebar development — offering flexible layouts, effortless customization, and developer-friendly APIs.

Contributing

Contributions are always welcome!

Please adhere to this project's code of conduct.