# Marketing Header

> The wordmark, the main links and the actions in one sticky bar that folds into a floating pill once the page starts to scroll.

Source: https://ritla.app/ui/marketing-header

## Installation

Installing from the registry is coming soon. Until then, these are the commands you will run.

```bash
npx ritla add marketing-header
```

With the shadcn CLI instead:

```bash
npx shadcn@latest add @ritla/marketing-header
```

Dependencies: `@phosphor-icons/react`

## Usage

```tsx
import { MarketingHeader } from "@/components/ui/marketing-header";

<MarketingHeader
  logo={<Wordmark />}
  links={[
    { label: "Components", href: "/ui" },
    { label: "Docs", href: "/docs" },
    { label: "Pricing", href: "/#pricing" },
  ]}
  menuLinks={[{ label: "Sign in", href: "/login" }]}
  actions={<Button size="sm" render={<a href="/#top" />}>Scan your site free</Button>}
/>
```

## Examples

### The folded pill

With `folded` the header holds the pill: a frosted card with a hairline border and a shadow. It is as tall as the open bar, so the page never moves under the reader's thumb while it folds.

Live preview: https://ritla.app/_kanz/preview/ltr/marketing-header-folded

## API reference

### `MarketingHeader`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `logo` | `ReactNode` | None | The wordmark, linked home. |
| `links` | `{ label, href, current?, lang? }[]` | None | The main links, in reading order. `current` sets `aria-current="page"`; `lang` marks text in another language, such as Figma. |
| `actions` | `ReactNode` | None | The bar's end: language, sign in and one call to action. They stay in the bar on a phone. |
| `menuLinks` | `{ label, href }[]` | None | Extra links in the phone menu only, after `links`. |
| `folded` | `boolean` | None | Without it the header folds with the scroll; `true` or `false` holds one state. |
| `copy` | `{ nav, menu, close }` | None | The nav's name and the menu button's two names; the default follows the page language. |

## Accessibility

Keyboard (keys as in left-to-right; arrows swap in right-to-left):

- `Tab`: The wordmark, the links, then the actions; the menu button on narrow screens.
- `Enter`: The menu button opens or closes the links under the bar.

ARIA:

- The header is the page's banner (`header`) and the links a named navigation (“Primary”).
- The current page's link carries `aria-current="page"`.
- The menu button states `aria-expanded` and names what it will do (“Menu” or “Close menu”).

## Arabic and RTL notes

Mirrors:

- The wordmark at the line's start on the right, the actions at its end on the left.
- The carets in the phone menu point left.

Does not mirror:

- The wordmark itself is Latin and never mirrors.

Numerals: The header writes no numbers.

Arabic typography: Links `body-14` Medium, `body-16` in the phone menu.