Skip to Content
ComponentsAtomsSidebar

Sidebar

Atom / layout primitive

Sidebar organiza navegação persistente. Ela deve mostrar contexto e manter só o grupo ativo expandido quando a árvore é longa.

Exemplos copiáveis

React

import * as React from "react"
 
type SidebarLink = { label: string; href: string; current?: boolean }
type SidebarGroup = { title: string; links: SidebarLink[] }
 
export function PulsoSidebar({ groups }: { groups: SidebarGroup[] }) {
  return (
    <aside className="w-72 border-r border-[var(--border)] bg-[var(--card)] p-4">
      <nav aria-label="Navegação lateral" className="grid gap-5">
        {groups.map((group) => (
          <section key={group.title}>
            <h2 className="font-mono text-[10.5px] uppercase tracking-[var(--tracking-kicker)] text-[var(--fg-subtle)]">{group.title}</h2>
            <ul className="mt-2 grid gap-1">
              {group.links.map((link) => (
                <li key={link.href}><a href={link.href} aria-current={link.current ? "page" : undefined} className={[
                  "block rounded-[var(--radius-sm)] px-3 py-2 text-sm",
                  link.current ? "bg-[var(--primary-soft)] text-[var(--primary)]" : "text-[var(--fg-muted)] hover:bg-[var(--muted)] hover:text-[var(--fg)]",
                ].join(" ")}>{link.label}</a></li>
              ))}
            </ul>
          </section>
        ))}
      </nav>
    </aside>
  )
}
<PulsoSidebar groups={[{ title: "Foundations", links: [{ label: "Colors", href: "/foundations/colors", current: true }] }]} />

Regras

  1. Sidebar é navegação persistente, não lista de ações.
  2. Use grupos para hierarquia real.
  3. Item ativo usa aria-current.
  4. Em árvores longas, colapse grupos inativos.
Last updated on
SheetSonner