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

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>
  );
}

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

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>
  );
}

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

Logout

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>
  );
}

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

Logout

Upgrade to PRO

Upgrade to Material Tailwind PRO and get even more components, plugins, advanced features and premium.

Upgrade Now

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>
  );
}

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>
  );
}

Sidebar with Logo

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.

Material Tailwind

Inbox
14
Sent
Drafts
Pins
Archive
Trash

Logout

Upgrade to PRO

Upgrade to Material Tailwind PRO and get even more components, plugins, advanced features and premium.

Upgrade Now

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>
  );
}

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.

Material Tailwind

Inbox
14
Sent
Drafts
Pins
Archive
Trash

Logout

Upgrade to PRO

Upgrade to Material Tailwind PRO and get even more components, plugins, advanced features and premium.

Upgrade Now

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>
          <Input.Icon>
            <Search className="h-full w-full" />
          </Input.Icon>
          <Input.Field type="search" placeholder="Search here..." />
        </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>
  );
}

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>
          <Input.Icon>
            <Search className="h-full w-full" />
          </Input.Icon>
          <Input.Field type="search" placeholder="Search here..." />
        </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 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.

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>
                    <Input.Icon>
                      <Search className="h-full w-full" />
                    </Input.Icon>
                    <Input.Field type="search" placeholder="Search here..." />
                  </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>
    </>
  );
}

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>
                    <Input.Icon>
                      <Search className="h-full w-full" />
                    </Input.Icon>
                    <Input.Field type="search" placeholder="Search here..." />
                  </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>
    </>
  );
}

On this page

Scroll to top

Roots of UI/UX Design

By Creative TimLearn to Develop Intuitive Web Experiences

Tailwind CSS Sidebar - React

#Sidebar Demo

#Multi Level Sidebar

#Sidebar with Content Separator

#Sidebar with CTA

Upgrade to PRO

#Sidebar with Logo

Upgrade to PRO

#Sidebar with Search

Upgrade to PRO

#Sidebar with Burger Menu

Sidebar Demo

Multi Level Sidebar

Sidebar with Content Separator

Sidebar with CTA

Sidebar with Logo

Sidebar with Search

Sidebar with Burger Menu