Pill dropdown

Pill navbar with a resizing dropdown card.

Usage

import { NavbarPill } from '@/components/blocks/navbar-03'


<NavbarPill />


// Swap in your own content
<NavbarPill
  brand="Modulo"
  links={[
    {
      label: 'Product',
      items: [
        { title: 'Blocks', description: 'Sections ready to ship.', href: '/blocks', icon: 'blocks' },
        { title: 'Themes', description: 'Restyle with one token set.', href: '/themes', icon: 'palette' },
      ],
    },
    { label: 'Pricing', href: '/pricing' },
  ]}
  cta={{ label: 'Start free', href: '/signup' }}
/>

Install

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

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

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

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

Source

Props

Pill dropdown props
Prop	Type	Default	Description
brand	string	= 'Latchwell'	Wordmark next to the logo, also the home link’s accessible name.
brandHref	string	= '/'	Where the brand links to.
logo	ReactNode	= Stacked squares mark	Mark shown before the wordmark.
links	NavbarPillLink[]	= Product / Components / Resources / Pricing	Top-level links. Give a link an href for a plain link, or items ({ title, href, description?, icon? }) for a dropdown. icon takes a built-in name (blocks, palette, terminal, frame, toggle, compass, layers, chart, book, sparkle, grid, chat) or any ReactNode.
cta	NavbarPillCta \| null	= { label: 'Get started', href: '#get-started' }	Blue button at the end of the pill and the mobile menu. Pass null to hide it.
className	string	= —	Additional classes for the header.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* theme variables.