Sidebar

Collapsible app rail: provider, header, groups, menu buttons with injected links, nested sub-menus that fly out once collapsed, badges, off-canvas below the mobile breakpoint, trigger, inset.

Activity indicator

One row's activity mark. A count when something arrived, a pulsing dot while something is working — and when both are true the count wins, because it is the one you can act on. Collapse the rail to see the 56px form: the badge goes sr-only there, so a dot takes over.

<SidebarMenuActivity count={3} label="3 tasks finished" />

Activity in the rail

The three rows that can light up, against the ones that never do. Only Chat, Cloud Agents and Background Tasks carry an indicator — the point of the paradigm is that the rail stays quiet, so this is the view that shows whether it does.

<SidebarMenuButton
  href="/user/status"
  tooltip="3 tasks finished · 1 still running"
  tooltipAlways
>
  <ActivityIcon />
  <SidebarMenuLabel>Background Tasks</SidebarMenuLabel>
  <SidebarMenuActivity count={3} working />
</SidebarMenuButton>

Playground

<SidebarProvider>
  <Sidebar>
    <SidebarHeader><SidebarBrand /></SidebarHeader>
    <SidebarContent>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton href="/chat" link={Link} isActive>
            <MessageSquareIcon />
            <SidebarMenuLabel>Chat</SidebarMenuLabel>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
    {children}
  </SidebarInset>
</SidebarProvider>

Toggle the rail