Tailwind CSS Sidebar - React

Use our React and Tailwind CSS sidebar example to display a sidenav menu in your web projects.

See below our beautiful sidebar examples that you can use in your Tailwind CSS and React project. The examples also comes in different styles so you can adapt it easily to your needs.

Sidebar Demo

Use thie sidebar example to create a simple sidebar component for displaying a sidenav in your website, this is useful for dashboard layouts and admin panels.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

Material Tailwind

  • Inbox
    14
  • Sent
  • Drafts
  • Pins
  • Archive
  • Trash
"use client";

import { Card, List, Typography, Chip } from "@material-tailwind/react";
import {
  Archive,
  EmptyPage,
  Mail,
  Pin,
  SendDiagonal,
  Bin,
} from "iconoir-react";

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: SendDiagonal,
    title: "Sent",
    href: "#",
  },
  {
    icon: EmptyPage,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Bin,
    title: "Trash",
    href: "#",
  },
];

export function SidebarDemo() {
  return (
    <Card className="max-w-[280px]">
      <Card.Header className="mx-4 mb-0 mt-3 h-max">
        <Typography className="font-semibold">Material Tailwind</Typography>
      </Card.Header>
      <Card.Body className="p-3">
        <List>
          {Links.map(({ icon: Icon, title, href, badge }) => (
            <List.Item key={title} href={href}>
              <List.ItemStart>
                <Icon className="h-[18px] w-[18px]" />
              </List.ItemStart>
              {title}
              {badge && (
                <List.ItemEnd>
                  <Chip size="sm" variant="ghost">
                    <Chip.Label>{badge}</Chip.Label>
                  </Chip>
                </List.ItemEnd>
              )}
            </List.Item>
          ))}
        </List>
      </Card.Body>
    </Card>
  );
}
"use client";

import { Card, List, Typography, Chip } from "@material-tailwind/react";
import {
  Archive,
  EmptyPage,
  Mail,
  Pin,
  SendDiagonal,
  Bin,
} from "iconoir-react";

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: SendDiagonal,
    title: "Sent",
    href: "#",
  },
  {
    icon: EmptyPage,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Bin,
    title: "Trash",
    href: "#",
  },
];

export function SidebarDemo() {
  return (
    <Card className="max-w-[280px]">
      <Card.Header className="mx-4 mb-0 mt-3 h-max">
        <Typography className="font-semibold">Material Tailwind</Typography>
      </Card.Header>
      <Card.Body className="p-3">
        <List>
          {Links.map(({ icon: Icon, title, href, badge }) => (
            <List.Item key={title} href={href}>
              <List.ItemStart>
                <Icon className="h-[18px] w-[18px]" />
              </List.ItemStart>
              {title}
              {badge && (
                <List.ItemEnd>
                  <Chip size="sm" variant="ghost">
                    <Chip.Label>{badge}</Chip.Label>
                  </Chip>
                </List.ItemEnd>
              )}
            </List.Item>
          ))}
        </List>
      </Card.Body>
    </Card>
  );
}

Multi Level Sidebar

Use this sidebar example to create a multi-level sidebar component, this is useful for displaying nested menus in the sidebar.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

Material Tailwind

  • Inbox
    14
  • Sent
  • Drafts
  • Pins
  • Archive
  • Trash
  • More
"use client";

import * as React from "react";
import {
  Card,
  List,
  Typography,
  Chip,
  Collapse,
} from "@material-tailwind/react";
import {
  Archive,
  EmptyPage,
  Folder,
  Mail,
  MoreHorizCircle,
  NavArrowRight,
  Pin,
  SendDiagonal,
  Bin,
  UserXmark,
} from "iconoir-react";

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: SendDiagonal,
    title: "Sent",
    href: "#",
  },
  {
    icon: EmptyPage,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Bin,
    title: "Trash",
    href: "#",
  },
];

export function MultiLevelSidebar() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <Card className="max-w-[280px]">
      <Card.Header className="mx-4 mb-0 mt-3 h-max">
        <Typography className="font-semibold">Material Tailwind</Typography>
      </Card.Header>
      <Card.Body className="p-3">
        <List>
          {Links.map(({ icon: Icon, title, href, badge }) => (
            <List.Item key={title} href={href}>
              <List.ItemStart>
                <Icon className="h-[18px] w-[18px]" />
              </List.ItemStart>
              {title}
              {badge && (
                <List.ItemEnd>
                  <Chip size="sm" variant="ghost">
                    <Chip.Label>{badge}</Chip.Label>
                  </Chip>
                </List.ItemEnd>
              )}
            </List.Item>
          ))}
          <List.Item onClick={() => setIsOpen((cur) => !cur)}>
            <List.ItemStart>
              <MoreHorizCircle className="h-[18px] w-[18px]" />
            </List.ItemStart>
            More
            <List.ItemEnd>
              <NavArrowRight
                className={`h-4 w-4 ${isOpen ? "rotate-90" : ""}`}
              />
            </List.ItemEnd>
          </List.Item>
          <Collapse open={isOpen}>
            <List>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Spam
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <UserXmark className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Blocked
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Important
              </List.Item>
            </List>
          </Collapse>
        </List>
      </Card.Body>
    </Card>
  );
}
"use client";

