# Navbar

> Top-of-page chrome with start, center, and end slots. Responsive collapse at the md breakpoint (768 px) so the center band wraps below the start and end rows on narrow screens.

- Category: navigation
- Status: stable (since 0.3.0)
- A11y pattern: https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/
- Tokens: --background-primary, --foreground-primary, --foreground-secondary, --font-sans, --fs-md, --border-width-thin
- Playground: https://design.freecodecamp.org/playground#navbar
- npm dependencies: `react@>=18 <20`
- Registry dependencies: [theme](https://design.freecodecamp.org/registry/theme.md)
- Files:
  - `Navbar.tsx` → `src/ui/navbar/Navbar.tsx` (raw: https://design.freecodecamp.org/registry/navbar/Navbar.tsx)
  - `navbar.css` → `src/ui/navbar/navbar.css` (raw: https://design.freecodecamp.org/registry/navbar/navbar.css)

## Install (copy source)

1. Ensure the theme is installed once per project - tokens.css + base.css imported globally, fonts available. See https://design.freecodecamp.org/registry/theme.md and https://design.freecodecamp.org/registry/starter.md.
2. Copy the files below into `src/ui/navbar/` (adjust to your project layout) and import the CSS once from your global stylesheet, e.g. `@import './ui/navbar/navbar.css';`.
3. Colors, spacing and type come from tokens - tailor the component by editing the copied source; recolour by editing tokens.css, not the component CSS.

## Usage

Navbar is the top-of-page chrome - a semantic `<header role="banner">`
with three optional slots: `start` (brand + primary nav), `center`
(supporting nav, breadcrumb, search), and `end` (actions, user menu).
At widths ≤ 768 px the center slot wraps to a new row so the start and
end rails stay on one line.

## Accessibility

Renders a `<header role="banner">`. Pair contained navigation lists
with `<nav aria-label="…">` so screen reader users can distinguish
primary navigation from secondary. Use real `<button>` or `<a>`
elements for every interactive child - no `role="button"` on divs.

## Example

```tsx
import { Navbar } from './ui/navbar/Navbar';
import { Button } from './ui/button/Button';
import { Link } from './ui/link/Link';

<Navbar
  start={<strong>freeCodeCamp</strong>}
  center={
    <>
      <Link href="/learn">Curriculum</Link>
      <Link href="/forum">Forum</Link>
      <Link href="/news">News</Link>
    </>
  }
  end={<Button variant="cta">Sign in</Button>}
/>
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `start` | `ReactNode` | no | - |  |
| `center` | `ReactNode` | no | - |  |
| `end` | `ReactNode` | no | - |  |

## Source: Navbar.tsx

```tsx
import React, { forwardRef } from 'react';

export interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
  start?: React.ReactNode;
  center?: React.ReactNode;
  end?: React.ReactNode;
}

export const Navbar = forwardRef<HTMLElement, NavbarProps>(
  ({ start, center, end, className = '', children, ...rest }, ref) => {
    const classes = ['navbar', className].filter(Boolean).join(' ');
    return (
      <header ref={ref} role='banner' className={classes} {...rest}>
        {start !== undefined && <div className='navbar__start'>{start}</div>}
        {center !== undefined && <div className='navbar__center'>{center}</div>}
        {end !== undefined && <div className='navbar__end'>{end}</div>}
        {children}
      </header>
    );
  }
);
Navbar.displayName = 'Navbar';
```

## Source: navbar.css

```css
.navbar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 8px 16px;
  background: var(--background-primary);
  border-bottom: var(--border-width-thin) solid var(--foreground-secondary);
  color: var(--foreground-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
}
.navbar__start {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.navbar__center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1 1 auto;
}
.navbar__end {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  margin-left: auto;
}
@media (max-width: 768px) {
  .navbar {
    flex-wrap: wrap;
  }
  .navbar__center {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
  }
  .navbar__end {
    margin-left: auto;
  }
}
```

## HTML / vanilla variant

```html
<nav class="navbar">
  <div class="navbar__start"><strong>freeCodeCamp</strong></div>
  <div class="navbar__center"><a class="fcc-link" href="#">Curriculum</a></div>
  <div class="navbar__end"><button class="btn btn--cta">Sign in</button></div>
</nav>
```

Interactive behaviours for plain HTML come from the vanilla runtime (data-uikit-* attributes): https://design.freecodecamp.org/registry/vanilla.md - or download https://design.freecodecamp.org/cdn/uikit.global.js once and self-host it (do not hotlink).

## For coding agents

This library is distributed as copyable source, not an npm package. Start at https://design.freecodecamp.org/registry/starter.md, discover components via https://design.freecodecamp.org/llms.txt, and copy files into the consuming project. Keep token names intact; recolour by editing the copied tokens.css.