rc-sidebar

Headless, UI-library agnostic React sidebar component. Works with MUI, Ant Design, Tailwind or any custom CSS.

Installation

npm install rc-sidebar

License Key

A valid license key is required. Obtain one at license-server-lac.vercel.app.

You can provide it in two ways (prop takes priority over meta):

Option 1 — prop

<Sidebar licenseKey="YOUR_KEY" items={[...]} />

Option 2 — meta tag (set once in public/index.html, no prop needed)

<meta name="rc-app-id" content="YOUR_KEY" />

If neither is provided, the sidebar will not render and a console error is shown.

Quick Start

import Sidebar from "rc-sidebar";
import "rc-sidebar/style.css";

const items = [
  { key: "home",     label: "Home",     link: "/",        icon: <HomeIcon /> },
  { key: "settings", label: "Settings", link: "/settings", icon: <SettingsIcon /> },
];

function App() {
  return (
    <div style={{ display: "flex" }}>
      <nav style={{ width: 220 }}>
        <Sidebar licenseKey="YOUR_KEY" items={items} />
      </nav>
      <main>...</main>
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | licenseKey | string | — | Your license key. Falls back to <meta name="rc-app-id"> if omitted. | | items | NavItem[] | [] | Navigation item tree (see below). | | variant | "full" \| "mini" | "full" | full shows labels; mini shows icons only. | | onClick | (e, item) => void | — | Fires on any item click. | | LinkComponent | ComponentType \| string | "a" | Custom link component, e.g. NavLink from react-router-dom. | | isActiveFn | (item, pathname) => boolean | — | Custom active-state logic. | | getPathname | () => string | window.location.pathname | Custom pathname resolver (useful for SSR or custom routers). | | classNames | SidebarClassNames | — | Override any default CSS class (see below). | | renderItem | (props) => ReactNode | — | Fully custom item renderer. |

NavItem shape

{
  key: string;        // unique identifier
  label: string;      // display text
  link?: string;      // href / route path
  icon?: ReactNode;   // icon element
  exact?: boolean;    // use exact path match for active state
  children?: NavItem[]; // nested items (one level)
}

With React Router

import { NavLink, useLocation } from "react-router-dom";
import Sidebar from "rc-sidebar";

function MySidebar() {
  const location = useLocation();

  return (
    <Sidebar
      licenseKey="YOUR_KEY"
      items={items}
      LinkComponent={NavLink}
      getPathname={() => location.pathname}
    />
  );
}

Tip: Dispatch a rc-sidebar:navigate event on window to sync the active state after programmatic navigation.

Custom Styling

Override default class names via the classNames prop:

<Sidebar
  licenseKey="YOUR_KEY"
  items={items}
  classNames={{
    root:        "my-nav",
    link:        "my-nav__link",
    linkActive:  "my-nav__link--active",
    groupTrigger: "my-nav__group",
  }}
/>

Default class names:

| Key | Default | |-----|---------| | root | rc-sidebar | | item | rc-sidebar__item | | link | rc-sidebar__link | | linkActive | active-menu | | icon | rc-sidebar__icon | | label | rc-sidebar__label | | groupTrigger | rc-sidebar__group | | chevron | rc-sidebar__chevron | | childrenList | rc-sidebar__children level-2-collapse | | childrenListInner | rc-sidebar__children-inner level-2-collapse-main |

Custom Item Renderer

Take full control of how each item is rendered:

<Sidebar
  licenseKey="YOUR_KEY"
  items={items}
  renderItem={({ item, isActive, isOpen, toggle, variant }) => (
    <li key={item.key}>
      {item.children ? (
        <button onClick={toggle} className={isActive ? "active" : ""}>
          {item.icon} {item.label} {isOpen ? "▲" : "▼"}
        </button>
      ) : (
        <a href={item.link} className={isActive ? "active" : ""}>
          {item.icon} {item.label}
        </a>
      )}
    </li>
  )}
/>

Mini (icon-only) Variant

<Sidebar licenseKey="YOUR_KEY" items={items} variant="mini" />

Icons are shown; labels and chevrons are hidden.

TypeScript

Full TypeScript support is included.

import Sidebar, { NavItem, SidebarProps } from "rc-sidebar";

License

MIT