import * as React from "react";
import {
  Card,
  List,
  Typography,
  Chip,
  Collapse,
} from "@material-tailwind/react";
import {
  Archive,
  EmptyPage,
  Folder,
  Mail,
  MoreHorizCircle,
  NavArrowRight,
  Pin,
  SendDiagonal,
  Bin,
  UserXmark,
} from "iconoir-react";

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: SendDiagonal,
    title: "Sent",
    href: "#",
  },
  {
    icon: EmptyPage,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Bin,
    title: "Trash",
    href: "#",
  },
];

export function MultiLevelSidebar() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <Card className="max-w-[280px]">
      <Card.Header className="mx-4 mb-0 mt-3 h-max">
        <Typography className="font-semibold">Material Tailwind</Typography>
      </Card.Header>
      <Card.Body className="p-3">
        <List>
          {Links.map(({ icon: Icon, title, href, badge }) => (
            <List.Item key={title} href={href}>
              <List.ItemStart>
                <Icon className="h-[18px] w-[18px]" />
              </List.ItemStart>
              {title}
              {badge && (
                <List.ItemEnd>
                  <Chip size="sm" variant="ghost">
                    <Chip.Label>{badge}</Chip.Label>
                  </Chip>
                </List.ItemEnd>
              )}
            </List.Item>
          ))}
          <List.Item onClick={() => setIsOpen((cur) => !cur)}>
            <List.ItemStart>
              <MoreHorizCircle className="h-[18px] w-[18px]" />
            </List.ItemStart>
            More
            <List.ItemEnd>
              <NavArrowRight
                className={`h-4 w-4 ${isOpen ? "rotate-90" : ""}`}
              />
            </List.ItemEnd>
          </List.Item>
          <Collapse open={isOpen}>
            <List>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Spam
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <UserXmark className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Blocked
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Important
              </List.Item>
            </List>
          </Collapse>
        </List>
      </Card.Body>
    </Card>
  );
}

Sidebar with Content Separator

Use this sidebar example to create a sidebar with separators, this is useful when you want to categorize links and content in the sidebar.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

Material Tailwind

  • Inbox
    14
  • Sent
  • Drafts
  • Pins
  • Archive
  • Trash
  • More
  • Logout
"use client";

import * as React from "react";
import {
  Card,
  List,
  Typography,
  Chip,
  Collapse,
} from "@material-tailwind/react";
import {
  Archive,
  EmptyPage,
  Folder,
  LogOut,
  Mail,
  MoreHorizCircle,
  NavArrowRight,
  Pin,
  SendDiagonal,
  Bin,
  UserXmark,
} from "iconoir-react";

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: SendDiagonal,
    title: "Sent",
    href: "#",
  },
  {
    icon: EmptyPage,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Bin,
    title: "Trash",
    href: "#",
  },
];

export function SidebarWithContentSeparator() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <Card className="max-w-[280px]">
      <Card.Header className="mx-4 mb-0 mt-3 h-max">
        <Typography className="font-semibold">Material Tailwind</Typography>
      </Card.Header>
      <Card.Body className="p-3">
        <List>
          {Links.map(({ icon: Icon, title, href, badge }) => (
            <List.Item key={title} href={href}>
              <List.ItemStart>
                <Icon className="h-[18px] w-[18px]" />
              </List.ItemStart>
              {title}
              {badge && (
                <List.ItemEnd>
                  <Chip size="sm" variant="ghost">
                    <Chip.Label>{badge}</Chip.Label>
                  </Chip>
                </List.ItemEnd>
              )}
            </List.Item>
          ))}
          <hr className="-mx-3 my-3 border-secondary" />
          <List.Item onClick={() => setIsOpen((cur) => !cur)}>
            <List.ItemStart>
              <MoreHorizCircle className="h-[18px] w-[18px]" />
            </List.ItemStart>
            More
            <List.ItemEnd>
              <NavArrowRight
                className={`h-4 w-4 ${isOpen ? "rotate-90" : ""}`}
              />
            </List.ItemEnd>
          </List.Item>
          <Collapse open={isOpen}>
            <List>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Spam
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <UserXmark className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Blocked
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Important
              </List.Item>
            </List>
          </Collapse>
          <hr className="-mx-3 my-3 border-secondary" />
          <List.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error">
            <List.ItemStart>
              <LogOut className="h-[18px] w-[18px]" />
            </List.ItemStart>
            Logout
          </List.Item>
        </List>
      </Card.Body>
    </Card>
  );
}
"use client";

import * as React from "react";
import {
  Card,
  List,
  Typography,
  Chip,
  Collapse,
} from "@material-tailwind/react";
import {
  Archive,
  EmptyPage,
  Folder,
  LogOut,
  Mail,
  MoreHorizCircle,
  NavArrowRight,
  Pin,
  SendDiagonal,
  Bin,
  UserXmark,
} from "iconoir-react";

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: SendDiagonal,
    title: "Sent",
    href: "#",
  },
  {
    icon: EmptyPage,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Bin,
    title: "Trash",
    href: "#",
  },
];

