Skip to content

Mobile Navigation

A menu button that opens the links in a full-screen panel.

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

export default function MobileNavigationDemo() {
  return (
    <MobileNavigation
      title="Still"
      items={[
        { label: 'Coffee', href: '#coffee', current: true },
        { label: 'Subscriptions', href: '#subscriptions' },
        { label: 'Brew guides', href: '#guides' },
        { label: 'Account', href: '#account' },
      ]}
    />
  );
}

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, MobileNavigation } from '@brand-studio/ui';
import brand from './brand.json';

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

Usage

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

<MobileNavigation title="Still" items={[{ label: 'Coffee', href: '/coffee', current: true }]} />

Accessibility

The button has a text label for screen readers. The panel is a modal dialog: focus moves inside, Escape closes it and focus returns to the button.
Following a link closes the panel.
Header includes this automatically; use it on its own when you build your own bar.

API Reference

Prop	Type	Default
`items`	`NavLink[]`	–
`label?`	`string`	`'Menu'`
`title?`	`string`	`'Navigation'`
`closeLabel?`	`string`	`'Close menu'`
`className?`	`string`	`''`