Skip to main content

Header

Header

Flexible application header with navigation support

Tags: component layout navigation

View Demo

Header is a flexible component for application headers, supporting both dashboard and public layouts with mobile-responsive navigation.

Import​

<script>
  import { Header } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<Header title="Dashboard" />

Props​

Prop Type Default Description
showMenuButton boolean false Show hamburger menu button
menuOpen boolean false Mobile menu state
onMenuClick () => void - Menu button callback
showCollapseButton boolean false Show sidebar collapse button
sidebarCollapsed boolean false Sidebar collapsed state
onCollapseClick () => void - Collapse button callback
title string - Page title
start Snippet - Content after buttons
nav Snippet - Navigation content
end Snippet - Right side content
mobileNav Snippet - Mobile navigation drawer
mobileBreakpoint 'sm' | 'md' | 'lg' 'lg' Responsive breakpoint
strongBorder boolean false Thicker bottom border
backdropBlur boolean false Blur effect
elevated boolean false Higher z-index
maxWidth 'none' | 'sm' | ... | '7xl' 'none' Content max-width
search HeaderSearchConfig - Search configuration
class string - Additional classes

Dashboard Header​

For dashboard layouts with sidebar toggle:

<script>
  let sidebarOpen = $state(true);
  let isMobile = $state(false);
</script>

<Header
  showMenuButton={isMobile}
  menuOpen={sidebarOpen}
  onMenuClick={() => (sidebarOpen = !sidebarOpen)}
  showCollapseButton={!isMobile}
  sidebarCollapsed={!sidebarOpen}
  onCollapseClick={() => (sidebarOpen = !sidebarOpen)}
  title="Dashboard"
/>

Public Header​

For marketing/public pages:

<script>
  let mobileMenuOpen = $state(false);
</script>

<Header
  showMenuButton
  menuOpen={mobileMenuOpen}
  onMenuClick={() => (mobileMenuOpen = !mobileMenuOpen)}
  mobileBreakpoint="md"
  backdropBlur
  elevated
  maxWidth="7xl"
>
  {#snippet start()}
    <a href="/">
      <Logo />
    </a>
  {/snippet}

  {#snippet nav()}
    <a href="/features">Features</a>
    <a href="/pricing">Pricing</a>
    <a href="/docs">Docs</a>
  {/snippet}

  {#snippet end()}
    <Button href="/login" variant="outline">Log In</Button>
    <Button href="/signup">Get Started</Button>
  {/snippet}

  {#snippet mobileNav()}
    <nav class="p-4 space-y-2">
      <a href="/features" class="block p-2">Features</a>
      <a href="/pricing" class="block p-2">Pricing</a>
      <a href="/docs" class="block p-2">Docs</a>
    </nav>
  {/snippet}
</Header>

With Page Title​

<Header title="User Settings" />

Start Content​

Add content after menu/collapse buttons:

<Header>
  {#snippet start()}
    <Breadcrumbs>
      <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
      <Breadcrumbs.Item href="/settings">Settings</Breadcrumbs.Item>
      <Breadcrumbs.Item>Profile</Breadcrumbs.Item>
    </Breadcrumbs>
  {/snippet}
</Header>

End Content​

Add right-aligned content:

<Header title="Dashboard">
  {#snippet end()}
    <Button variant="ghost" size="icon">
      <BellIcon />
    </Button>
    <Avatar>JD</Avatar>
  {/snippet}
</Header>

Navigation Content​

Desktop navigation between start and end:

<Header>
  {#snippet nav()}
    <a href="/overview" class="text-sm font-medium">Overview</a>
    <a href="/analytics" class="text-sm font-medium">Analytics</a>
    <a href="/reports" class="text-sm font-medium">Reports</a>
  {/snippet}
</Header>

Mobile Navigation​

Slide-down drawer for mobile:

<Header
  showMenuButton
  menuOpen={mobileMenuOpen}
  onMenuClick={() => (mobileMenuOpen = !mobileMenuOpen)}
>
  {#snippet mobileNav()}
    <ul class="p-4 space-y-2 border-b">
      <li><a href="/features">Features</a></li>
      <li><a href="/pricing">Pricing</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  {/snippet}
</Header>
<Header
  title="Documentation"
  search={{
    enabled: true,
    placeholder: 'Search docs...',
    onSearch: (query) => handleSearch(query),
  }}
/>

Backdrop Blur​

For floating header effect:

<Header backdropBlur elevated class="fixed top-0 left-0 right-0" />

Strong Border​

Brand-styled thick border:

<Header strongBorder />

Content Width​

Constrain content to max-width:

<Header maxWidth="7xl">
  <!-- Content centered within max-width -->
</Header>

Breakpoint Configuration​

Control when mobile/desktop layouts switch:

<!-- Switch at sm breakpoint (640px) -->
<Header mobileBreakpoint="sm" />

<!-- Switch at md breakpoint (768px) -->
<Header mobileBreakpoint="md" />

<!-- Switch at lg breakpoint (1024px, default) -->
<Header mobileBreakpoint="lg" />

Examples​

E-commerce Header​

<Header backdropBlur elevated maxWidth="7xl">
  {#snippet start()}
    <a href="/" class="font-bold text-xl">Store</a>
  {/snippet}

  {#snippet nav()}
    <a href="/products">Products</a>
    <a href="/categories">Categories</a>
    <a href="/deals">Deals</a>
  {/snippet}

  {#snippet end()}
    <Button variant="ghost" size="icon">
      <SearchIcon />
    </Button>
    <Button variant="ghost" size="icon">
      <CartIcon />
      <Badge class="absolute -top-1 -right-1">3</Badge>
    </Button>
    <Button variant="ghost" size="icon">
      <UserIcon />
    </Button>
  {/snippet}
</Header>

Admin Header​

<Header
  showCollapseButton
  sidebarCollapsed={!sidebarOpen}
  onCollapseClick={() => (sidebarOpen = !sidebarOpen)}
  title="Admin Panel"
>
  {#snippet end()}
    <div class="flex items-center gap-4">
      <Badge variant="outline">v2.1.0</Badge>
      <Button variant="ghost" size="icon">
        <SettingsIcon />
      </Button>
      <DropdownMenu>
        <DropdownMenu.Trigger>
          <Avatar>AD</Avatar>
        </DropdownMenu.Trigger>
        <DropdownMenu.Content>
          <DropdownMenu.Item>Profile</DropdownMenu.Item>
          <DropdownMenu.Item>Settings</DropdownMenu.Item>
          <DropdownMenu.Separator />
          <DropdownMenu.Item>Log out</DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu>
    </div>
  {/snippet}
</Header>

Dimensions​

  • Height: 64px (h-16)
  • Z-index: 30 (normal) or 50 (elevated)
  • Border: 1px (normal) or 2px (strong)

Accessibility​

  • Menu button has aria-expanded
  • Collapse button has an aria-label and matching tooltip ("Collapse sidebar" / "Expand sidebar"). It uses a sidebar-panel icon, not a chevron, so it isn't mistaken for Back
  • Navigation uses semantic nav element
  • Mobile menu is keyboard accessible
On this page