export function SidebarWithContentSeparator() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <Card className="max-w-[280px]">
      <Card.Header className="mx-4 mb-0 mt-3 h-max">
        <Typography className="font-semibold">Material Tailwind</Typography>
      </Card.Header>
      <Card.Body className="p-3">
        <List>
          {Links.map(({ icon: Icon, title, href, badge }) => (
            <List.Item key={title} href={href}>
              <List.ItemStart>
                <Icon className="h-[18px] w-[18px]" />
              </List.ItemStart>
              {title}
              {badge && (
                <List.ItemEnd>
                  <Chip size="sm" variant="ghost">
                    <Chip.Label>{badge}</Chip.Label>
                  </Chip>
                </List.ItemEnd>
              )}
            </List.Item>
          ))}
          <hr className="-mx-3 my-3 border-secondary" />
          <List.Item onClick={() => setIsOpen((cur) => !cur)}>
            <List.ItemStart>
              <MoreHorizCircle className="h-[18px] w-[18px]" />
            </List.ItemStart>
            More
            <List.ItemEnd>
              <NavArrowRight
                className={`h-4 w-4 ${isOpen ? "rotate-90" : ""}`}
              />
            </List.ItemEnd>
          </List.Item>
          <Collapse open={isOpen}>
            <List>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Spam
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <UserXmark className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Blocked
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Important
              </List.Item>
            </List>
          </Collapse>
          <hr className="-mx-3 my-3 border-secondary" />
          <List.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error">
            <List.ItemStart>
              <LogOut className="h-[18px] w-[18px]" />
            </List.ItemStart>
            Logout
          </List.Item>
        </List>
      </Card.Body>
    </Card>
  );
}

Sidebar with CTA

Use this sidebar example to create a sidebar with a call to action card at the bottom, this is useful when you want to promote a product or service in your website.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

Material Tailwind

  • Inbox
    14
  • Sent
  • Drafts
  • Pins
  • Archive
  • Trash
  • More
  • Logout
Upgrade to PRO
Upgrade to Material Tailwind PRO and get even more components, plugins, advanced features and premium.
Upgrade Now
"use client";

import * as React from "react";
import {
  Card,
  List,
  Typography,
  Chip,
  Collapse,
  Button,
} from "@material-tailwind/react";
import {
  Archive,
  EmptyPage,
  Folder,
  LogOut,
  Mail,
  MoreHorizCircle,
  NavArrowRight,
  Pin,
  SelectFace3d,
  SendDiagonal,
  Bin,
  UserXmark,
} from "iconoir-react";

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: SendDiagonal,
    title: "Sent",
    href: "#",
  },
  {
    icon: EmptyPage,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Bin,
    title: "Trash",
    href: "#",
  },
];

export function SidebarWithCta() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <Card className="max-w-[280px]">
      <Card.Header className="mx-4 mb-0 mt-3 h-max">
        <Typography className="font-semibold">Material Tailwind</Typography>
      </Card.Header>
      <Card.Body className="p-3">
        <List>
          {Links.map(({ icon: Icon, title, href, badge }) => (
            <List.Item key={title} href={href}>
              <List.ItemStart>
                <Icon className="h-[18px] w-[18px]" />
              </List.ItemStart>
              {title}
              {badge && (
                <List.ItemEnd>
                  <Chip size="sm" variant="ghost">
                    <Chip.Label>{badge}</Chip.Label>
                  </Chip>
                </List.ItemEnd>
              )}
            </List.Item>
          ))}
          <hr className="-mx-3 my-3 border-secondary" />
          <List.Item onClick={() => setIsOpen((cur) => !cur)}>
            <List.ItemStart>
              <MoreHorizCircle className="h-[18px] w-[18px]" />
            </List.ItemStart>
            More
            <List.ItemEnd>
              <NavArrowRight
                className={`h-4 w-4 ${isOpen ? "rotate-90" : ""}`}
              />
            </List.ItemEnd>
          </List.Item>
          <Collapse open={isOpen}>
            <List>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Spam
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <UserXmark className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Blocked
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Important
              </List.Item>
            </List>
          </Collapse>
          <hr className="-mx-3 my-3 border-secondary" />
          <List.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error">
            <List.ItemStart>
              <LogOut className="h-[18px] w-[18px]" />
            </List.ItemStart>
            Logout
          </List.Item>
        </List>
      </Card.Body>
      <Card.Footer className="mt-8">
        <Card color="primary" className="shadow-none">
          <Card.Header className="m-3">
            <SelectFace3d className="h-10 w-10 text-primary-foreground" />
          </Card.Header>
          <Card.Body>
            <Typography type="h6" className="mb-1 text-white">
              Upgrade to PRO
            </Typography>
            <Typography type="small" className="text-white/80">
              Upgrade to Material Tailwind PRO and get even more components,
              plugins, advanced features and premium.
            </Typography>
          </Card.Body>
          <Card.Footer>
            <Button
              size="sm"
              as="a"
              href="#"
              className="border-white bg-white text-black hover:border-white hover:bg-white hover:text-black"
            >
              Upgrade Now
            </Button>
          </Card.Footer>
        </Card>
      </Card.Footer>
    </Card>
  );
}
"use client";

import * as React from "react";
import {
  Card,
  List,
  Typography,
  Chip,
  Collapse,
  Button,
} from "@material-tailwind/react";
import {
  Archive,
  EmptyPage,
  Folder,
  LogOut,
  Mail,
  MoreHorizCircle,
  NavArrowRight,
  Pin,
  SelectFace3d,
  SendDiagonal,
  Bin,
  UserXmark,
} from "iconoir-react";

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: SendDiagonal,
    title: "Sent",
    href: "#",
  },
  {
    icon: EmptyPage,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Bin,
    title: "Trash",
    href: "#",
  },
];

