Tailwind Sidebar – Easy, Customizable React.js and Next.js Sidebar

Build beautiful and responsive sidebars in seconds! 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

!App Screenshot

#

🧩 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 tailwind-sidebar in a real-world app.


👉 Check it out here: Dashboard Template

Installation

To install tailwind sidebar npm package

``bash
npm i tailwind-sidebar
`

Issues

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

Usage/Examples

`javascript
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";

{
/ if you are using react then import link from /
}
import { Link } from "react-router-dom";
{
/ if you are using nextjs then import link from /
}
import Link from "next/link";

const App = () => {
return (

img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png"
component={Link}
href="/"
>
Adminmart



icon={}
link="/"
badge={true}
badgeType="default"
badgeColor={"bg-secondary"}
isSelected={true}
>
Modern


} link="#">
eCommerce


} link="#">
Analytical




} link="#">
Chat


} link="#">
Calendar




}>
Level 1.1
Level 1.2

}>
Level 2.1
Level 2.2



badge={true}
badgeContent={"outline"}
badgeType="outline"
icon={}
>
Outline


}>
Disabled



);
};

export default App;
`

API Reference

#### Sidebar Api Reference

`http

`

| 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

`http

`

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

#### Submenu Api Reference

`http

`

| Props | Type | Default | Description |
| :------------- | :---------------- | :------------------------ | ------------------------------------------------- |
| title | string | blank | title of the submenu |
| icon | React.ReactNode | Lucide icon - | 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

`http

`

| Props | Type | Default | Description |
| :--------------- | :------------------ | :------------------------ | ------------------------------------------------------------------------------------- |
| icon | React.ReactNode | Lucide icon - | 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

`http

`

| 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:

$3

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 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`.