Store header and footer

Code

<StoreHeader  brand="Nile Store"  nav={nav}  announcement={<StoreAnnouncementBar items={announcements} />}  search={{ products, categoryTree, currency: "USD", popular: ["hoodie"], onSearch: (q) => go(`/search?q=${q}`), onSelectProduct: (p) => go(`/p/${p.slug}`) }}  cartCount={cart.count}  onCartClick={openCart}/><StoreFooter columns={columns} onSubscribe={subscribe} social={social} languages={languages} language="en" onLanguageChange={setLocale} />

Storefront · beta

Live examples and controls: Store header and footer in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/store-chrome.json

Everything around a storefront page. StoreAnnouncementBar rotates short messages above the header. StoreHeader holds the brand, a StoreMegaMenu, StoreSearch, wishlist, account and a cart button with a count. StoreFooter has link columns, a newsletter form, a payment marks slot, text social links and language and currency switches.

They take plain data and callbacks. Nothing here talks to a server or owns the cart: pass cartCount and onCartClick, and the search reads the CommerceProduct[] you give it.

When to useCopy Anchor Link

• The frame of a shop, category, search or product page.
• StoreSearch alone in any toolbar that needs product autocomplete.

When not to useCopy Anchor Link

• An admin app shell: use the app shell and sidebar components.
• A marketing site header with no cart: use the marketing header.

ImportCopy Anchor Link

import { StoreAnnouncementBar, StoreHeader, StoreFooter } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

<StoreHeader
  brand="Nile Store"
  nav={nav}
  announcement={<StoreAnnouncementBar items={announcements} />}
  search={{ products, categoryTree, currency: "USD", popular: ["hoodie"], onSearch: (q) => go(`/search?q=${q}`), onSelectProduct: (p) => go(`/p/${p.slug}`) }}
  cartCount={cart.count}
  onCartClick={openCart}
/>
<StoreFooter columns={columns} onSubscribe={subscribe} social={social} languages={languages} language="en" onLanguageChange={setLocale} />

APICopy Anchor Link

StoreHeaderCopy Anchor Link

StoreSearchCopy Anchor Link

products, categoryTree?, currency?, recent? / onRecentChange? (controlled recent searches), popular?, value? / onValueChange?, onSearch(query), onSelectProduct?, onSelectCategory?, getProductHref?, loading?, placeholder?, labels?.

On focus with an empty box it lists recent and popular searches. While typing it lists matching categories and products (image, name with the match emphasised, price) and a final "Search for" row. Matching ignores case, Arabic diacritics and alef variants.

StoreMegaMenuCopy Anchor Link

items: StoreNavItem[] (id, label, href?, columns?, featured?, highlight?), currentId?.

StoreAnnouncementBarCopy Anchor Link

items (id, content, href?, from?, until?), interval? (5000), dismissible?, onDismiss?, dismissedIds?, now?. Rotation stops on hover, focus, with one message, and under reduced motion. Previous and next buttons step by hand.

StoreFooterCopy Anchor Link

brand?, tagline?, columns?, onSubscribe?(email) (throw to show the failure message), payments? (your own marks), social? (text names and links), languages? / language? / onLanguageChange?, currencies? / currency? / onCurrencyChange?, legal?.

Model helpersCopy Anchor Link

Pure functions, importable in Node: chromeSuggest, chromeFlattenCategories, chromeMoveActive, chromeHighlight, chromeRecordRecent, chromeLiveAnnouncements, chromeStep.

AccessibilityCopy Anchor Link

• The search input is an ARIA combobox: aria-expanded, aria-controls, aria-activedescendant, a listbox with option rows and a polite count for screen readers. Arrow Up and Down move (wrapping), Home and End jump, Enter picks or searches, Escape closes then clears.
• The announcement bar is a labelled carousel region and announces a change only after a manual step, never on the timer.
• The mobile menu is a modal sheet with focus trapped; the mega menu opens on hover, focus and Enter and arrows move between items.
• The newsletter result and error use a polite live region and aria-invalid.
• Social links are text, not logos.

RTL and ArabicCopy Anchor Link

Layout uses logical properties, the count badge and carousel arrows mirror, and the search matches Arabic text. Strings switch with the Nasaq locale.