---
type: block
title: Header
description: Header layouts for brand, navigation, and high-level page actions.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

Header blocks render the same `buttons` on desktop and in the mobile menu,
with visible labels and an optional icon. Links open in the same tab; set
`target: "_blank"` on a button that should open a new tab.
The logo image is decorative, because the logo label names the link.

```astro live props={{ name: 'header-1' }}
---
import HeaderBlock from "@/components/blocks/header-1.astro"
---

<HeaderBlock
  logo={{
    label: "Fulldev",
    href: "/",
  }}
  navigation={[
    { label: "Docs", href: "#" },
    { label: "Components", href: "#" },
    { label: "Blocks", href: "#", active: true },
    { label: "Pricing", href: "#" },
  ]}
  buttons={[
    {
      label: "GitHub",
      href: "https://github.com/fulldotdev/ui",
      icon: "github",
      target: "_blank",
    },
    { label: "Sign in", href: "#" },
    { label: "Get started", href: "#" },
  ]}
  navigationLabel="Header 1 navigation"
  menu={{
    label: "Open menu",
    title: "Menu",
    description: "Site navigation and actions.",
    closeLabel: "Close",
  }}
/>
```

```astro live props={{ name: 'header-2' }}
---
import Header2Block from "@/components/blocks/header-2.astro"
---

<Header2Block
  logo={{
    label: "Acme Inc",
    href: "/",
  }}
  navigation={[
    { label: "Products", href: "#" },
    { label: "Solutions", href: "#" },
    { label: "Pricing", href: "#" },
    { label: "Blog", href: "#" },
  ]}
  buttons={[
    { label: "Sign in", href: "#" },
    { label: "Get started", href: "#" },
  ]}
  navigationLabel="Header 2 navigation"
  menu={{
    label: "Open menu",
    title: "Menu",
    description: "Site navigation and actions.",
    closeLabel: "Close",
  }}
/>
```

```astro live props={{ name: 'header-3' }}
---
import Header3Block from "@/components/blocks/header-3.astro"
---

<Header3Block
  logo={{
    label: "Acme Inc",
    href: "/",
  }}
  navigation={[
    { label: "Docs", href: "#" },
    { label: "Components", href: "#" },
    { label: "Blocks", href: "#" },
  ]}
  buttons={[
    {
      label: "GitHub",
      href: "https://github.com/fulldotdev/ui",
      icon: "github",
      target: "_blank",
    },
    { label: "Roadmap", href: "#" },
    { label: "Browse blocks", href: "#" },
  ]}
  navigationLabel="Header 3 navigation"
  menu={{
    label: "Open menu",
    title: "Menu",
    description: "Site navigation and actions.",
    closeLabel: "Close",
  }}
/>
```

```astro live props={{ name: 'header-4' }}
---
import Header4Block from "@/components/blocks/header-4.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Header4Block
  logo={{
    label: "Acme Inc",
    href: "/",
  }}
  navigation={[
    {
      label: "Products",
      href: "#",
      description: "Plan, launch, and measure product work from one place.",
      image: { src: placeholderImage },
      links: [
        {
          label: "Analytics",
          href: "#",
          description: "Track funnels, cohorts, and conversion paths.",
          icon: "chart-no-axes-column",
        },
        {
          label: "Automation",
          href: "#",
          description: "Trigger workflows from product and customer events.",
          icon: "workflow",
        },
        {
          label: "Integrations",
          href: "#",
          description: "Connect the tools your team already uses.",
          icon: "plug",
        },
      ],
    },
    {
      label: "Solutions",
      href: "#",
      description: "Focused workflows for teams that need more context.",
      links: [
        {
          label: "Marketing",
          href: "#",
          description: "Launch campaigns with shared assets and reporting.",
          icon: "megaphone",
        },
        {
          label: "Operations",
          href: "#",
          description: "Coordinate approvals, handoffs, and recurring work.",
          icon: "settings-2",
        },
      ],
    },
    { label: "Pricing", href: "#" },
    { label: "Customers", href: "#" },
  ]}
  buttons={[
    { label: "Sign in", href: "#" },
    { label: "Start trial", href: "#" },
  ]}
  navigationLabel="Header 4 navigation"
  menu={{
    label: "Open menu",
    title: "Menu",
    description: "Site navigation and actions.",
    closeLabel: "Close",
  }}
/>
```

```astro live props={{ name: 'header-5' }}
---
import Header5Block from "@/components/blocks/header-5.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Header5Block
  logo={{
    label: "Northstar",
    href: "/",
  }}
  navigation={[
    {
      label: "Platform",
      href: "#",
      description: "A shared workspace for strategy, delivery, and insight.",
      image: { src: placeholderImage },
      links: [
        {
          label: "Roadmaps",
          href: "#",
          description: "Sequence initiatives and communicate priorities.",
          icon: "map",
        },
        {
          label: "Dashboards",
          href: "#",
          description: "Keep performance, adoption, and risk visible.",
          icon: "layout-dashboard",
        },
        {
          label: "AI briefs",
          href: "#",
          description: "Summarize research, feedback, and meeting notes.",
          icon: "sparkles",
        },
        {
          label: "Permissions",
          href: "#",
          description: "Control access for teams, clients, and partners.",
          icon: "shield-check",
        },
      ],
    },
    {
      label: "Resources",
      href: "#",
      description: "Guides and references for better operating cadence.",
      links: [
        {
          label: "Playbooks",
          href: "#",
          description: "Reusable operating patterns for product teams.",
          icon: "book-open",
        },
        {
          label: "Templates",
          href: "#",
          description: "Kickstart planning, reporting, and retrospectives.",
          icon: "copy-check",
        },
      ],
    },
    { label: "Enterprise", href: "#" },
    { label: "Pricing", href: "#" },
  ]}
  buttons={[
    { label: "Contact sales", href: "#" },
    { label: "Get started", href: "#" },
  ]}
  navigationLabel="Header 5 navigation"
  menu={{
    label: "Open menu",
    title: "Menu",
    description: "Site navigation and actions.",
    closeLabel: "Close",
  }}
/>
```

## Installation

```bash
npx shadcn@latest add @fulldev/header-1 @fulldev/header-2 @fulldev/header-3 @fulldev/header-4 @fulldev/header-5
```