sidebar

The Sidebar component provides a vertical navigation menu with support for nested links and optional footer content.

Usage

Default


<Sidebar 
  links={[{ label: "Dashboard", href: "/Dashboard", icon: <FaBook /> },
  {
    label: "Reports",
    children: [
      { label: "Monthly", icon: <FaCalendar /> },
      { label: "Annual", icon: <FaCalendar /> },
    ],
    icon: <FaPaperclip />,
  },
  { label: "Settings", href: "/Settings", icon: <FaCogs /> }]}
  currentPath="/Settings" 
/>

Props

Sortable data table
Prop	Type	Default	Description
links	Array<{ label: string; href?: string; icon?: ReactNode; children?: Array }>	-	Array of navigation links, each may include `label`, `href`, `icon`, and optional `children` for nested menus.
currentPath	string	-	The current active path used to highlight the active link.
theme	"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"	Configured Default	Theme color for the sidebar.
state	"success" \| "error" \| "warning"	-	Visual state for feedback (success, warning, error).
outline	boolean	false	Whether the sidebar should use an outlined style.
rounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Corner rounding style for the sidebar container.
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Box shadow for the sidebar container.
showFooter	boolean	false	Whether to display the footer section at the bottom.
footerLinks	Array<{ label: string; href: string; icon?: ReactNode }>	-	Array of footer links displayed when `showFooter` is true.
footerVersion	string	-	Version label displayed in the footer (e.g. v1.0.0).
className	string	-	Custom class names for the sidebar wrapper.
ariaLabel	string	"Sidebar navigation"	ARIA label for the sidebar navigation landmark.
data-testid	string	"sidebar"	Test id for querying the component in tests.