Tailwind Sidebar Component with React and TypeScript for Dashboards

A sidebar is a crucial UI element for dashboards, admin panels, and CMS applications. It helps users navigate through sections effortlessly, enhancing usability and design. In this article, you will get the code for sidebar built with React, TypeScript, and Tailwind CSS.

This sidebar component includes:

• Dynamic icons using lucide-react
• Customizable sections for menus and settings
• A sleek, responsive design for modern web applications

We’ll also explain the code in detail and provide examples of where you can use this component.

Where to Use This Sidebar Component?

This sidebar is perfect for:

1. Dashboards: Enhance navigation in your data-driven apps.
2. Admin Panels: Organize settings and management tools.
3. CMS: Improve content accessibility for admins.

Code for React Tailwind Sidebar

Below is the complete code for the sidebar component. It is modular, making it easy to integrate into your project.

React Tailwind Sidebar Code

Copy
1import { LucideProps } from 'lucide-react'
2import dynamicIconImports from 'lucide-react/dynamicIconImports'
3import { lazy, Suspense } from 'react'
4
5interface Item {
6  title: string
7  iconName: keyof typeof dynamicIconImports
8  href: string
9}
10
11const menuItems: Item[] = [
12  { title: 'Dashboard', iconName: 'square-kanban', href: '/' },
13  { title: 'Food Order', iconName: 'shopping-cart', href: '/' },
14  { title: 'Manage Menu', iconName: 'file-text', href: '/' },
15  { title: 'Customer Review', iconName: 'message-circle-more', href: '/' },
16]
17
18const othersItems: Item[] = [
19  { title: 'Settings', iconName: 'settings', href: '/' },
20  { title: 'Payment', iconName: 'wallet', href: '/' },
21  { title: 'Accounts', iconName: 'user-round', href: '/' },
22  { title: 'Help', iconName: 'info', href: '/' },
23]
24
25const Sidebar = () => (
26  <aside className="h-dvh max-w-[240px] bg-[#F1F2F7]">
27    <h1 className="border-b border-[#C8CBD9] p-5 pl-10 text-2xl font-bold text-[#5A67BA]">
28      LOGO
29    </h1>
30    <nav className="p-4 md:p-5">
31      <SidebarSection title="MENU" items={menuItems} />
32      <SidebarSection title="OTHERS" items={othersItems} />
33    </nav>
34  </aside>
35)
36
37const SidebarSection = ({ title, items }: { title: string; items: Item[] }) => (
38  <>
39    <h3 className="mx-5 mb-3 mt-10 text-xs text-[#777da3]">{title}</h3>
40    {items.map((item, idx) => (
41      <SidebarItem
42        key={idx}
43        title={item.title}
44        iconName={item.iconName}
45        href={item.href}
46      />
47    ))}
48  </>
49)
50
51const fallback = <div style={{ background: '#ddd', width: 18, height: 18 }} />
52
53interface PropsType extends Omit<LucideProps, 'ref'> {
54  title: string
55  iconName: keyof typeof dynamicIconImports
56  href: string
57}
58
59const SidebarItem: React.FC<PropsType> = ({ title, iconName, href }) => {
60  const Icon = lazy(dynamicIconImports[iconName])
61
62  const isActive = false
63
64  return (
65    <a
66      href={href}
67      className={`group flex items-center gap-3 rounded px-4 py-3 transition-all duration-300 hover:bg-[#DEE1F4] hover:text-[#5A6ACF] md:px-5 ${isActive ? 'bg-[#DEE1F4] font-medium text-[#5A6ACF]' : 'font-normal text-[#777da3]'}`}
68    >
69      <Suspense fallback={fallback}>
70        <Icon
71          size={18}
72          className={`${isActive ? '#5A6ACF' : '#A6ABC8'} text-[#A6ABC8] transition-all duration-300 group-hover:text-[#5A6ACF]`}
73        />
74      </Suspense>
75      <h3 className="text-sm leading-4">{title}</h3>
76    </a>
77  )
78}
79
80export default Sidebar

Breaking Down the Code

This sidebar component is split into three main parts:

1. Main Sidebar Component

The Sidebar component is the main container. It structures the layout, applies styles, and renders sections like the logo and navigation menu.

2. Sidebar Section Component

The SidebarSection component organizes items into categories. It takes title and items as props, allowing you to define sections like “Menu” and “Others.”

3. Sidebar Item Component

The SidebarItem component represents each menu item. It includes:

• Dynamic Icons: Icons are dynamically loaded using lucide-react.
• Hover Effects: Tailwind CSS transitions for a smooth user experience.
• Active States: Highlight the current section.

Example Use Cases

1. Dashboard Application

Use this sidebar to organize sections like analytics, reports, and user management.

2. Food Delivery App Admin Panel

Manage orders, menus, and customer reviews with intuitive navigation.

3. SaaS CMS

Easily switch between content categories, user settings, and app configurations.

Feel free to copy and customize this component to suit your needs. Let us know how it works for your project!