# NavBar

Opinionated top navigation built on `<AppHeader>`. Brand on the start, typed links centered on `md+`, actions on the end. Router-agnostic via a `renderLink` render prop so apps can supply their own `<NavLink>` / `<Link>`.

[View examples](https://marsam.rahhal.app/components/nav-bar) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui/nav-bar`

**Category:** `nav`

## Props

| prop | type | purpose |
| --- | --- | --- |
| brand | ReactNode | logo + app title — start edge |
| mobileTrigger | ReactNode | rendered before the brand; typically a hamburger that opens a Sheet |
| items | NavBarItem[] | top-level links: { to, label, end?, icon? } |
| renderLink | render prop | supplies the consumer's router (NavLink / next/Link); falls back to a plain anchor |
| actions | ReactNode | trailing slot — locale switcher, sign-in, etc. |

## Pattern

```tsx
import { NavLink } from "react-router-dom";

<NavBar
  brand={<BrandMark />}
  actions={<SignInButton />}
  items={[{ to: "/", label: "Home", end: true }, …]}
  renderLink={({ item, children, className }) => (
    <NavLink to={item.to} end={item.end} className={({ isActive }) =>
      isActive ? `${className} active` : className
    }>
      {children}
    </NavLink>
  )}
/>
```

## Notes

- Links are hidden under `md` so apps can render a hamburger + Sheet for mobile.
- The fallback (anchor + `window.location.pathname`) only suits static pages; SPAs almost always pass `renderLink`.