App Header

A comprehensive application header component with mobile responsiveness, optional elements, and customizable branding using Modus Icons.

Interactive Demo

Live Header Preview

Configure the header below to see how different options affect the appearance and behavior.

Header Configuration

Toggle different header elements to see how they affect the layout.

Preset Examples

Common header configurations for different use cases.

Minimal Header

Simple header with just logo and avatar, perfect for clean interfaces.

Clean, minimal interface

Full Featured Header

Complete header with all features enabled, ideal for complex applications.

Feature-rich application header

Mobile Optimized Header

Header optimized for mobile devices with essential features only.

Mobile-first design

Component Location

The app header component is located in the @/components/header directory.

Project Structure

components/
├── header/
│   ├── app-header.tsx               # Main header component
│   └── index.ts                     # Export file
├── ui/
│   ├── button.tsx
│   ├── avatar.tsx
│   ├── dropdown-menu.tsx
│   ├── select.tsx
│   └── ...
└── ...

Usage:
import { AppHeader } from "@/components/header"

Customization Examples

Examples of different header configurations for various use cases.

Customization examples

// Minimal header with only logo and avatar
<AppHeader
  showMenuButton={false}
  showSearchButton={false}
  showHelpButton={false}
  showAppLauncher={false}
  showModeToggle={false}
  showProjectDropdown={false}
  logoText="Simple App"
  avatarFallback="SA"
/>

// Full featured header with custom logo
<AppHeader
  logoSrc="/logo.png"
  logoAlt="Company Logo"
  logoText="Enterprise App"
  avatarSrc="/avatar.jpg"
  avatarFallback="EA"
  showProjectDropdown={true}
  projects={projects}
  selectedProject={selectedProject}
  onProjectChange={setSelectedProject}
/>

// Mobile-optimized header
<AppHeader
  showMenuButton={true}
  showSearchButton={true}
  showHelpButton={false}
  showAppLauncher={false}
  showModeToggle={true}
  showAvatar={true}
  logoText="Mobile App"
/>

Responsive Design

The header automatically adapts to different screen sizes with mobile-first design.

Responsive behavior

// The header automatically adapts to mobile screens:
// - Menu button appears on mobile (md:hidden)
// - Logo text hides on small screens (hidden sm:inline-block)
// - Some buttons move to overflow menu on mobile
// - Project dropdown moves to mobile overflow menu
// - Uses responsive breakpoints (sm:, md:, lg:)

// Custom responsive behavior
<AppHeader
  className="lg:px-8 md:px-4 px-2"
  showMenuButton={true} // Always visible on mobile
  showSearchButton={true} // Moves to overflow on mobile
  showHelpButton={true} // Moves to overflow on mobile
  showAppLauncher={true} // Moves to overflow on mobile
/>

Usage

components/my-app.tsx

import { AppHeader } from "@/components/header"

function MyApp() {
  const [selectedProject, setSelectedProject] = useState("project-1")
  
  const projects = [
    { id: "project-1", name: "Website Redesign", description: "Complete redesign" },
    { id: "project-2", name: "Mobile App", description: "iOS and Android app" },
  ]

  const handleMenuClick = () => {
    console.log("Menu clicked")
  }

  const handleSearchClick = () => {
    console.log("Search clicked")
  }

  return (
    <AppHeader
      logoText="My App"
      showProjectDropdown={true}
      projects={projects}
      selectedProject={selectedProject}
      onProjectChange={setSelectedProject}
      onMenuClick={handleMenuClick}
      onSearchClick={handleSearchClick}
      avatarFallback="JD"
    />
  )
}

API Reference

AppHeader Props

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`showMenuButton`	`boolean`	`true`	Show mobile menu button
`showLogo`	`boolean`	`true`	Show logo and app name
`showSearchButton`	`boolean`	`true`	Show search button
`showHelpButton`	`boolean`	`true`	Show help button
`showAppLauncher`	`boolean`	`true`	Show app launcher dropdown
`showAvatar`	`boolean`	`true`	Show user avatar dropdown
`showModeToggle`	`boolean`	`true`	Show dark/light mode toggle
`showProjectDropdown`	`boolean`	`false`	Show project selector dropdown
`logoSrc`	`string`	-	Custom logo image URL
`logoText`	`string`	`"App"`	Application name text
`avatarSrc`	`string`	-	User avatar image URL
`avatarFallback`	`string`	`"U"`	Avatar fallback text
`projects`	`Array<{id: string, name: string, description?: string}>`	`[]`	Available projects for dropdown
`selectedProject`	`string`	-	Currently selected project ID
`onProjectChange`	`(projectId: string) => void`	-	Project selection callback
`onMenuClick`	`() => void`	-	Menu button click callback
`onSearchClick`	`() => void`	-	Search button click callback
`onHelpClick`	`() => void`	-	Help button click callback
`onAppLauncherClick`	`() => void`	-	App launcher click callback
`onAvatarClick`	`() => void`	-	Avatar click callback

UIs