Back to components
ComponentNavbarFree
Multi-row Header React component
A multi-row shop header with a dismissible announcement, utility links, search, account and bag actions, and a responsive collections panel.
About the Multi-row Header component
A multi-row shop header with a dismissible announcement, utility links, search, account and bag actions, and a responsive collections panel.
Installation
Add the Multi-row Header component to your project with the shadcn CLI. It lands in components/multi-row-header.tsx as plain React + Tailwind CSS source you own and can edit.
Install
Copied!
npx shadcn@latest add @reactframe/multi-row-headerOr copy the source by hand and install its dependencies:
Install
Copied!
npm install motion lucide-react clsx tailwind-mergeProps
<MultiRowHeader /> accepts 17 props, all optional. It also accepts the usual <header> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| logo | React.ReactNode | "Forme." |
| logoHref | string | "/" |
| items | { id: string; label: string; href: string; description?: string; badge?: string; icon?: React.ReactNode }[] | DEFAULT_LINKS |
| utilityLinks | {label:string;href:string}[] | [{label:"Our story",href:"/about"},{label:"Help & care",href:"/support"}] |
| announcement | string | "A little more everyday. Complimentary delivery over €100." |
| announcementHref | string | — |
| showAnnouncement | boolean | true |
| dismissible | boolean | true |
| searchPlaceholder | string | "Find a little something…" |
| searchAction | string | "/search" |
| onSearch | (query:string)=>void | — |
- theme"dark" | "light"Default: "dark"
- logoReact.ReactNodeDefault: "Forme."
- logoHrefstringDefault: "/"
- items{ id: string; label: string; href: string; description?: string; badge?: string; icon?: React.ReactNode }[]Default: DEFAULT_LINKS
- utilityLinks{label:string;href:string}[]Default: [{label:"Our story",href:"/about"},{label:"Help & care",href:"/support"}]
- announcementstringDefault: "A little more everyday. Complimentary delivery over €100."
- announcementHrefstring
- showAnnouncementbooleanDefault: true
- dismissiblebooleanDefault: true
- searchPlaceholderstringDefault: "Find a little something…"
- searchActionstringDefault: "/search"
- onSearch(query:string)=>void
Show all 17 propsShow fewer
| bagCount | number | 0 |
| bagHref | string | "/cart" |
| accountHref | string | "/account" |
| onBagClick | ()=>void | — |
| onNavigate | (item:NavbarLink,event:React.MouseEvent<HTMLAnchorElement>)=>void | — |
- bagCountnumberDefault: 0
- bagHrefstringDefault: "/cart"
- accountHrefstringDefault: "/account"
- onBagClick()=>void
- onNavigate(item:NavbarLink,event:React.MouseEvent<HTMLAnchorElement>)=>void
npm dependencies
Installed for you by the shadcn CLI.
