Browse components
Card Nav
A compact navbar that springs open downward into a row of colorful link cards.
Installation
npx shadcn@latest add @glint-ui/card-navFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/card-nav.json
Usage
import { CardNav } from "@/components/ui/card-nav";
<CardNav
logo={<span>acme</span>}
items={[
{ label: "Product", bgColor: "#1e1b4b", textColor: "#fff", links: [{ label: "Features", href: "/features" }] },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { label, links: { label, href }[], bgColor?, textColor? }. |
| logo | ReactNode | — | Centered logo. |
| ctaLabel | string | "Get started" | Call-to-action label. Empty hides it. |
| ctaHref | string | "#" | Call-to-action link. |
| barHeight | number | 60 | Closed bar height in px. |
| cardHeight | number | 200 | Card height in px. |
| stagger | number | 0.08 | Seconds between cards. |
| defaultOpen | boolean | false | Start expanded. |
| className | string | — | Extra classes for the root element. |