# Header Bar
> Brand left, links and a call to action right. Folds into a native details menu when narrow. No JavaScript.
- **Slug:** `header-bar`
- **Kind:** section ยท **Category:** Site chrome
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/ui/components/header-bar
- **All files in one bundle:** https://viewership.ai/ui/components/header-bar.bundle.txt
- **Structured JSON:** https://viewership.ai/ui/components/header-bar.json
## Install
1. Import the foundation tokens once (download: https://viewership.ai/ui/raw/foundation.css.txt):
```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```
2. Copy this file into `src/components/viewership/header-bar/`:
- `HeaderBar.astro` (raw: https://viewership.ai/ui/raw/header-bar/HeaderBar.astro.txt)
3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:
- `button`: `Button.astro` (docs: https://viewership.ai/ui/components/button.md)
npm packages: none.
## Usage
```astro
---
import HeaderBar from "../components/viewership/header-bar/HeaderBar.astro";
---
```
## Example
The gallery demo, verbatim. Use the import path from Usage instead of `./`.
```astro
---
import HeaderBar from "./HeaderBar.astro";
---
```
## Props
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `brand` | `string` | | Brand name, set as text unless the logo slot is used. |
| `brandHref` | `string` | `"/"` | Where the brand links. |
| `links` | `{ label: string; href: string }[]` | | Main navigation. |
| `cta` | `{ label: string; href: string }` | | Button at the end of the nav. |
| `current` | `string` | | Href of the current page (sets aria-current). |
| `sticky` | `boolean` | `false` | Stick to the top while scrolling. |
| `slot: logo` | `slot` | | Replaces the text brand. |
## Source
### `src/components/viewership/header-bar/HeaderBar.astro`
```astro
---
/**
* HeaderBar: brand left, links and a call to action right. On narrow widths
* the links fold into a native menu, so it needs no JavaScript.
*
* Mark the current page with `current` (an href) for aria-current.
*
* @example
*
*/
import Button from "../button/Button.astro";
interface NavLink {
label: string;
href: string;
}
interface Props {
brand: string;
brandHref?: string;
links: NavLink[];
cta?: NavLink;
/** Href of the current page. */
current?: string;
/** Stick to the top of the viewport while scrolling. */
sticky?: boolean;
class?: string;
}
const { brand, brandHref = "/", links, cta, current, sticky = false, class: className } = Astro.props;
---
```