Pill Tabs Navigation

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.

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

Usage

The file also exports navbar16Demo, 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 { Navbar16, navbar16Demo } from "@/components/blocks/navbar/navbar16";

export default function Page() {
  return <Navbar16 {...navbar16Demo} />;
}

Props

Behavior notes

• Fully static: no client-side state anywhere in this block, it is a plain server component.
• The "active" pill is determined entirely by comparing each link's href against the `activeHref` prop you pass in, it is not real click-to-switch interactivity. In a real app, activeHref would typically come from the current route (e.g. usePathname()) on every render, not from client state.
• Nav links are hidden below the md breakpoint; this block does not include a mobile menu trigger.