export function SidebarWithCta() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <Card className="max-w-[280px]">
      <Card.Header className="mx-4 mb-0 mt-3 h-max">
        <Typography className="font-semibold">Material Tailwind</Typography>
      </Card.Header>
      <Card.Body className="p-3">
        <List>
          {Links.map(({ icon: Icon, title, href, badge }) => (
            <List.Item key={title} href={href}>
              <List.ItemStart>
                <Icon className="h-[18px] w-[18px]" />
              </List.ItemStart>
              {title}
              {badge && (
                <List.ItemEnd>
                  <Chip size="sm" variant="ghost">
                    <Chip.Label>{badge}</Chip.Label>
                  </Chip>
                </List.ItemEnd>
              )}
            </List.Item>
          ))}
          <hr className="-mx-3 my-3 border-secondary" />
          <List.Item onClick={() => setIsOpen((cur) => !cur)}>
            <List.ItemStart>
              <MoreHorizCircle className="h-[18px] w-[18px]" />
            </List.ItemStart>
            More
            <List.ItemEnd>
              <NavArrowRight
                className={`h-4 w-4 ${isOpen ? "rotate-90" : ""}`}
              />
            </List.ItemEnd>
          </List.Item>
          <Collapse open={isOpen}>
            <List>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Spam
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <UserXmark className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Blocked
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Important
              </List.Item>
            </List>
          </Collapse>
          <hr className="-mx-3 my-3 border-secondary" />
          <List.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error">
            <List.ItemStart>
              <LogOut className="h-[18px] w-[18px]" />
            </List.ItemStart>
            Logout
          </List.Item>
        </List>
      </Card.Body>
      <Card.Footer className="mt-8">
        <Card color="primary" className="shadow-none">
          <Card.Header className="m-3">
            <SelectFace3d className="h-10 w-10 text-primary-foreground" />
          </Card.Header>
          <Card.Body>
            <Typography type="h6" className="mb-1 text-white">
              Upgrade to PRO
            </Typography>
            <Typography type="small" className="text-white/80">
              Upgrade to Material Tailwind PRO and get even more components,
              plugins, advanced features and premium.
            </Typography>
          </Card.Body>
          <Card.Footer>
            <Button
              size="sm"
              as="a"
              href="#"
              className="border-white bg-white text-black hover:border-white hover:bg-white hover:text-black"
            >
              Upgrade Now
            </Button>
          </Card.Footer>
        </Card>
      </Card.Footer>
    </Card>
  );
}

Use this sidebar example to create a sidebar with a logo at the top, this is useful when you want to display your brand logo in the sidebar.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

brand

Material Tailwind

  • Inbox
    14
  • Sent
  • Drafts
  • Pins
  • Archive
  • Trash
  • More
  • Logout
Upgrade to PRO
Upgrade to Material Tailwind PRO and get even more components, plugins, advanced features and premium.
Upgrade Now
"use client";

import * as React from "react";
import {
  Card,
  List,
  Typography,
  Chip,
  Collapse,
  Button,
  Avatar,
} from "@material-tailwind/react";
import {
  Archive,
  EmptyPage,
  Folder,
  LogOut,
  Mail,
  MoreHorizCircle,
  NavArrowRight,
  Pin,
  SelectFace3d,
  SendDiagonal,
  Bin,
  UserXmark,
} from "iconoir-react";

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: SendDiagonal,
    title: "Sent",
    href: "#",
  },
  {
    icon: EmptyPage,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Bin,
    title: "Trash",
    href: "#",
  },
];

export function SidebarWithLogo() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <Card className="max-w-[280px]">
      <Card.Header className="mx-3 mb-0 mt-3 flex h-max items-center gap-2">
        <Avatar size="xs" src="/logo.png" alt="brand" />
        <Typography className="font-semibold">Material Tailwind</Typography>
      </Card.Header>
      <Card.Body className="p-3">
        <List>
          {Links.map(({ icon: Icon, title, href, badge }) => (
            <List.Item key={title} href={href}>
              <List.ItemStart>
                <Icon className="h-[18px] w-[18px]" />
              </List.ItemStart>
              {title}
              {badge && (
                <List.ItemEnd>
                  <Chip size="sm" variant="ghost">
                    <Chip.Label>{badge}</Chip.Label>
                  </Chip>
                </List.ItemEnd>
              )}
            </List.Item>
          ))}
          <hr className="-mx-3 my-3 border-secondary" />
          <List.Item onClick={() => setIsOpen((cur) => !cur)}>
            <List.ItemStart>
              <MoreHorizCircle className="h-[18px] w-[18px]" />
            </List.ItemStart>
            More
            <List.ItemEnd>
              <NavArrowRight
                className={`h-4 w-4 ${isOpen ? "rotate-90" : ""}`}
              />
            </List.ItemEnd>
          </List.Item>
          <Collapse open={isOpen}>
            <List>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Spam
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <UserXmark className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Blocked
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Important
              </List.Item>
            </List>
          </Collapse>
          <hr className="-mx-3 my-3 border-secondary" />
          <List.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error">
            <List.ItemStart>
              <LogOut className="h-[18px] w-[18px]" />
            </List.ItemStart>
            Logout
          </List.Item>
        </List>
      </Card.Body>
      <Card.Footer className="mt-8">
        <Card color="primary" className="shadow-none">
          <Card.Header className="m-3">
            <SelectFace3d className="h-10 w-10 text-primary-foreground" />
          </Card.Header>
          <Card.Body>
            <Typography type="h6" className="mb-1 text-white">
              Upgrade to PRO
            </Typography>
            <Typography type="small" className="text-white/80">
              Upgrade to Material Tailwind PRO and get even more components,
              plugins, advanced features and premium.
            </Typography>
          </Card.Body>
          <Card.Footer>
            <Button
              size="sm"
              as="a"
              href="#"
              className="border-white bg-white text-black hover:border-white hover:bg-white hover:text-black"
            >
              Upgrade Now
            </Button>
          </Card.Footer>
        </Card>
      </Card.Footer>
    </Card>
  );
}
"use client";

