Skip to main contentSkip to sidebarSkip to headerSkip to footer

Sidebar

A layout component with a collapsible sidebar and main content area.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
2
3
4
5
6
7
8
9
import {
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuItem,
  SidebarFooter,
  SidebarProvider,
} from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <h2>App Name</h2>
    </SidebarHeader>
    <SidebarContent>
      <SidebarMenu>
        <SidebarMenuItem>
          <a href="#">Dashboard</a>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarContent>
    <SidebarFooter>
      <p>© 2024</p>
    </SidebarFooter>
  </Sidebar>
  <main>
    {/* Main content */}
  </main>
</SidebarProvider>

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