Sidebar | Pol-ui - A beautiful and functional UI library for React and Next.js

A Sidebar is a main part of a website, it allows the user to navigate through the website in a simple way.

Importation

Import the component from pol-ui to use the Sidebar element:

import { Sidebar } from "pol-ui";

Default Sidebar

import { Sidebar, useBoolean, SidebarItem } from "pol-ui";
import { TbLayout, TbLayoutKanban, TbAt, TbUser, TbCoin } from "react-icons/tb";
 
export const SidebarComponent = (): JSX.Element => {
  const { value, toggle } = useBoolean(false);
 
  return (
    <Sidebar open={value} toggle={toggle}>
      <SidebarItem href="#" icon={TbLayout}>
        Dashboard
      </SidebarItem>
      <SidebarItem href="#" icon={TbLayoutKanban} active>
        Kanban
      </SidebarItem>
      <SidebarItem href="#" icon={TbAt} label="3">
        At
      </SidebarItem>
      <SidebarItem href="#" icon={TbUser}>
        Users
      </SidebarItem>
      <SidebarItem href="#" icon={TbCoin} label="Premium">
        Products
      </SidebarItem>
    </Sidebar>
  );
};

Props

Prop name	Type	Default	Description
as	ElementType	'nav'	The HTML tag to use for the Sidebar.
collapseMode	'collapse' \| 'hide'	'collapse'	The mode of the Sidebar.
theme	SidebarTheme		The theme of the Sidebar.
open	boolean	true	The state of the Sidebar.
toggle	() => void	-	The function to toggle the Sidebar.
customBgColor	string	-	The background color of the Sidebar.
innerClassName	string	-	The class name of the inner Sidebar.
footer	React.ReactNode	-	The footer of the Sidebar.
hasMotion	boolean	-	The motion of the Sidebar.

💡

You can also provide any prop comming from the HTML div tag.

Examples

Sidebar without Icon

import { Sidebar, useBoolean, SidebarItem } from "pol-ui";
 
export const SidebarComponent = (): JSX.Element => {
  const { value, toggle } = useBoolean(false);
 
  return (
    <Sidebar open={value} toggle={toggle}>
      <SidebarItem href="#">Dashboard</SidebarItem>
      <SidebarItem href="#" labelColor="alternative">
        Kanban
      </SidebarItem>
      <SidebarItem href="#">At</SidebarItem>
      <SidebarItem href="#">Users</SidebarItem>
      <SidebarItem href="#">Notifications</SidebarItem>
      <SidebarItem href="#">Settings</SidebarItem>
    </Sidebar>
  );
};

Hidden when collapsed

import { Sidebar, useBoolean, SidebarItem } from "pol-ui";
import { TbLayout, TbLayoutKanban, TbAt, TbUser, TbCoin } from "react-icons/tb";
 
export const SidebarComponent = (): JSX.Element => {
  const { value, toggle } = useBoolean(false);
 
  return (
    <div className="flex gap-4 items-start">
      <Sidebar collapseMode="hide" open={value} toggle={toggle}>
        <SidebarItem href="#" icon={TbLayout}>
          Dashboard
        </SidebarItem>
        <SidebarItem href="#" icon={TbLayoutKanban}>
          Kanban
        </SidebarItem>
        <SidebarItem href="#" icon={TbAt} label="3">
          At
        </SidebarItem>
        <SidebarItem href="#" icon={TbUser}>
          Users
        </SidebarItem>
        <SidebarItem href="#" icon={TbCoin} label="Premium">
          Products
        </SidebarItem>
      </Sidebar>
      <div className="flex m-4">
        <Button onClick={toggle}>
          {value ? <TbArrowRight /> : <TbArrowLeft />}
        </Button>
      </div>
    </div>
  );
};

Multilevel Sidebar

import { Sidebar, useBoolean, SidebarItem, SidebarCollapse } from "pol-ui";
import { TbLayout, TbLayoutKanban, TbAt, TbUser, TbCoin } from "react-icons/tb";
 