import * as React from "react";
import {
  Card,
  List,
  Typography,
  Chip,
  Collapse,
  Button,
  Avatar,
} from "@material-tailwind/react";
import {
  Archive,
  EmptyPage,
  Folder,
  LogOut,
  Mail,
  MoreHorizCircle,
  NavArrowRight,
  Pin,
  SelectFace3d,
  SendDiagonal,
  Bin,
  UserXmark,
} from "iconoir-react";

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: SendDiagonal,
    title: "Sent",
    href: "#",
  },
  {
    icon: EmptyPage,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Bin,
    title: "Trash",
    href: "#",
  },
];

export function SidebarWithLogo() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <Card className="max-w-[280px]">
      <Card.Header className="mx-3 mb-0 mt-3 flex h-max items-center gap-2">
        <Avatar size="xs" src="/logo.png" alt="brand" />
        <Typography className="font-semibold">Material Tailwind</Typography>
      </Card.Header>
      <Card.Body className="p-3">
        <List>
          {Links.map(({ icon: Icon, title, href, badge }) => (
            <List.Item key={title} href={href}>
              <List.ItemStart>
                <Icon className="h-[18px] w-[18px]" />
              </List.ItemStart>
              {title}
              {badge && (
                <List.ItemEnd>
                  <Chip size="sm" variant="ghost">
                    <Chip.Label>{badge}</Chip.Label>
                  </Chip>
                </List.ItemEnd>
              )}
            </List.Item>
          ))}
          <hr className="-mx-3 my-3 border-secondary" />
          <List.Item onClick={() => setIsOpen((cur) => !cur)}>
            <List.ItemStart>
              <MoreHorizCircle className="h-[18px] w-[18px]" />
            </List.ItemStart>
            More
            <List.ItemEnd>
              <NavArrowRight
                className={`h-4 w-4 ${isOpen ? "rotate-90" : ""}`}
              />
            </List.ItemEnd>
          </List.Item>
          <Collapse open={isOpen}>
            <List>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Spam
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <UserXmark className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Blocked
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Important
              </List.Item>
            </List>
          </Collapse>
          <hr className="-mx-3 my-3 border-secondary" />
          <List.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error">
            <List.ItemStart>
              <LogOut className="h-[18px] w-[18px]" />
            </List.ItemStart>
            Logout
          </List.Item>
        </List>
      </Card.Body>
      <Card.Footer className="mt-8">
        <Card color="primary" className="shadow-none">
          <Card.Header className="m-3">
            <SelectFace3d className="h-10 w-10 text-primary-foreground" />
          </Card.Header>
          <Card.Body>
            <Typography type="h6" className="mb-1 text-white">
              Upgrade to PRO
            </Typography>
            <Typography type="small" className="text-white/80">
              Upgrade to Material Tailwind PRO and get even more components,
              plugins, advanced features and premium.
            </Typography>
          </Card.Body>
          <Card.Footer>
            <Button
              size="sm"
              as="a"
              href="#"
              className="border-white bg-white text-black hover:border-white hover:bg-white hover:text-black"
            >
              Upgrade Now
            </Button>
          </Card.Footer>
        </Card>
      </Card.Footer>
    </Card>
  );
}

Sidebar with Search

Use this sidebar example to create a sidebar with a search input at the top, this is useful when you want to allow users to search for content in the website.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

brand

Material Tailwind

  • Inbox
    14
  • Sent
  • Drafts
  • Pins
  • Archive
  • Trash
  • More
  • Logout
Upgrade to PRO
Upgrade to Material Tailwind PRO and get even more components, plugins, advanced features and premium.
Upgrade Now
"use client";

import * as React from "react";
import {
  Card,
  List,
  Typography,
  Chip,
  Collapse,
  Button,
  Input,
  Avatar,
} from "@material-tailwind/react";
import {
  Archive,
  EmptyPage,
  Folder,
  LogOut,
  Mail,
  MoreHorizCircle,
  NavArrowRight,
  Pin,
  Search,
  SelectFace3d,
  SendDiagonal,
  Bin,
  UserXmark,
} from "iconoir-react";

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: SendDiagonal,
    title: "Sent",
    href: "#",
  },
  {
    icon: EmptyPage,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Bin,
    title: "Trash",
    href: "#",
  },
];

