Skip to content

Product Bar

The bar for one product: its name, its own pages and one action. It sticks to the top while the page scrolls.

Scroll this frame: the bar stays at the top.

import { ActionLink, ProductBar } from '@brand-studio/ui';

export default function ProductBarDemo() {
  return (
    <div style={{ width: '100%', height: 280, overflow: 'auto' }}>
      <ProductBar
        title="Halden R"
        items={[
          { label: 'Overview', href: '#overview', current: true },
          { label: 'Tech specs', href: '#specs' },
          { label: 'Compare', href: '#compare' },
        ]}
        action={<ActionLink href="#buy" shape="pill">Buy</ActionLink>}
      />
      <div style={{ padding: '2rem 1.5rem', height: 800, color: 'var(--bs-muted)' }}>Scroll this frame: the bar stays at the top.</div>
    </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, ProductBar } from '@brand-studio/ui';
import brand from './brand.json';

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

Usage

import { ActionLink, ProductBar } from '@brand-studio/ui';

<ProductBar
  title="Halden R"
  href="/r"
  items={[{ label: 'Overview', href: '/r', current: true }, { label: 'Tech specs', href: '/r/specs' }]}
  action={<ActionLink href="/buy" shape="pill">Buy</ActionLink>}
/>

Place it right after a Site Bar, or at the top of the page on its own. It sticks at top: var(--bs-productbar-top, 0).

Accessibility

The links sit in a <nav> named after the product, and the current page has aria-current="page".
When the bar is narrower than 44rem, the links fold under an arrow button with aria-expanded. Choosing a link closes the list.

API Reference

Prop	Type	Default
`title`	`React.ReactNode`	–
`href?`	`string`	`'#'`
`items?`	`NavLink[]`	–
`action?`	`React.ReactNode`	–
`label?`	`string`	–
`className?`	`string`	`''`