Floating pill

Dark pill navbar with a contact button.

Usage

import { Navbar } from '@/components/blocks/navbar-01'


<Navbar />


// Swap in your own content
<Navbar
  logoLabel="Orbit Studio home"
  links={[
    { label: 'Work', href: '/work' },
    { label: 'About', href: '/about' },
  ]}
  ctaLabel="hello@orbit.studio"
  ctaHref="mailto:hello@orbit.studio"
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/navbar-01

npx shadcn@latest add @pastaui-pro/navbar-01

yarn dlx shadcn@latest add @pastaui-pro/navbar-01

bunx --bun shadcn@latest add @pastaui-pro/navbar-01

Source

Props

Floating pill props
Prop	Type	Default	Description
logo	ReactNode	= Planet icon	Content inside the white circle on the left.
logoHref	string	= '/'	Where the logo links to.
logoLabel	string	= 'Home'	Accessible label for the logo link.
links	NavbarLink[]	= Work / Studio / Lab / Journal	Label and href pairs shown in the bar and the mobile menu.
ctaLabel	string	= 'hello@example.com'	Text in the white pill on the right.
ctaHref	string	= 'mailto:hello@example.com'	Where the pill links to.
className	string	= —	Additional classes for the header.