export function SidebarWithSearch() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <Card className="max-w-[280px]">
      <Card.Header className="mx-3 mb-0 mt-3 flex h-max items-center gap-2">
        <Avatar size="xs" src="/logo.png" alt="brand" />
        <Typography className="font-semibold">Material Tailwind</Typography>
      </Card.Header>
      <Card.Body className="p-3">
        <Input type="search" placeholder="Search here...">
          <Input.Icon>
            <Search className="h-full w-full" />
          </Input.Icon>
        </Input>
        <List className="mt-3">
          {Links.map(({ icon: Icon, title, href, badge }) => (
            <List.Item key={title} href={href}>
              <List.ItemStart>
                <Icon className="h-[18px] w-[18px]" />
              </List.ItemStart>
              {title}
              {badge && (
                <List.ItemEnd>
                  <Chip size="sm" variant="ghost">
                    <Chip.Label>{badge}</Chip.Label>
                  </Chip>
                </List.ItemEnd>
              )}
            </List.Item>
          ))}
          <hr className="-mx-3 my-3 border-secondary" />
          <List.Item onClick={() => setIsOpen((cur) => !cur)}>
            <List.ItemStart>
              <MoreHorizCircle className="h-[18px] w-[18px]" />
            </List.ItemStart>
            More
            <List.ItemEnd>
              <NavArrowRight
                className={`h-4 w-4 ${isOpen ? "rotate-90" : ""}`}
              />
            </List.ItemEnd>
          </List.Item>
          <Collapse open={isOpen}>
            <List>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Spam
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <UserXmark className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Blocked
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Important
              </List.Item>
            </List>
          </Collapse>
          <hr className="-mx-3 my-3 border-secondary" />
          <List.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error">
            <List.ItemStart>
              <LogOut className="h-[18px] w-[18px]" />
            </List.ItemStart>
            Logout
          </List.Item>
        </List>
      </Card.Body>
      <Card.Footer className="mt-8">
        <Card color="primary" className="shadow-none">
          <Card.Header className="m-3">
            <SelectFace3d className="h-10 w-10 text-primary-foreground" />
          </Card.Header>
          <Card.Body>
            <Typography type="h6" className="mb-1 text-white">
              Upgrade to PRO
            </Typography>
            <Typography type="small" className="text-white/80">
              Upgrade to Material Tailwind PRO and get even more components,
              plugins, advanced features and premium.
            </Typography>
          </Card.Body>
          <Card.Footer>
            <Button
              size="sm"
              as="a"
              href="#"
              className="border-white bg-white text-black hover:border-white hover:bg-white hover:text-black"
            >
              Upgrade Now
            </Button>
          </Card.Footer>
        </Card>
      </Card.Footer>
    </Card>
  );
}
"use client";

import * as React from "react";
import {
  Card,
  List,
  Typography,
  Chip,
  Collapse,
  Button,
  Input,
  Avatar,
} from "@material-tailwind/react";
import {
  Archive,
  EmptyPage,
  Folder,
  LogOut,
  Mail,
  MoreHorizCircle,
  NavArrowRight,
  Pin,
  Search,
  SelectFace3d,
  SendDiagonal,
  Bin,
  UserXmark,
} from "iconoir-react";

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: SendDiagonal,
    title: "Sent",
    href: "#",
  },
  {
    icon: EmptyPage,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Bin,
    title: "Trash",
    href: "#",
  },
];

export function SidebarWithSearch() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <Card className="max-w-[280px]">
      <Card.Header className="mx-3 mb-0 mt-3 flex h-max items-center gap-2">
        <Avatar size="xs" src="/logo.png" alt="brand" />
        <Typography className="font-semibold">Material Tailwind</Typography>
      </Card.Header>
      <Card.Body className="p-3">
        <Input type="search" placeholder="Search here...">
          <Input.Icon>
            <Search className="h-full w-full" />
          </Input.Icon>
        </Input>
        <List className="mt-3">
          {Links.map(({ icon: Icon, title, href, badge }) => (
            <List.Item key={title} href={href}>
              <List.ItemStart>
                <Icon className="h-[18px] w-[18px]" />
              </List.ItemStart>
              {title}
              {badge && (
                <List.ItemEnd>
                  <Chip size="sm" variant="ghost">
                    <Chip.Label>{badge}</Chip.Label>
                  </Chip>
                </List.ItemEnd>
              )}
            </List.Item>
          ))}
          <hr className="-mx-3 my-3 border-secondary" />
          <List.Item onClick={() => setIsOpen((cur) => !cur)}>
            <List.ItemStart>
              <MoreHorizCircle className="h-[18px] w-[18px]" />
            </List.ItemStart>
            More
            <List.ItemEnd>
              <NavArrowRight
                className={`h-4 w-4 ${isOpen ? "rotate-90" : ""}`}
              />
            </List.ItemEnd>
          </List.Item>
          <Collapse open={isOpen}>
            <List>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Spam
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <UserXmark className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Blocked
              </List.Item>
              <List.Item>
                <List.ItemStart>
                  <Folder className="h-[18px] w-[18px]" />
                </List.ItemStart>
                Important
              </List.Item>
            </List>
          </Collapse>
          <hr className="-mx-3 my-3 border-secondary" />
          <List.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error">
            <List.ItemStart>
              <LogOut className="h-[18px] w-[18px]" />
            </List.ItemStart>
            Logout
          </List.Item>
        </List>
      </Card.Body>
      <Card.Footer className="mt-8">
        <Card color="primary" className="shadow-none">
          <Card.Header className="m-3">
            <SelectFace3d className="h-10 w-10 text-primary-foreground" />
          </Card.Header>
          <Card.Body>
            <Typography type="h6" className="mb-1 text-white">
              Upgrade to PRO
            </Typography>
            <Typography type="small" className="text-white/80">
              Upgrade to Material Tailwind PRO and get even more components,
              plugins, advanced features and premium.
            </Typography>
          </Card.Body>
          <Card.Footer>
            <Button
              size="sm"
              as="a"
              href="#"
              className="border-white bg-white text-black hover:border-white hover:bg-white hover:text-black"
            >
              Upgrade Now
            </Button>
          </Card.Footer>
        </Card>
      </Card.Footer>
    </Card>
  );
}