export const SidebarComponent = (): JSX.Element => {
  const { value, toggle } = useBoolean(false);
 
  return (
    <Sidebar open={value} toggle={toggle}>
      <SidebarItem href="#" icon={TbHome}>
        1
      </SidebarItem>
      <SidebarCollapse icon={TbShoppingBag} badge="2">
        <SidebarItem href="#" label="2.1">
          2.1
        </SidebarItem>
        <SidebarItem href="#">2.2</SidebarItem>
      </SidebarCollapse>
      <SidebarItem href="#" icon={TbAt}>
        3
      </SidebarItem>
      <SidebarItem href="#" icon={TbUser}>
        4
      </SidebarItem>
 
      <SidebarItem href="#" icon={TbSignRight}>
        5
      </SidebarItem>
      <SidebarItem href="#" icon={TbPlus}>
        6
      </SidebarItem>
    </Sidebar>
  );
};

Default Opened Sidebar

import { Sidebar, useBoolean, SidebarItem, SidebarCollapse } from "pol-ui";
import { TbLayout, TbLayoutKanban, TbAt, TbUser, TbCoin } from "react-icons/tb";
 
export const SidebarComponent = (): JSX.Element => {
  const { value, toggle } = useBoolean(false);
 
  return (
    <Sidebar open={value} toggle={toggle}>
      <SidebarItem href="#" icon={TbHome}>
        1
      </SidebarItem>
      <SidebarCollapse icon={TbShoppingBag} badge="2" defaultOpen>
        <SidebarItem href="#" label="2.1">
          2.1
        </SidebarItem>
        <SidebarItem href="#">2.2</SidebarItem>
      </SidebarCollapse>
      <SidebarItem href="#" icon={TbAt}>
        3
      </SidebarItem>
      <SidebarItem href="#" icon={TbUser}>
        4
      </SidebarItem>
 
      <SidebarItem href="#" icon={TbSignRight}>
        5
      </SidebarItem>
      <SidebarItem href="#" icon={TbPlus}>
        6
      </SidebarItem>
    </Sidebar>
  );
};

Sidebar with Branding

import { Sidebar, useBoolean, SidebarItem, SidebarCollapse } from "pol-ui";
import { TbLayout, TbLayoutKanban, TbAt, TbUser, TbCoin } from "react-icons/tb";
 
export const SidebarComponent = (): JSX.Element => {
  const { value, toggle } = useBoolean(false);
 
  return (
    <Sidebar open={value} toggle={toggle}>
      <SidebarLogo href="#" img="favicon.svg" imgAlt="Pol-ui logo">
        Pol-ui
      </SidebarLogo>
      <SidebarItem href="#" icon={TbHome}>
        1
      </SidebarItem>
      <SidebarCollapse icon={TbShoppingBag} badge="2" defaultOpen>
        <SidebarItem href="#" label="2.1">
          2.1
        </SidebarItem>
        <SidebarItem href="#">2.2</SidebarItem>
      </SidebarCollapse>
      <SidebarItem href="#" icon={TbAt}>
        3
      </SidebarItem>
      <SidebarItem href="#" icon={TbUser}>
        4
      </SidebarItem>
 
      <SidebarItem href="#" icon={TbSignRight}>
        5
      </SidebarItem>
      <SidebarItem href="#" icon={TbPlus}>
        6
      </SidebarItem>
    </Sidebar>
  );
};

Complete Example

