SiteHeader

The SiteHeader component is the main header for your documentation site, providing navigation, search functionality, and utility buttons.

Usage

Copy<script setup lang="ts">
import { SiteHeader } from '@/components/SiteHeader'
</script>

<template>
  <SiteHeader />
</template>

Features

Navigation

The header includes:

• Logo: Clickable logo that links to home
• Main Navigation: Desktop navigation menu
• Mobile Navigation: Hamburger menu for mobile devices
• Command Menu: Search functionality (⌘ K / Ctrl K)

Utility Buttons

• GitHub Link: Link to your GitHub repository with star count
• Site Config: Toggle layout (fixed/full width)
• Mode Switcher: Toggle between light and dark mode

Responsive Design

• Mobile: Shows hamburger menu, hides desktop nav
• Desktop: Shows full navigation and all utilities
• Sticky positioning at the top of the page

Structure

The header is composed of several child components:

Copy<template>
  <header>
    <!-- Mobile Navigation -->
    <MobileNav />
    
    <!-- Logo -->
    <Button as-child>
      <NuxtLink to="/">
        <img src="/logo.svg" />
      </NuxtLink>
    </Button>
    
    <!-- Main Navigation -->
    <MainNav />
    
    <!-- Right Side Utilities -->
    <CommandMenu />
    <GitHubLink />
    <SiteConfig />
    <ModeSwitcher />
  </header>
</template>

Configuration

The header uses configuration from:

Site Config

Copy// app/lib/siteConfig.ts
export const siteConfig = {
  name: "Your Site Name",
  navItems: [
    { href: "/docs", label: "Docs" },
  ],
}

Navigation

Copy// app/lib/navigation.ts
export const MAIN_NAVIGATION = [
  { href: "/docs", name: "Docs" },
]

API Reference

SiteHeader

The SiteHeader component doesn't accept props. It automatically:

• Fetches navigation data using useNavigation()
• Uses siteConfig for branding and links
• Uses MAIN_NAVIGATION for navigation items

Customization

Styling

The header uses:

• Sticky positioning (sticky top-0 z-50)
• Background color (bg-background)
• Container wrapper for responsive width
• Height variable (--header-height)

Adding Items

Customizing Logo

Replace the logo image:

1. Add your logo to public/logo.svg
2. Or update the image source in SiteHeader.vue

Hiding Components

You can conditionally hide components:

Copy<template>
  <SiteConfig v-if="showConfig" />
</template>

Related Components

• MainNav - Desktop navigation
• MobileNav - Mobile navigation menu
• CommandMenu - Search command palette
• GitHubLink - GitHub repository link
• SiteConfig - Layout toggle
• ModeSwitcher - Theme toggle