Sidebar with Burger Menu

Use this sidebar example to create a sidebar that opens and closes when user clicks on the burger menu icon, this is useful when you want to hide the sidebar on mobile devices.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

"use client";

import * as React from "react";
import {
  Card,
  List,
  Typography,
  Chip,
  Collapse,
  Button,
  Input,
  IconButton,
  Drawer,
} from "@material-tailwind/react";
import {
  Archive,
  EmptyPage,
  Folder,
  LogOut,
  Mail,
  Menu,
  MoreHorizCircle,
  NavArrowRight,
  Pin,
  Search,
  SelectFace3d,
  SendDiagonal,
  Bin,
  UserXmark,
  Xmark,
} from "iconoir-react";

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: SendDiagonal,
    title: "Sent",
    href: "#",
  },
  {
    icon: EmptyPage,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Bin,
    title: "Trash",
    href: "#",
  },
];

export function SidebarWithBurgerMenu() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <>
      <Drawer>
        <Drawer.Trigger className="group">
          <IconButton>
            <Xmark className="hidden h-4 w-4 stroke-2 group-data-[open=true]:block" />
            <Menu className="hidden h-4 w-4 stroke-2 group-data-[open=false]:block" />
          </IconButton>
        </Drawer.Trigger>
        <Drawer.Overlay>
          <Drawer.Panel placement="left" className="p-0">
            <div className="flex items-center justify-between gap-4">
              <Drawer.DismissTrigger
                as={IconButton}
                size="sm"
                variant="ghost"
                color="secondary"
                className="absolute right-2 top-2"
                isCircular
              >
                <Xmark className="h-5 w-5" />
              </Drawer.DismissTrigger>
            </div>
            <Card className="grid h-full border-none shadow-none">
              <div>
                <Card.Header className="mx-3 mb-0 mt-3 flex h-max items-center gap-2">
                  <img
                    src="/logo.png"
                    alt="brand"
                    className="h-7 w-7 rounded-full"
                  />
                  <Typography className="font-semibold">
                    Material Tailwind
                  </Typography>
                </Card.Header>
                <Card.Body className="p-3">
                  <Input type="search" placeholder="Search here...">
                    <Input.Icon>
                      <Search className="h-full w-full" />
                    </Input.Icon>
                  </Input>
                  <List className="mt-3">
                    {Links.map(({ icon: Icon, title, href, badge }) => (
                      <List.Item key={title} href={href}>
                        <List.ItemStart>
                          <Icon className="h-[18px] w-[18px]" />
                        </List.ItemStart>
                        {title}
                        {badge && (
                          <List.ItemEnd>
                            <Chip size="sm" variant="ghost">
                              <Chip.Label>{badge}</Chip.Label>
                            </Chip>
                          </List.ItemEnd>
                        )}
                      </List.Item>
                    ))}
                    <hr className="-mx-3 my-3 border-secondary" />
                    <List.Item onClick={() => setIsOpen((cur) => !cur)}>
                      <List.ItemStart>
                        <MoreHorizCircle className="h-[18px] w-[18px]" />
                      </List.ItemStart>
                      More
                      <List.ItemEnd>
                        <NavArrowRight
                          className={`h-4 w-4 ${isOpen ? "rotate-90" : ""}`}
                        />
                      </List.ItemEnd>
                    </List.Item>
                    <Collapse open={isOpen}>
                      <List>
                        <List.Item>
                          <List.ItemStart>
                            <Folder className="h-[18px] w-[18px]" />
                          </List.ItemStart>
                          Spam
                        </List.Item>
                        <List.Item>
                          <List.ItemStart>
                            <UserXmark className="h-[18px] w-[18px]" />
                          </List.ItemStart>
                          Blocked
                        </List.Item>
                        <List.Item>
                          <List.ItemStart>
                            <Folder className="h-[18px] w-[18px]" />
                          </List.ItemStart>
                          Important
                        </List.Item>
                      </List>
                    </Collapse>
                    <hr className="-mx-3 my-3 border-secondary" />
                    <List.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error">
                      <List.ItemStart>
                        <LogOut className="h-[18px] w-[18px]" />
                      </List.ItemStart>
                      Logout
                    </List.Item>
                  </List>
                </Card.Body>
              </div>
              <Card.Footer className="mt-8 grid">
                <Card color="primary" className="mt-auto shadow-none">
                  <Card.Header className="m-3">
                    <SelectFace3d className="h-10 w-10 text-primary-foreground" />
                  </Card.Header>
                  <Card.Body>
                    <Typography type="h6" className="mb-1 text-white">
                      Upgrade to PRO
                    </Typography>
                    <Typography type="small" className="text-white/80">
                      Upgrade to Material Tailwind PRO and get even more
                      components, plugins, advanced features and premium.
                    </Typography>
                  </Card.Body>
                  <Card.Footer>
                    <Button
                      size="sm"
                      as="a"
                      href="#"
                      className="border-white bg-white text-black hover:border-white hover:bg-white hover:text-black"
                    >
                      Upgrade Now
                    </Button>
                  </Card.Footer>
                </Card>
              </Card.Footer>
            </Card>
          </Drawer.Panel>
        </Drawer.Overlay>
      </Drawer>
    </>
  );
}
"use client";

