Theme Default

Components

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.

Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

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

npx ritla add marketing-header

Also works with shadcn: npx shadcn@latest add @ritla/marketing-header

Dependencies it brings: @phosphor-icons/react

Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

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.

Get the code ›

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 are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`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.