A fashion header with the logo centered between two link groups. Hovering a link draws a fine line from the logo out to it and turns the star mark toward that side, and the bag count pops when it changes.
npx shadcn@latest add https://hyperblur.dev/r/navbar-split-logo.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-split-logo.tsx.
import { NavbarSplitLogo } from "@/components/hyperblur/navbar-split-logo"
<NavbarSplitLogo bagCount={cart.length} onBagClick={openCart} showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Aster" | Wordmark under the star mark. |
| left | { label: string; href: string }[] | Women, Men, Home | Links to the left of the logo. |
| right | { label: string; href: string }[] | Journal, Stores, Account | Links to the right of the logo, followed by the bag. |
| activeHref | string | "#women" | Href of the current page. Its link gets a dot and aria-current. |
| bagCount | number | 2 | Items in the bag. The badge pops each time the number changes and hides at zero. |
| onBagClick | () => void | Called when the bag is clicked. | |
| featured | { eyebrow: string; title: string; href: string } | null | { eyebrow: "Winter 26", title: "Quiet wool, made in Porto", href: "#" } | Card at the bottom of the mobile menu. Pass null to hide it. |
| accent | string | "#c9a77c" | Color of the mark, the hover line, the bag badge and focus rings. |
| showBackdrop | boolean | true | Render a sample page under the bar for previews. Turn it off in a real layout. |