Staaarter

Two Tier Utility Nav

A two-row header: a thin, muted utility row up top with small links like Support and Docs, and the main navigation row below it with the wordmark, primary links, and a CTA button. Common on enterprise and SaaS marketing sites that need a secondary link cluster without cluttering the primary nav.

By Staaarter Team
Navbar
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/two-tier-utility-nav.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/navbar/navbar5.tsx instead.

Usage

The file also exports navbar5Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Navbar5, navbar5Demo } from "@/components/blocks/navbar/navbar5";

export default function Page() {
  return <Navbar5 {...navbar5Demo} />;
}

Props

PropTypeDefaultDescription
wordmarkstring"Meridian"Logo text rendered as a bold wordmark.
utilityLinks{ label: string; href: string }[]noneSmall links shown in the thin top utility row.
primaryLinks{ label: string; href: string }[]nonePrimary nav links shown in the main row.
cta{ label: string; href: string }noneThe call-to-action button in the main row.
classNamestringnoneExtra classes for the outer header element.

Behavior notes

  • Fully static: no client-side state anywhere in this block.
  • Primary links are hidden below the md breakpoint; this block does not include a mobile menu trigger.
  • All links and the CTA are plain Next.js Link elements with no real destinations until you supply your own hrefs.

More Navbar Blocks

View all →

Simple Logo Links CTA

Wordmark on the left, a row of nav links, and a single CTA button on the right.

Centered Logo Split Links

Logo centered in the header with nav links evenly split to its left and right.

Mega Menu Dropdown

A trigger that opens a wide, multi-column mega menu panel below the header.

Navbar With Search

Logo, a few nav links, and a labeled search input with an inline icon.

Minimal Logo CTA Only

The simplest possible header: just a logo and a single CTA button, no nav links.

Mobile Hamburger Menu

Wordmark, a CTA button, and a hamburger icon that toggles a vertical nav list open and closed.