# Header Centered

> Brand in the middle, links split either side, optional announcement strip. Folds into a details menu.

- **Slug:** `header-centered`
- **Kind:** section · **Category:** Site chrome
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/header-centered
- **All files in one bundle:** https://viewership.ai/design/components/header-centered.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/header-centered.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/header-centered/`:

   - `HeaderCentered.astro` (raw: https://viewership.ai/design/raw/header-centered/HeaderCentered.astro.txt)

npm packages: none.

## Usage

```astro
---
import HeaderCentered from "../components/viewership/header-centered/HeaderCentered.astro";
---

<HeaderCentered />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import HeaderCentered from "./HeaderCentered.astro";
---

<div>
  <HeaderCentered
    brand="Northwind"
    announcement="Free repair check-ups through October."
    announcementHref="#"
    current="#shop"
    left={[
      { label: "Shop", href: "#shop" },
      { label: "Repairs", href: "#repairs" },
      { label: "Resale", href: "#resale" },
    ]}
    right={[
      { label: "Journal", href: "#journal" },
      { label: "Account", href: "#account" },
      { label: "Cart (0)", href: "#cart" },
    ]}
  />
  <div class="demo__page" aria-hidden="true"></div>
</div>

<style>
  .demo__page {
    height: 260px;
    background: repeating-linear-gradient(to bottom, transparent 0 40px, var(--vs-line-soft) 40px 41px), var(--vs-page);
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `brand` | `string` |  | Brand name, set as text unless the logo slot is used. |
| `brandHref` | `string` | `"/"` | Where the brand links. |
| `left` | `{ label: string; href: string }[]` |  | Links left of the brand. |
| `right` | `{ label: string; href: string }[]` | `[]` | Links right of the brand. |
| `announcement` | `string` |  | One line in a strip above the header. |
| `announcementHref` | `string` |  | Makes the announcement a link. |
| `current` | `string` |  | Href of the current page. |
| `slot: logo` | `slot` |  | Replaces the text brand. |

## Source

### `src/components/viewership/header-centered/HeaderCentered.astro`

```astro
---
/**
 * HeaderCentered: brand in the middle, links split either side, with an
 * optional announcement strip above. Editorial and shop-front sites suit it.
 * Folds into a native <details> menu when narrow.
 *
 * @example
 * <HeaderCentered brand="Northwind" left={[{ label: "Shop", href: "/shop" }]}
 *   right={[{ label: "Account", href: "/account" }]} announcement="Free repairs this month" />
 */
interface NavLink {
  label: string;
  href: string;
}
interface Props {
  brand: string;
  brandHref?: string;
  left: NavLink[];
  right?: NavLink[];
  /** One line in a strip above the header. */
  announcement?: string;
  announcementHref?: string;
  current?: string;
  class?: string;
}

const { brand, brandHref = "/", left, right = [], announcement, announcementHref, current, class: className } = Astro.props;
const all = [...left, ...right];
---

<header class:list={["vs-header-centered", className]}>
  {
    announcement && (
      <p class="vs-header-centered__strip">{announcementHref ? <a href={announcementHref}>{announcement}</a> : announcement}</p>
    )
  }
  <div class="vs-header-centered__inner">
    <nav class="vs-header-centered__side" aria-label="Main">
      <ul>
        {
          left.map((l) => (
            <li>
              <a href={l.href} aria-current={l.href === current ? "page" : undefined}>
                {l.label}
              </a>
            </li>
          ))
        }
      </ul>
    </nav>

    <a class="vs-header-centered__brand" href={brandHref}>
      <slot name="logo">{brand}</slot>
    </a>

    <nav class="vs-header-centered__side vs-header-centered__side--end" aria-label="Secondary">
      <ul>
        {
          right.map((l) => (
            <li>
              <a href={l.href} aria-current={l.href === current ? "page" : undefined}>
                {l.label}
              </a>
            </li>
          ))
        }
      </ul>
    </nav>

    <details class="vs-header-centered__menu">
      <summary>Menu</summary>
      <nav class="vs-header-centered__sheet" aria-label="Main">
        <ul>
          {
            all.map((l) => (
              <li>
                <a href={l.href} aria-current={l.href === current ? "page" : undefined}>
                  {l.label}
                </a>
              </li>
            ))
          }
        </ul>
      </nav>
    </details>
  </div>
</header>

<style>
  .vs-header-centered {
    container-type: inline-size;
    position: relative;
    z-index: 10;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
    border-bottom: calc(var(--vs-border-w) + 1px) solid var(--vs-ink);
  }
  .vs-header-centered a {
    color: inherit;
    text-decoration: none;
  }
  .vs-header-centered a:focus-visible,
  .vs-header-centered summary:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .vs-header-centered ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .vs-header-centered__strip {
    margin: 0;
    padding: 8px var(--vs-gutter);
    background: var(--vs-ink);
    color: var(--vs-ink-inverse);
    font-size: 0.8125rem;
    text-align: center;
  }
  .vs-header-centered__strip a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .vs-header-centered__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: 72px;
    gap: 24px;
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: 0 var(--vs-gutter);
  }
  .vs-header-centered__brand {
    font-family: var(--vs-font-display, var(--vs-font-sans));
    font-size: 1.625rem;
    font-weight: var(--vs-display-weight);
    letter-spacing: var(--vs-display-tracking);
    text-transform: var(--vs-display-transform);
  }
  .vs-header-centered__side {
    display: none;
  }
  .vs-header-centered__side ul {
    display: flex;
    gap: 24px;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
  }
  .vs-header-centered__side--end ul {
    justify-content: flex-end;
  }
  .vs-header-centered__side a[aria-current="page"],
  .vs-header-centered__side a:hover {
    text-decoration: underline;
    text-decoration-color: var(--vs-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
  .vs-header-centered__menu {
    justify-self: end;
  }
  .vs-header-centered__menu summary {
    padding: 8px 0;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    list-style: none;
  }
  .vs-header-centered__menu summary::-webkit-details-marker {
    display: none;
  }
  .vs-header-centered__sheet {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px var(--vs-gutter) 20px;
    background: var(--vs-page);
    border-bottom: calc(var(--vs-border-w) + 1px) solid var(--vs-ink);
    animation: vs-fade-in var(--vs-duration) var(--vs-ease-out);
  }
  .vs-header-centered__sheet a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--vs-line);
    font-size: 1.0625rem;
  }
  @container (min-width: 820px) {
    .vs-header-centered__inner {
      grid-template-columns: 1fr auto 1fr;
    }
    .vs-header-centered__side {
      display: block;
    }
    .vs-header-centered__menu {
      display: none;
    }
  }
</style>
```