Sidebar

Flexible panel component for navigation with customizable positioning.

Guidelines

Sidebar does not enforce any position or width:

• You may use fixed positioning to place the sidebar on the left or right side.
• You also need to set the sidebar width as needed.
• To make it on/off-canvas, you should handle it in your layout component, not in the sidebar component.

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

import {
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarLogo,
  SidebarFooter,
  SidebarMenu,
  SidebarList,
  SidebarItem,
  SidebarItemAction,
  SidebarItemButton,
  SidebarGroup,
  SidebarGroupTitle,
  SidebarGroupAction,
  SidebarSubmenu,
  SidebarCollapsible,
  SidebarCollapsibleTrigger,
  SidebarCollapsiblePanel
} from "components/selia/sidebar";

Structure

The expected structure and composition of the component.

<Sidebar>
  <SidebarHeader>
    <SidebarLogo />
  </SidebarHeader>
  <SidebarContent>
    <SidebarMenu>
      <SidebarGroup>
        <SidebarGroupTitle />
        <SidebarGroupAction />
      </SidebarGroup>
      <SidebarList>
        <SidebarItem />
      </SidebarList>
    </SidebarMenu>
  </SidebarContent>
  <SidebarFooter/>
</Sidebar>

Props

Each component part, its responsibility, and the props it exposes.

Examples

Compact

To make the sidebar compact, pass the size="compact" prop to the Sidebar component.

Loose

To make the sidebar loose, pass the size="loose" prop to the Sidebar component. It will add more padding to the sidebar elements.

Background

By default, the sidebar does not have a background color. You can add a background color by using the className prop.