Side Menu

A collapsible sidebar navigation component with sections, tooltips, and icons.

Installation

import { SideMenu } from "@sourceful-energy/ui"

Usage

Examples

Non-collapsible

With Footer

Props

Prop	Type	Default	Description
header	React.ReactNode	-	Header content (logo, title, etc.)
collapsedHeader	React.ReactNode	-	Header content shown when collapsed (icon, etc.)
sections	SideMenuSection[]	[]	Navigation sections with collapsible groups
items	SideMenuItem[]	[]	Standalone items without sections
collapsed	boolean	-	Whether the sidebar is collapsed (controlled)
defaultCollapsed	boolean	false	Default collapsed state (uncontrolled)
collapsible	boolean	true	Whether the sidebar can be collapsed
onCollapsedChange	(collapsed: boolean) => void	-	Callback when collapsed state changes
activeItem	string	-	Currently active item id
linkComponent	React.ComponentType	a	Custom link component (e.g., Next.js Link)

Type Definitions

interface SideMenuItem {
  id: string
  label: string
  href?: string
  icon?: React.ReactNode
  badge?: string | number
  onClick?: () => void
  disabled?: boolean
}

interface SideMenuSection {
  id: string
  title: string
  icon?: React.ReactNode
  items: SideMenuItem[]
  defaultExpanded?: boolean
}