Navbar
Navbar is a neobrutalist React component from Cruise UI. The top bar: logo, links and actions, with a Menu drawer on phones. Install it with npx shadcn@latest add @cruiseui/navbar.
Install
Terminal
npx shadcn@latest add @cruiseui/navbarFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
import { CruiseButton } from "@/components/cruise/button";
import { CruiseNavbar } from "@/components/cruise/navbar";
export default function NavbarExample() {
return (
<div className="border-x-(length:--border-w) border-t-(length:--border-w) border-ink">
<CruiseNavbar
logo="Owo"
links={[
{ label: "Routes", href: "#routes", active: true },
{ label: "Tickets", href: "#tickets" },
]}
actions={<CruiseButton>Sign up</CruiseButton>}
/>
</div>
);
}
<header style="border-bottom: var(--border-w) solid var(--ink); background: var(--paper)">
<nav style="display: flex; align-items: center; gap: 24px; padding: 16px">
<a href="/" style="font: 800 1.375rem/1 var(--font-display); color: var(--ink); text-decoration: none">Owo</a>
<a href="/routes" aria-current="page">Routes</a>
<a href="/tickets">Tickets</a>
<a class="brutal btn on-primary" href="/signup" style="margin-left: auto">Sign up</a>
</nav>
</header>Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
When to use
Every page's top navigation.
When not to
In-page section switching (use Tabs).
Props
CruiseNavbar
| Prop | Type | Default | Description |
|---|---|---|---|
logo | ReactNode | — | — |
links? | CruiseNavLink[] | [] | Inline from 768px; in the Menu drawer below that. |
actions? | ReactNode | — | The primary CTA plus any toggles: on the right from 768px, stacked at the bottom of the Menu drawer below that. Use the "inverted" Button variant when tone is "primary", and pass `drawerActions` too. |
drawerActions? | ReactNode | actions | Actions for the drawer, if they differ from `actions`. The drawer is --surface, so a yellow-navbar "inverted" CTA should become "primary". |
tone? | "primary" | "paper" | "paper" | — |
drawerContainer? | HTMLElement | null | — | Where the mobile drawer renders; defaults to <body>. |
menuBelow? | "lg" | "md" | "md" | Show the Menu drawer below this breakpoint (768px by default). Use "lg" (1024px) when the actions are too wide to sit inline on a tablet. |
className? | string | — | — |
Accessibility
- The current page link has aria-current="page".
- On phones a Menu button opens a drawer with Esc, focus trap and scroll lock.