Store Header

Beta

The store header: logo, product search, account, wishlist and the cart with its count, then the category bar. On a phone the search gets its own row and the categories move behind a menu button.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add store-header
Also works with shadcn: npx shadcn@latest add @ritla/store-header
Dependencies it brings
badgeicon-buttonsearch-field
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

store-header.tsx

import { StoreHeader } from "@/components/ui/store-header";<StoreHeader  logo={<a href="/"><Logo /></a>}  search={{ onValueChange: setQuery }}  categories={[{ label: "New in", href: "/new" }, { label: "Sale", href: "/sale", current: true }]}  cartCount={2}  cartHref="/cart"  wishlistHref="/wishlist"  accountHref="/account"  onMenuClick={openCategories}/>

API reference

StoreHeader

Prop	Type	Default	Description
`logo`	`ReactNode`	None	The store's logo, linked home.
`search`	`SearchField props`	None	The search field (SearchField). Its label defaults to “Search products”.
`categories`	`{ label, href, current? }[]`	None	The category bar; `current` sets `aria-current` and the brand color.
`cartCount / cartHref`	`number / string`	None	The count on the cart and its name (“Cart, 2 items”).
`wishlistHref / accountHref`	`string`	None	The wishlist and account links (account on large screens only, as in Figma).
`onMenuClick`	`() => void`	None	The phone's menu button; open a Sheet or Drawer of categories with it.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Logo, search, account, wishlist, cart, then the categories.

ARIA

A header with a role="search" field and a nav named “Categories”.
The cart button says its count (“Cart, 2 items”); the visible badge is hidden from screen readers so the number isn't read twice.

Arabic and RTL notes

Mirrors

The logo is on the right, the cart on the left, and the categories start from the right.

Does not mirror

The logo and the account, heart and bag glyphs never mirror.

Numerals: The cart count follows numerals.
Arabic typography: Categories are label-16 Medium in gray/strong; the current one Semibold in brand/intense.