Header

A responsive header with navigation, search, and profile drawer

Preview

Interactive header component demo

Loading header...

📦 Installation

pnpm dlx shadcn@latest add https://zezo-ui.vercel.app/r/zezo-header.json

💡 Usage Example

import Header from "@/components/zezo/header/header";

<Header
  logo={{
    src: "/logo.webp",
    alt: "Logo",
    href: "/"
  }}
  menu={{
    menu: [
      {
        _id: "1",
        name: "Home",
        slug: "home",
        description: "",
        order: 1,
        icon: null,
        show_in_menu: true
      }
      // ... more menu items
    ],
    menuShowLimit: 4,      // optional
    menuPrefix: "/browse"  // optional
  }}
  search={{
    placeholder: "Search..." // optional
  }}
  profile={{ href: "/profile" }}  // optional
  user={currentUser}               // optional
  onLogout={handleLogout}          // optional
/>

📘 Props

Prop	Type	Required	Description
logo	`object`	Yes	Logo image with optional link
menu	`object`	Yes	Navigation menu items array
search	`object`	No	Search configuration (placeholder, onChange, href)
isLoading	`boolean`	No	Loading state for logout (default: false)
profile	`object`	No	Profile page configuration
user	`IWhoami \| null`	No	User data (IWhoami from zezo-ott-api-client)
onLogout	`() => void`	No	Logout handler function

✨ Features

🎨 Dark Mode

Automatic theme switching

📱 Responsive

Mobile & desktop layouts

🔍 Search

Built-in search functionality

👤 Profile

User profile drawer

💳 Subscription

Subscription status display

📋 Menu

Navigation with overflow handling