ListPageBar

<ListPageBar> is the canonical top bar for list pages — sidebar trigger + plural-noun title + actions on line 1, search / filters on optional line 2.

import from "@na/ui/components/ListPageBar" ▶ Open in Storybook packages/ui/src/components/ListPageBar.tsx

When to use

• Every list / table / board page (/agents, /contacts, /deals).
• Foundation pattern from 03-layout.md for the List archetype.

Don’t use ListPageBar for: detail pages (DetailPageBar), focus flows (FocusLayout), or modals.

Default

Toggle Sidebar

Agents

New

List rows…

<ListPageBar
  title="Agents"
  actions={<Button size="sm"><IconPlus />New</Button>}
>
  <Input placeholder="Search agents…" className="h-8 max-w-sm" />
</ListPageBar>

API

Prop	Type	Default	Description
title *	string	—	Plural-noun page title (e.g. "Agents").
actions	ReactNode	—	Right-aligned action buttons (typically one primary).
children	ReactNode	—	Second line — search input, filter chips, etc.

Design guidelines

✓ Do

• Use plural nouns ("Agents", "Contacts", "Deals"). The user is browsing a collection.
• Keep the primary action labeled with a verb + noun ("+ New agent" not just "+").
• Pair the second line with FilterChips or a search input — users expect them at the top.

✗ Don't

• Use ListPageBar on a single-entity page. DetailPageBar exists for that.
• Stack two rows of actions. Combine into a DropdownMenu next to the primary.

Accessibility

• Composes PageHeader — same semantic structure.
• The leading SidebarTrigger is a real <button aria-label> — keyboard reachable.

Related

• PageHeader — Underlying primitive.
• DetailPageBar — Detail-page sibling.
• ContentToolbar — Filter/action bar that sits inside PageContent.

▶ Open ListPageBar stories in Storybook