import * as React from "react";
import {
  Card,
  List,
  Typography,
  Chip,
  Collapse,
  Button,
  Input,
  IconButton,
  Drawer,
} from "@material-tailwind/react";
import {
  Archive,
  EmptyPage,
  Folder,
  LogOut,
  Mail,
  Menu,
  MoreHorizCircle,
  NavArrowRight,
  Pin,
  Search,
  SelectFace3d,
  SendDiagonal,
  Bin,
  UserXmark,
  Xmark,
} from "iconoir-react";

const Links = [
  {
    icon: Mail,
    title: "Inbox",
    href: "#",
    badge: 14,
  },
  {
    icon: SendDiagonal,
    title: "Sent",
    href: "#",
  },
  {
    icon: EmptyPage,
    title: "Drafts",
    href: "#",
  },
  {
    icon: Pin,
    title: "Pins",
    href: "#",
  },
  {
    icon: Archive,
    title: "Archive",
    href: "#",
  },
  {
    icon: Bin,
    title: "Trash",
    href: "#",
  },
];

export function SidebarWithBurgerMenu() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <>
      <Drawer>
        <Drawer.Trigger className="group">
          <IconButton>
            <Xmark className="hidden h-4 w-4 stroke-2 group-data-[open=true]:block" />
            <Menu className="hidden h-4 w-4 stroke-2 group-data-[open=false]:block" />
          </IconButton>
        </Drawer.Trigger>
        <Drawer.Overlay>
          <Drawer.Panel placement="left" className="p-0">
            <div className="flex items-center justify-between gap-4">
              <Drawer.DismissTrigger
                as={IconButton}
                size="sm"
                variant="ghost"
                color="secondary"
                className="absolute right-2 top-2"
                isCircular
              >
                <Xmark className="h-5 w-5" />
              </Drawer.DismissTrigger>
            </div>
            <Card className="grid h-full border-none shadow-none">
              <div>
                <Card.Header className="mx-3 mb-0 mt-3 flex h-max items-center gap-2">
                  <img
                    src="/logo.png"
                    alt="brand"
                    className="h-7 w-7 rounded-full"
                  />
                  <Typography className="font-semibold">
                    Material Tailwind
                  </Typography>
                </Card.Header>
                <Card.Body className="p-3">
                  <Input type="search" placeholder="Search here...">
                    <Input.Icon>
                      <Search className="h-full w-full" />
                    </Input.Icon>
                  </Input>
                  <List className="mt-3">
                    {Links.map(({ icon: Icon, title, href, badge }) => (
                      <List.Item key={title} href={href}>
                        <List.ItemStart>
                          <Icon className="h-[18px] w-[18px]" />
                        </List.ItemStart>
                        {title}
                        {badge && (
                          <List.ItemEnd>
                            <Chip size="sm" variant="ghost">
                              <Chip.Label>{badge}</Chip.Label>
                            </Chip>
                          </List.ItemEnd>
                        )}
                      </List.Item>
                    ))}
                    <hr className="-mx-3 my-3 border-secondary" />
                    <List.Item onClick={() => setIsOpen((cur) => !cur)}>
                      <List.ItemStart>
                        <MoreHorizCircle className="h-[18px] w-[18px]" />
                      </List.ItemStart>
                      More
                      <List.ItemEnd>
                        <NavArrowRight
                          className={`h-4 w-4 ${isOpen ? "rotate-90" : ""}`}
                        />
                      </List.ItemEnd>
                    </List.Item>
                    <Collapse open={isOpen}>
                      <List>
                        <List.Item>
                          <List.ItemStart>
                            <Folder className="h-[18px] w-[18px]" />
                          </List.ItemStart>
                          Spam
                        </List.Item>
                        <List.Item>
                          <List.ItemStart>
                            <UserXmark className="h-[18px] w-[18px]" />
                          </List.ItemStart>
                          Blocked
                        </List.Item>
                        <List.Item>
                          <List.ItemStart>
                            <Folder className="h-[18px] w-[18px]" />
                          </List.ItemStart>
                          Important
                        </List.Item>
                      </List>
                    </Collapse>
                    <hr className="-mx-3 my-3 border-secondary" />
                    <List.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error">
                      <List.ItemStart>
                        <LogOut className="h-[18px] w-[18px]" />
                      </List.ItemStart>
                      Logout
                    </List.Item>
                  </List>
                </Card.Body>
              </div>
              <Card.Footer className="mt-8 grid">
                <Card color="primary" className="mt-auto shadow-none">
                  <Card.Header className="m-3">
                    <SelectFace3d className="h-10 w-10 text-primary-foreground" />
                  </Card.Header>
                  <Card.Body>
                    <Typography type="h6" className="mb-1 text-white">
                      Upgrade to PRO
                    </Typography>
                    <Typography type="small" className="text-white/80">
                      Upgrade to Material Tailwind PRO and get even more
                      components, plugins, advanced features and premium.
                    </Typography>
                  </Card.Body>
                  <Card.Footer>
                    <Button
                      size="sm"
                      as="a"
                      href="#"
                      className="border-white bg-white text-black hover:border-white hover:bg-white hover:text-black"
                    >
                      Upgrade Now
                    </Button>
                  </Card.Footer>
                </Card>
              </Card.Footer>
            </Card>
          </Drawer.Panel>
        </Drawer.Overlay>
      </Drawer>
    </>
  );
}