Sidebar

Persistent panel structure for application navigation and supporting controls.

Examples

Application navigation

Overview

Compose fixed header and footer regions around scrollable content. Mark the current destination with the active prop.

tsx

import { Sidebar, SidebarContent, SidebarNavItem } from "@standard-ui/react"

<Sidebar>
  <SidebarContent>
    <SidebarNavItem active>Overview</SidebarNavItem>
  </SidebarContent>
</Sidebar>

API

Part	Role
Sidebar	Panel shell.
SidebarContent	Scrollable main region.
SidebarNavItem	Interactive navigation item.

Guidelines

Do

Group related destinations
Show one active item

Don't

Don't overload the footer with navigation