Navigation

NavigationBar

Top app bar with brand, inline links, an actions area and a collapsible mobile panel behind a hamburger toggle.

Import

import { NavigationBar } from "@zephora/react";

Examples

Basic

Links render inline on wide screens and inside the mobile panel on narrow ones.

Zephora

<NavigationBar
  brand={<strong>Zephora</strong>}
  actions={<Button size="sm">Sign in</Button>}
>
  <a href="#">Docs</a>
  <a href="#">Components</a>
  <a href="#">Themes</a>
</NavigationBar>

Bordered

`bordered` adds a bottom border; `sticky` pins the bar to the viewport top.

Acme

<NavigationBar bordered brand={<strong>Acme</strong>}>
  <a href="#">Home</a>
  <a href="#">Pricing</a>
</NavigationBar>

API

NavigationBar props

Prop	Type	Default	Description
`brand`	`ReactNode`	—	Logo / product name area at the inline start.
`children`	`ReactNode`	—	Navigation links. Rendered inline on wide screens and inside the mobile panel.
`actions`	`ReactNode`	—	Actions area at the inline end (buttons, avatar…).
`sticky`	`boolean`	`false`	Sticks the bar to the top of the viewport.
`bordered`	`boolean`	`false`	Adds a bottom border.
`aria-label`	`string`	`"Main"`	Accessible name for the nav landmark.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.