Skip to content

Header

The bar across the top: brand, links and actions. Links fold into a menu when it is narrow.

import { Button, Header } from '@brand-studio/ui';

export default function HeaderDemo() {
  return (
    <div style={{ width: '100%' }}>
      <Header
        brand={<a href="#">Still</a>}
        items={[
          { label: 'Coffee', href: '#coffee', current: true },
          { label: 'Subscriptions', href: '#subscriptions' },
          { label: 'Brew guides', href: '#guides' },
        ]}
        actions={<Button>Subscribe</Button>}
      />
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, Header } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { Header } from '@brand-studio/ui';

<Header
  brand={<a href="/">Still</a>}
  items={[
    { label: 'Coffee', href: '/coffee', current: true },
    { label: 'Subscriptions', href: '/subscriptions' },
  ]}
  actions={<Button>Subscribe</Button>}
/>

Accessibility

Renders a <header> with a labelled <nav>. The current link gets aria-current="page".
The header measures its own width. Below 40rem the links hide and a Mobile Navigation button takes their place, so it works in a narrow column as well as a narrow screen.
Link and button targets are at least 40px tall.

API Reference

Prop	Type	Default
`brand`	`React.ReactNode`	–
`items?`	`NavLink[]`	–
`actions?`	`React.ReactNode`	–
`label?`	`string`	`'Main'`
`className?`	`string`	`''`