AppHeader

An application-level header block: a centered, max-width row with a brand, primary navigation, and right-aligned actions. Composed from AppHeaderBrand, AppHeaderNav, AppHeaderNavItem, and AppHeaderRight. This is a Block - an opinionated layout assembled from primitives, rather than a low-level primitive itself.

$npx shadcn add @patchui/app-header

Patch

Resize the preview: under the sm breakpoint the nav collapses to a menu button that opens a Sheet drawer.

Usage

import {
  AppHeader,
  AppHeaderBrand,
  AppHeaderNav,
  AppHeaderNavItem,
  AppHeaderRight,
  Button,
} from "@patchui/react";
 
<AppHeader>
  <AppHeaderBrand render={<a href="/" />}>Patch</AppHeaderBrand>
  <AppHeaderNav>
    <AppHeaderNavItem href="/dashboard" active>
      Dashboard
    </AppHeaderNavItem>
    <AppHeaderNavItem href="/projects">Projects</AppHeaderNavItem>
  </AppHeaderNav>
  <AppHeaderRight>
    <Button size="sm">Get started</Button>
  </AppHeaderRight>
</AppHeader>

Props

AppHeaderNavItem

Prop	Type	Default	Description
active	boolean	false	Marks the item as the current page - applies full-strength text color and a data-active attribute.
href	string	-	Destination. Renders as an anchor by default; use render to swap in a framework Link.
render	RenderProp<'a'>	-	Polymorphic render prop (e.g. a Next.js <Link>).

Notes

Composition: AppHeaderRight pushes its content to the far end with ml-auto, so it sits opposite the brand/nav.
Routing: Use the render prop on AppHeaderBrand and AppHeaderNavItem to integrate your router's link component.
Block: AppHeader is an opinionated layout. For full control, compose your own header from the underlying primitives.