NavigationBar

The bar at the top of a site: the logo, the main links and the account actions. On small screens the links move into a menu.

Usage

Import the component and render it.

import { NavigationBar } from 'src/components/NavigationBar/NavigationBar';
import { BellSimpleIcon } from '@phosphor-icons/react';

<NavigationBar
  variant="default"
  size="desktop"
  logo="/docs/visualist-logo.png"
  logoAlt="Visualist home"
  links={[{"label":"Home","href":"#","current":true},{"label":"Products","href":"#"},{"label":"About","href":"#"},{"label":"Contact","href":"#"}]}
  actions={[{"label":"Notifications","icon":<BellSimpleIcon />}]}
  loginLabel="Log in"
  ctaLabel="Get Started"
/>

Accessibility

Role: header with a navigation landmark (the links); the menu is a modal Drawer dialog.

Key	Action
`Tab`	Moves through the logo, the links and the actions (Mobile: the Menu Button, the logo, Search, the CTA)
`Typing (Search Field)`	Opens the search with the typed text
`Enter / ↓ (Search Field)`	Opens the search empty
`Enter / Space (Menu Button)`	Opens the menu; focus moves into it
`Escape`	Closes the menu and returns focus to the Menu Button

The current page link has aria-current="page".
The icon-only Buttons are named by their labels ("Search", "Notifications", "Open menu").
The Search Field and the Search Button have aria-haspopup="dialog": typing in the field, clicking it, Enter or ↓ (or the Button) call onSearch; the field stays empty, so the typed text continues in the dialog.
The logo link is named by logoAlt.

Size

Set the size prop: Desktop is "desktop", Mobile is "mobile".

Desktop

Mobile

<NavigationBar size="desktop" />
<NavigationBar size="mobile" />

Style

Set the variant prop: Default is "default", Elevated is "elevated".

Default

Elevated

<NavigationBar variant="default" />
<NavigationBar variant="elevated" />

Composition

Use the following composition to build a NavigationBar:

NavigationBar
├── NavLink
├── NavigationMenu
│   ├── TextLink
│   └── Separator
├── Button
├── Input
├── TextLink
├── Separator
└── Drawer

NavLink

A link of the Navigation Bar; Current marks the page you are on. Only used inside NavigationBar.

NavLink

<NavLink label="Products" href="#" />

Actions

Pass callbacks to respond to the component.

import { NavigationBar } from 'src/components/NavigationBar/NavigationBar';
import { BellSimpleIcon } from '@phosphor-icons/react';

<NavigationBar
  variant="default"
  size="desktop"
  logo="/docs/visualist-logo.png"
  logoAlt="Visualist home"
  links={[{"label":"Home","href":"#","current":true},{"label":"Products","href":"#"},{"label":"About","href":"#"},{"label":"Contact","href":"#"}]}
  actions={[{"label":"Notifications","icon":<BellSimpleIcon />}]}
  loginLabel="Log in"
  ctaLabel="Get Started"
  onSearch={(query) => console.log(query)}
  onCtaClick={() => console.log('onCtaClick')}
  onMenuOpenChange={(open) => console.log(open)}
/>

Callback	When
`onSearch`	Opens the search (e.g. a Command Menu with type Dialog): called with what was typed in the field, or with '' from a click, Enter, ↓ or the Search Button. The field itself stays empty.
`onCtaClick`	Called when the CTA Button is pressed.
`onMenuOpenChange`	Called when the menu opens or closes.