export const CompleteExample = () => {
  const { value, toggle } = useBoolean(true);
 
  return (
    <div className="flex w-full rounded-xl overflow-hidden border border-secondary-800 min-h-[400px]  bg-primary-100 flex-col">
      <Navbar
        links={[
          {
            href: "#",
            label: "Home",
            active: true,
          },
          {
            href: "#",
            label: "About",
          },
          {
            href: "#",
            label: "Contact",
          },
        ]}
        leftContent={
          <img
            src="https://ui.polgubau.com/logo.png"
            className="mr-3 h-6 sm:h-6"
            alt="Pol-ui Logo"
          />
        }
      />
      <section className="flex h-full gap-4">
        <Sidebar
          open={value}
          toggle={toggle}
          className="rounded-tr-xl flex flex-col justify-between h-full"
          footer={
            <div className="flex justify-start gap-3 h-10 my-2">
              <Avatar img="https://avatars.githubusercontent.com/u/63197171?v=4" />
              <p className="flex flex-col items-start">
                <strong>Pol Gubau</strong>
                <span className="text-xs">Developer</span>
              </p>
            </div>
          }
        >
          <div className="flex flex-col gap-1 ">
            <SidebarItem href="#" icon={TbDatabaseSearch} active rounded="full">
              Home
            </SidebarItem>
            <SidebarItem
              href="#"
              icon={TbLayoutKanban}
              label="Empty"
              labelColor={ColorsEnum.primary}
              rounded="full"
            >
              Menus
            </SidebarItem>
            <SidebarItem href="#" icon={TbAt} label="3" rounded="full">
              Mail
            </SidebarItem>
            <SidebarItem href="#" icon={TbUser} rounded="full">
              Accounts
            </SidebarItem>
          </div>
        </Sidebar>
        <div className="flex flex-col gap-5 p-8 w-full bg-primary-200  rounded-xl">
          <h2>Content</h2>
          <div className="bg-primary-400 rounded-2xl w-full h-20"></div>
          <div className="bg-primary-400 rounded-2xl w-full h-10"></div>
          <div className="bg-primary-300 rounded-2xl w-full h-14"></div>
          <div className="w-full h-20 flex gap-5">
            <div className="bg-primary-300 rounded-2xl w-full h-14"></div>
            <div className="bg-primary-300 rounded-2xl w-full h-14"></div>
          </div>
        </div>
      </section>
    </div>
  );
};

Complete Example

import { Sidebar, useBoolean, SidebarItem, IconButton, Input, Navbar } from "pol-ui";
import { TbLayout, TbLayoutKanban, TbAt, TbUser, TbCoin } from "react-icons/tb";
 
export const WithSearch = () => {
  const { value, toggle } = useBoolean(true);
 
  return (
    <div className="flex w-full rounded-xl overflow-hidden bg-secondary-50 min-h-[400px] flex-col">
      <Navbar
        links={[
          {
            href: "#",
            label: "Home",
            active: true,
          },
          {
            href: "#",
            label: "About",
          },
          {
            href: "#",
            label: "Contact",
          },
        ]}
        leftContent={
          <img
            src="https://ui.polgubau.com/logo.png"
            className="mr-3 h-6 sm:h-6"
            alt="Pol-ui Logo"
          />
        }
      />
      <section className="flex h-full">
        <div className="bg-secondary-50 w-fit shadow-lg">
          <Sidebar open={value} toggle={toggle}>
            <div>
              <Input
                leftComponent={<TbSearch />}
                placeholder="Search"
                className={`w-full ${value ? "hidden" : "flex"}`}
              />
              <IconButton
                className={`w-full max-w-10 ${value ? "flex" : "hidden"}`}
                onClick={toggle}
              >
                <TbSearch />
              </IconButton>
            </div>
 
            <SidebarItem href="#" icon={TbDatabaseSearch} active>
              Home
            </SidebarItem>
            <SidebarItem
              href="#"
              icon={TbLayoutKanban}
              label="Empty"
              labelColor={ColorsEnum.primary}
            >
              Menus
            </SidebarItem>
            <SidebarItem href="#" icon={TbAt} label="3">
              Mail
            </SidebarItem>
            <SidebarItem href="#" icon={TbUser}>
              Accounts
            </SidebarItem>
          </Sidebar>
        </div>
        <div className="flex flex-col gap-5 p-8 w-full bg-primary-200 m-4 rounded-xl">
          <h2>Content</h2>
          <div className="bg-primary-400 rounded-2xl w-full h-20"></div>
          <div className="bg-primary-400 rounded-2xl w-full h-10"></div>
          <div className="bg-primary-300 rounded-2xl w-full h-14"></div>
          <div className="w-full h-20 flex gap-5">
            <div className="bg-primary-300 rounded-2xl w-full h-14"></div>
            <div className="bg-primary-300 rounded-2xl w-full h-14"></div>
          </div>
        </div>
      </section>
    </div>
  );
};

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface SidebarTheme {
  root: {
    base: string;
    collapsed: IBoolean;
    inner: string;
  };
  collapse: SidebarCollapseTheme;
  item: SidebarItemTheme;
  itemGroup: string;
  logo: SidebarLogoTheme;
  closeButton: {
    base: string;
    collapsed: string;
    expanded: string;
  };
}