Sidebar
Navigation & Chrome

Sidebar

Application sidebar navigation container. Compose with SidebarBrand, SidebarOrgSwitcher, SidebarNav, and SidebarFooter.

Preview

Sidebar

Props

Sidebar is a <aside> element. It extends HTMLAttributes<HTMLElement> with no additional custom props.

SidebarBrand

SidebarBrandProps props
PropTypeDefaultDescription
logoReactNode—A logo or icon rendered before the brand name.
childrenReactNode—Brand name text.

SidebarOrgSwitcher

SidebarOrgSwitcherProps props
PropTypeDefaultDescription
initialsstring—Initials shown in the org icon circle.
namestring—Organization name.
substring—Sub-label, e.g. plan tier or member count.

SidebarNavItem

SidebarNavItemProps props
PropTypeDefaultDescription
iconReactNode—Icon displayed before the label.
childrenReactNode—Label text.
activeboolean—Highlights the item as the current page.
countReactNode—Count badge displayed on the right.
countTone"default" | "warn""default"Accent color for the count badge.
hrefstring—If provided, renders as an <a> instead of a <button>.

SidebarFooter

SidebarFooterProps props
PropTypeDefaultDescription
usageLabelReactNode—Label for the usage meter, e.g. 'Storage'.
usageValueReactNode—Value for the usage meter, e.g. '4.2 / 10 GB'.
usagePercentnumber—Fill percentage for the usage Meter, 0–100.
linksReactNode[]—Array of link elements rendered below the meter.
userInitialsstring—Initials for the user Avatar.
userNamestring—Display name of the current user.
userEmailstring—Email of the current user.
onUserMenu() => void—Click handler for the user menu kebab button.

Examples

Full sidebar compositionTSX
import {
  Sidebar,
  SidebarBrand,
  SidebarOrgSwitcher,
  SidebarNav,
  SidebarNavGroup,
  SidebarNavItem,
  SidebarFooter,
} from "@solarius/onset";
import {
  IconDashboard,
  IconServer,
  IconSettings,
  IconUsers,
  IconHelp,
  IconFileText,
} from "@tabler/icons-react";

<Sidebar>
  <SidebarBrand logo={<YourLogo />}>Solarius</SidebarBrand>
  <SidebarOrgSwitcher initials="AC" name="Acme Corp" sub="Enterprise" />
  <SidebarNav>
    <SidebarNavGroup>
      <SidebarNavItem icon={<IconDashboard size={16} />} active>
        Dashboard
      </SidebarNavItem>
      <SidebarNavItem icon={<IconServer size={16} />} count={12}>
        Infrastructure
      </SidebarNavItem>
      <SidebarNavItem icon={<IconUsers size={16} />}>Team</SidebarNavItem>
    </SidebarNavGroup>
    <SidebarNavGroup>
      <SidebarNavItem icon={<IconSettings size={16} />}>
        Settings
      </SidebarNavItem>
      <SidebarNavItem icon={<IconBell size={16} />} count={3} countTone="warn">
        Notifications
      </SidebarNavItem>
    </SidebarNavGroup>
  </SidebarNav>
  <SidebarFooter
    usageLabel="Storage"
    usageValue="4.2 / 10 GB"
    usagePercent={42}
    links={[
      <a key="help" href="#">
        <IconHelp size={12} /> Help
      </a>,
      <a key="docs" href="#">
        <IconFileText size={12} /> Docs
      </a>,
    ]}
    userInitials="JD"
    userName="Jane Doe"
    userEmail="jane@example.com"
    onUserMenu={() => {}}
  />
</Sidebar>;