/// Layout

TopBar

A sticky, blurred top navigation bar with brand, mono uppercase links, and an actions cluster.

import { TopBar, TopBarLinkItem } from "@protocore/pds";

View as Markdown

Basics

Pass a brand, a links array, and an actions slot. Links render as mono uppercase; the active one inks. The bar is blurred, hairline-bottomed, and sticky by default (disabled here for the demo).

Custom nav with TopBarLinkItem

For links that need asChild (to wrap a router <Link>) or custom markup, pass children instead of links and compose TopBarLinkItems yourself. children replaces links entirely.

When to use it

TopBar is the generic top chrome — a site or product header with a brand, a short run of primary destinations, and a right-side action cluster. It is deliberately *not* any one site's header; skin it per surface. Use it for top-level, marketing, or shallow navigation; use Sidebar when an application has many grouped destinations that warrant a persistent rail. The two pair inside AppShell (bar on top, rail on the left). For the links prop, each link is plain data; when you need asChild or richer content, switch to the children form with TopBarLinkItem. Wire a menu IconButton in actions to AppShell's onSidebarOpenChange to toggle the mobile drawer.

Usage

Keep the link run short — a handful of top-level destinations.
Use the children + TopBarLinkItem form when links must wrap a router Link via asChild.
Put the primary call to action in the actions slot, not among the nav links.

Don't

Cram deep, grouped navigation into a TopBar — that is a Sidebar.
Pass both links and children; children wins and links is ignored.
Disable sticky unless the bar genuinely shouldn't follow the scroll.

Accessibility

Keys	Action
`Tab`	Move focus through the brand, links, and actions in order
`Shift + Tab`	Move focus backward through the bar
`Enter`	Follow the focused link or activate the focused action

Renders a `<header>` with a `<nav>` around the links — an implicit navigation landmark.
The active link sets `aria-current="page"`.
Links opening in a new tab (`target="_blank"`) default to `rel="noreferrer"`.
Icon-only actions (e.g. a menu button) must carry an `aria-label`.

`TopBar` props

Prop	Type	Default	Description
`actions`	`ReactNode`	—	Right-cluster actions (buttons, theme toggle…).
`brand`	`ReactNode`	—	Left-cluster brand mark / wordmark.
`children`	`ReactNode`	—	Custom nav content — replaces `links` entirely.
`className`	`string`	—
`links`	`TopBarLink[]`	—	Inline nav links, rendered between brand and actions. Ignored if `children` is set.
`sticky`	`boolean`	`true`	Pin to the top of the scroll container. Default true.
`style`	`CSSProperties`	—

`TopBar.Link` props

Prop	Type	Default	Description
`active`	`boolean`	—	Mark the current section — renders in ink.
`asChild`	`boolean`	—	Render into a passed child (e.g. a router `<Link>`) instead of an `<a>`.
`className`	`string`	—
`style`	`CSSProperties`	—