Skip to main content

​
Overview

The Sidebar component provides a collapsible sidebar with sections, navigation items, and customizable width.

​
Basic Usage

import { Sidebar } from '@peppermint-design/devreadykit-custom';

export default function SidebarBasic() {
  return (
    <Sidebar>
      <Sidebar.Header>Header</Sidebar.Header>
      <Sidebar.Content>
        <Sidebar.Section>Content</Sidebar.Section>
      </Sidebar.Content>
      <Sidebar.Footer>Footer</Sidebar.Footer>
    </Sidebar>
  );
}

​
Collapsible

import { Sidebar } from '@peppermint-design/devreadykit-custom';

export default function SidebarCollapsible() {
  return (
    <Sidebar collapsible defaultCollapsed={false}>
      <Sidebar.Header>My App</Sidebar.Header>
      <Sidebar.Content>
        <Sidebar.Section>Navigation</Sidebar.Section>
      </Sidebar.Content>
    </Sidebar>
  );
}

​
Controlled

import { Sidebar } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function SidebarControlled() {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Sidebar 
      collapsed={collapsed}
      onCollapsedChange={setCollapsed}
    >
      <Sidebar.Header>My App</Sidebar.Header>
      <Sidebar.Content>
        <Sidebar.Section>Navigation</Sidebar.Section>
      </Sidebar.Content>
    </Sidebar>
  );
}

​
Props