Components / Sidebar

Sidebar

Modern collapsible side navigation. Two states (expanded ↔ icon-only), smooth 200ms width transition, full-row hit targets on slotted `<a>` / `<button>` items, `aria-current` active state, and section headers via `.section-title`. Modeled after the 2024–2025 consensus from shadcn/ui, Linear, Notion, and Cursor.

navigation v0.9.0

Playground

Examples

App shell with sections

Cognivo

Workspace

Dashboard Projects Tasks

Account

Settings Help

Murilo S.

<cg-sidebar collapsible style="height:440px;max-width:280px;">
  <div slot="header" style="display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;">
    <span aria-hidden="true" style="display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--cg-color-accent-text);color:var(--cg-color-surface-base-background);flex-shrink:0;">◆</span>
    <span data-label>Cognivo</span>
  </div>
  <div class="section-title">Workspace</div>
  <a href="#" aria-current="page" title="Dashboard"><span aria-hidden="true" style="width:16px;flex-shrink:0;text-align:center;">⊞</span><span data-label>Dashboard</span></a>
  <a href="#" title="Projects"><span aria-hidden="true" style="width:16px;flex-shrink:0;text-align:center;">◧</span><span data-label>Projects</span></a>
  <a href="#" title="Tasks"><span aria-hidden="true" style="width:16px;flex-shrink:0;text-align:center;">◉</span><span data-label>Tasks</span></a>
  <div class="section-title">Account</div>
  <a href="#" title="Settings"><span aria-hidden="true" style="width:16px;flex-shrink:0;text-align:center;">⚙</span><span data-label>Settings</span></a>
  <a href="#" title="Help"><span aria-hidden="true" style="width:16px;flex-shrink:0;text-align:center;">?</span><span data-label>Help</span></a>
  <div slot="footer" style="display:flex;align-items:center;gap:10px;font-size:13px;">
    <span aria-hidden="true" style="display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--cg-color-action-tertiary-background-hover);font-size:12px;font-weight:600;flex-shrink:0;">MS</span>
    <span data-label>Murilo S.</span>
  </div>
</cg-sidebar>

Right side (inspector)

Inspector

Properties History Comments

<cg-sidebar collapsible side="right" style="height:300px;max-width:260px;">
  <div slot="header" style="font-weight:600;" data-label>Inspector</div>
  <a href="#" aria-current="page" title="Properties"><span data-label>Properties</span></a>
  <a href="#" title="History"><span data-label>History</span></a>
  <a href="#" title="Comments"><span data-label>Comments</span></a>
</cg-sidebar>

Static (no collapse)

Docs

Getting Started Components API Reference

<cg-sidebar style="height:240px;max-width:240px;">
  <div slot="header" style="font-weight:600;">Docs</div>
  <a href="#" aria-current="page"><span data-label>Getting Started</span></a>
  <a href="#"><span data-label>Components</span></a>
  <a href="#"><span data-label>API Reference</span></a>
</cg-sidebar>

Import

import { CgSidebar } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-sidebar';

Per-component imports ship only that component (~8 kB gzip).

API Reference

Prop	Type	Default	Description
`collapsed`	boolean	false	Collapsed to icon-only mode
`collapsible`	boolean	false	Show the collapse toggle button in the header
`side`	"left" \| "right"	"left"	Which side the sidebar attaches to
`sticky`	boolean	false	Sticky positioning (top: 0)
`width`	string	""	Custom width CSS value (overrides --cg-component-sidebar-width)

Events

Event	Detail	Description
`cg-sidebar-toggle`	{ collapsed: boolean }	Sidebar collapsed/expanded via toggle button