CardNav
card-navExpands a pill-shaped header to reveal staggered navigation cards from a hamburger control.
Usage
Basic usage
The top bar contains a menu button, brand, and CTA. Click the menu button to expand the capsule and reveal each card in sequence. In uncontrolled mode, the component manages its own open state.
<CardNav
brand="Hulian UI"
ctaLabel="Get started"
items={[
{ label: "Product", bgColor: "var(--color-chart-1)", links: [{ label: "Overview", href: "#" }] },
{ label: "Company", bgColor: "var(--color-chart-2)", links: [{ label: "About", href: "#" }] },
{ label: "Resources", bgColor: "var(--color-chart-4)", links: [{ label: "Documents", href: "#" }] },
]}
/>Default expansion (controlled)
Incoming open + onOpenChange is opened and closed externally; it is expanded by default to display the card's staggered display.
const [open, setOpen] = useState(true);
<CardNav
brand="Hulian UI"
ctaLabel="Get started"
items={items}
open={open}
onOpenChange={setOpen}
/>None CTA
ctaLabel Pass null Hide the CTA button on the right, pure text brand + card navigation.
<CardNav brand="HanShip" items={items} ctaLabel={null} />token Card (eating theme)
Without bgColor or textColor, the card uses Hulian tokens and adapts to the active theme.
<CardNav
brand="Hulian"
items={[
{ label: "Product", links: [{ label: "Overview", href: "#" }] },
{ label: "Company", links: [{ label: "About Us", href: "#" }] },
{ label: "Resources", links: [{ label: "Documents", href: "#" }] },
]}
/>When to use
Use CardNav for a marketing header that expands downward into up to three grouped link cards. Use BubbleMenu for a fullscreen field of pills, NavigationMenu or NavMenu for conventional multilevel navigation, or Navbar for a standard application header.
Import
import { CardNav } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| items * | CardNavItem[] | — | Card groups, rendered in a row or mobile column; only the first three are used. |
| duration | number | 0.4 | Expand/collapse duration in seconds, reduced to zero under reduced motion. |
| open | boolean | — | Controlled open state paired with onOpenChange. |
| className | string | — | Root class name. |
| style | CSSProperties | — | Root inline styles. |
CardNavItem is{ label, links?, bgColor?, textColor? }; links are{ label, href?, ariaLabel? }. Card backgrounds default to surface, while chart tokens work well for branded blocks.
Events
| Event | Type | Description |
|---|---|---|
| onCtaClick | () => void | CTA click handler. |
| onOpenChange | (open: boolean) => void | Called in controlled and uncontrolled modes. |
Slots
| Slot | Type | Description |
|---|---|---|
| brand | ReactNode | Centered logo or title. |
| ctaLabel | ReactNode | CTA copy, default "Get Started"; an empty string or null hides it. |
Example
const items = [
{ label: "Product", bgColor: "var(--color-chart-1)", textColor: "var(--color-primary-foreground)", links: [{ label: "Overview", href: "#overview" }, { label: "Pricing", href: "#pricing" }] },
{ label: "Company", bgColor: "var(--color-chart-2)", textColor: "var(--color-primary-foreground)", links: [{ label: "About", href: "#about" }] },
];
<CardNav brand="Hulian UI" items={items} ctaLabel="Get started" />
const [open, setOpen] = useState(false);
<CardNav brand="Hulian UI" items={items} open={open} onOpenChange={setOpen} />Usage guidelines
- Passing open enters controlled mode; write onOpenChange back to parent state. Omit open for internal state.
- Only the first three items render.
- Hide the CTA with null or an empty string.
- Reduced motion removes the transition without changing the two DOM states. The toggle's built-in Chinese labels are
"\u6536\u8d77\u83dc\u5355"(“Collapse menu”) and"\u5c55\u5f00\u83dc\u5355"(“Expand menu”).
Related
Navbar · BeianFooter · NavMenu · NavigationMenu · Menu · Menubar
Playground
<CardNav
brand="Hulian UI"
ctaLabel="Get started"
duration={0.4}
items={[
{ label: "Product", bgColor: "var(--color-chart-1)", links: [{ label: "Overview", href: "#" }] },
{ label: "Company", bgColor: "var(--color-chart-2)", links: [{ label: "About", href: "#" }] },
{ label: "Resources", bgColor: "var(--color-chart-4)", links: [{ label: "Documents", href: "#" }] },
]}
/>