Split Veil Navbar

Installation

pnpm dlx shadcn@latest add @cleverui/navbar-split-veil

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { NavbarSplitVeil } from '@/components/blocks/navbar-split-veil'

Exampletsx

import { NavbarSplitVeil } from '@/components/blocks/navbar-split-veil'

export default function NavbarSplitVeilDemo() {
  return (
    <div className="min-h-[160vh]">
      <NavbarSplitVeil
        brand={
          <span className="inline-flex items-baseline gap-1.5">
            Atelier
            <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
              Twelve
            </span>
          </span>
        }
        leftLinks={[
          { label: 'Work', href: '#work' },
          { label: 'Approach', href: '#approach' },
        ]}
        rightLinks={[
          { label: 'Journal', href: '#journal' },
          { label: 'Contact', href: '#contact' },
        ]}
        veilLinks={[
          { label: 'Selected work', href: '#work', annotation: '24 projects' },
          { label: 'Approach', href: '#approach', annotation: 'How we ship' },
          { label: 'Capabilities', href: '#capabilities', annotation: 'Design · Eng' },
          { label: 'Journal', href: '#journal', annotation: 'Notes' },
          { label: 'Open roles', href: '#careers', annotation: '2 seats' },
        ]}
        footerNote="Atelier Twelve · Brooklyn · Est. 2019"
      />

      <div className="mx-auto max-w-6xl px-4 pt-36 sm:px-6 sm:pt-40">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
          Independent design partnership
        </p>
        <h1 className="mt-4 max-w-2xl text-balance text-4xl font-semibold tracking-tight sm:text-5xl lg:text-6xl">
          Open the menu for an editorial veil of oversized destinations.
        </h1>
        <p className="mt-6 max-w-lg text-base leading-relaxed text-muted-foreground">
          Brand sits dead-center with split links on either side. The menu button expands a full-screen
          veil, numbered rows, mono annotations, one primary accent on the active index.
        </p>

        <div className="mt-24 grid gap-4 sm:grid-cols-3">
          {[
            { n: '01', title: 'Product systems', body: 'Design systems that survive real code reviews.' },
            { n: '02', title: 'Launch surfaces', body: 'Marketing and app chrome that share one hand.' },
            { n: '03', title: 'Type & motion', body: 'Restraint first, choreography only when it earns space.' },
          ].map((card) => (
            <article
              key={card.n}
              className="rounded-2xl border border-border/60 bg-card p-6"
            >
              <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
                {card.n}
              </p>
              <h2 className="mt-3 text-lg font-semibold tracking-tight text-foreground">{card.title}</h2>
              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{card.body}</p>
            </article>
          ))}
        </div>
      </div>
    </div>
  )
}

API reference

NavbarSplitVeil accepts the following props.

Prop	Type	Default	Description
`brand`	`React.ReactNode`	`'CleverUI'`	–
`brandHref`	`string`	`'/'`	–
`leftLinks`*	`{ label: string; href: string }[]`	–	links left of the brand (desktop)
`rightLinks`*	`{ label: string; href: string }[]`	–	–
`veilLinks`*	`{ label: string; href: string; annotation?: string }[]`	–	oversized destinations inside the full-screen veil
`footerNote`	`string`	–	mono line pinned at the veil's bottom

…plus everything from Omit<React.HTMLAttributes<HTMLElement>, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart'>: className, event handlers, aria attributes and the rest pass straight through.

Related components

Bottom Tabs Navbar

App-style React navigation, a thumb-reach bottom tab bar with a raised primary action on mobile that becomes a top Tailwind glass bar on desktop; one landmark, safe-area aware.

Breadcrumb Morph Navbar

An app navbar that morphs between top-level links and a breadcrumb trail as a depth prop changes, the active link travels into crumb position with layoutId continuity.

Command Center Navbar

A navbar whose centerpiece is a Cmd-K search button opening a compact command sheet, grouped destinations, arrow-key selection, quiet links flanking a keyboard-first affordance.

Flow Steps Navbar

Checkout-flow navbar for React, a numbered step trail with aria-current and honest revisit links, condensing to a mono counter and Tailwind hairline progress fill on mobile.

Glass Navbar

Header that starts as pure structure over the hero and condenses into glass on scroll, blur, hairline seam, tighter height. Accessible staggered mobile menu with Escape handling.

Mega Panel Navbar

Navbar whose product menu opens a three-zone mega panel, primary destinations with descriptions, a quiet secondary column, and a featured card. Real IA, not a link dump.

Frequently asked questions

How do I install the Split Veil Navbar component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/navbar-split-veil`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Split Veil Navbar require?

Split Veil Navbar uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Split Veil Navbar to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code