Store Navigation React component
A complete store header: a dismissible announcement bar, a mega menu with link columns and a featured product per category, an expanding search with trending terms and live product suggestions, wishlist and bag counts, and a slide-in mobile menu with accordion sections.
About the Store Navigation component
Store Navigation is the full header of an online store. Categories open into a mega menu with clear link columns and one featured product, so browsing starts with something worth clicking.
Search expands as soon as it's focused and suggests products while typing, highlighting the matching words. On phones, everything moves into a slide-in drawer with accordion sections, and the bag and wishlist stay visible in the header.
When to use it
Use it as the top header of a store, or as a reference for a mega-menu navigation in any catalog site.
For a compact icon row of categories use Icon Category Nav; for a cart preview use the Mini Cart Dropdown.
Installation
Add the Store Navigation component to your project with the shadcn CLI. It lands in components/store-navigation.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/store-navigationOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<StoreNavigation /> accepts 8 props, all optional.
| Prop | Type | Default |
|---|---|---|
| store | string | "Northline" |
| announcement | string | "Free shipping on orders over $50 · 30-day returns" |
| menus | NavMenu[] | MENUS |
| searchSuggestions | { title: string; price: string; image?: string }[] | SUGGESTIONS |
| bagCount | number | 2 |
| wishlistCount | number | 3 |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- storestringDefault: "Northline"
- announcementstringDefault: "Free shipping on orders over $50 · 30-day returns"
- menusNavMenu[]Default: MENUS
- searchSuggestions{ title: string; price: string; image?: string }[]Default: SUGGESTIONS
- bagCountnumberDefault: 2
- wishlistCountnumberDefault: 3
- theme"dark" | "light"Default: "dark"
- classNamestring
Collections
Use-case pages that compare Store Navigation with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Store Navigation FAQ
- Why does the mega menu wait before closing?
- A short delay lets the pointer travel from the category button down into the menu without it disappearing on the way.
- How do I connect real search?
- Replace the local filter with a debounced call to your search API and pass the results as searchSuggestions; the highlighting and counts keep working.
- Is the mega menu keyboard friendly?
- Yes. Focusing a category opens its menu, links inside are reachable with Tab, and Escape closes it.
- Why is the scrim inside the block?
- So it works in previews and any layout. In your app, let the scrim cover the whole page below the header.
- Is it accessible?
- Category buttons use aria-expanded, the search announces result counts, icon buttons have labels including counts, and the mobile drawer is a labelled navigation that moves focus to its close button.
