Skip to main content

Header

Composes brand, navigation, search, and actions into one responsive app bar.

import { Header } from "@/fragments/ui";Source

Preview

import { Box } from '@/components/Box';
import { Button } from '@/components/Button';
import { Header } from '@/components/Header';
import { ThemeToggle } from '@/components/Theme';

<Box width="100%" border rounded="md" overflow="hidden">

Installation

npx @usefragments/cli add header

Writes src/fragments/ui/components/Header plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Anatomy

Header is a compound: import the root and reach its parts through dot notation.

  • Header.SkipLink
  • Header.Trigger
  • Header.Brand
  • Header.Nav
  • Header.NavItem
  • Header.MobileNav
  • Header.MobileNavLink
  • Header.MobileNavActions
  • Header.NavMenu
  • Header.NavMenuItem
  • Header.Search
  • Header.Spacer
  • Header.Actions

Brand, nav, and actions for AppShell layout="default".

import { Box } from '@/components/Box';
import { Button } from '@/components/Button';
import { Header } from '@/components/Header';
import { ThemeToggle } from '@/components/Theme';

<Box width="100%" border rounded="md" overflow="hidden">
  <Header>
    <Header.SkipLink />
    <Header.Trigger />
    <Header.Brand href="/">MyApp</Header.Brand>
    <Header.Nav>
      <Header.NavItem href="/dashboard" active>Dashboard</Header.NavItem>
      <Header.NavItem href="/projects">Projects</Header.NavItem>
      <Header.NavItem href="/settings">Settings</Header.NavItem>
    </Header.Nav>
    <Header.Spacer />
    <Header.Actions>
      <ThemeToggle size="md" />

Examples

Marketing Header

Sticky page-width bar that gains a border on scroll, with a mobile drawer.

import { Box } from '@/components/Box';
import { Button } from '@/components/Button';
import { Header } from '@/components/Header';

<Box width="100%" border rounded="md" overflow="hidden">
  <Header position="sticky" elevatedOnScroll navAlign="center" container="page">

With Dropdown Nav

Header.NavMenu groups related links behind one trigger.

import { Box } from '@/components/Box';
import { Header } from '@/components/Header';
import { ThemeToggle } from '@/components/Theme';

<Box width="100%" border rounded="md" overflow="hidden">
  <Header>

For Sidebar Layout

No brand — the logo lives in the sidebar instead.

import { Box } from '@/components/Box';
import { Header } from '@/components/Header';
import { Input } from '@/components/Input';
import { ThemeToggle } from '@/components/Theme';

<Box width="100%" border rounded="md" overflow="hidden">

Minimal

Just the drawer trigger and actions.

import { Box } from '@/components/Box';
import { Header } from '@/components/Header';
import { ThemeToggle } from '@/components/Theme';

<Box width="100%" border rounded="md" overflow="hidden">
  <Header>

With Skip Link

Header.SkipLink gives keyboard users a jump to main content.

import { Box } from '@/components/Box';
import { Header } from '@/components/Header';

<Box width="100%" border rounded="md" overflow="hidden">
  <Header>
    <Header.SkipLink href="#main-content">Skip to content</Header.SkipLink>

With NavigationMenu

Rich dropdown panels with titles and descriptions.

import { Box } from '@/components/Box';
import { Button } from '@/components/Button';
import { Header } from '@/components/Header';
import { NavigationMenu } from '@/components/NavigationMenu';
import { Stack } from '@/components/Stack';
import { ThemeToggle } from '@/components/Theme';

API

Component props
Prop
Type
Default
Description
childrenRequirednodeNot setHeader content (use Header.Brand, Header.Nav, etc.)
heightstring56pxHeader height
positionenumstaticfixedstickystaticPosition behavior (usually controlled by AppShell)
elevatedOnScrollunionfalseApply the elevated header border after scrolling. Object form accepts { threshold?: number }.
navAlignenumstartcenterstartNavigation alignment inside the header
containerenumfullpagefullHeader content width
iconsobjectNot setOptional icon overrides for Header.Trigger (menu/close) and Header.NavMenu chevron
styleobjectNot set—

Accessibility

  • Include Header.SkipLink for keyboard users
  • Navigation has aria-label for screen readers
  • Active nav items use aria-current="page"
  • Mobile trigger has aria-expanded state
  • NavMenu dropdown opens with click and is keyboard navigable

Guidance

Use when

  • Top-level navigation for an app or site
  • Inside AppShell.Header
  • Anywhere brand, nav, and actions share one row

Avoid when

  • Section headings inside a page (use a heading)
  • Toolbars scoped to one panel (use Toolbar)
  • Sidebar-only navigation (use Sidebar)

Related

  • AppShellparentHeader is typically used inside AppShell.Header
  • SidebarsiblingHeader.Trigger toggles Sidebar on mobile
  • ThemechildThemeToggle is commonly placed in Header.Actions
  • NavigationMenuchildUse NavigationMenu inside Header for rich dropdown nav with auto mobile drawer

Next steps