Hex UIv1

CommerceStoreNav

Storefront top navigation: brand + primary categories + search slot + trailing actions (cart, sign-in). Desktop inline nav; mobile collapses to a hamburger panel. Client Component (owns the open/close state). Theme-driven.

Installation

pnpm
pnpm dlx @hex-core/cli add commerce-store-nav

Usage

tsx
import { CommerceStoreNav } from "@/components/ui/commerce-store-nav"

Store nav with categories, search, and cart

Brand, three category links, a search input, and a cart button.

tsx
import { CommerceStoreNav, Input, Button } from "@hex-core/components";

<CommerceStoreNav
  logo={<a href="/" className="text-lg font-semibold">Hex Goods</a>}
  categories={[
    { label: "New", href: "/c/new" },
    { label: "Bags", href: "/c/bags" },
    { label: "Accessories", href: "/c/accessories" },
  ]}
  search={<Input type="search" placeholder="Search…" className="w-full" />}
  actions={<Button asChild><a href="/cart">Cart (2)</a></Button>}
/>

API Reference

PropTypeDefaultDescription
logorequired
ReactNode—Brand mark — a logo / wordmark node, ideally wrapping a link to '/'.
categories
object—ReadonlyArray<{ label: ReactNode; href: string }>. Primary categories shown inline on ≥md and stacked in the mobile panel.
search
ReactNode—Optional search region (an <Input> or composed search affordance).
actions
ReactNode—Trailing actions — typically a cart link/button, sign-in link.
className
string—Additional classes applied to the root <header>.

AI Guidance

When to use

Use as the top nav of a storefront. Pair with commerce-product-grid / commerce-category below it. For non-commerce marketing sites, use marketing-header instead.

When not to use

Don't use as in-app chrome (use the sidebar / navigation-menu components). Don't nest deep menus — surface only top-level categories here.

Common mistakes

  • Including the entire category tree — keep to ~3–6 top-level categories; deeper navigation lives on the category page.
  • Putting raw <a> tags in actions instead of <Button asChild><a>…</a></Button>, losing button styling.
  • Forgetting the logo links to '/' — wrap the logo node in an anchor.

Accessibility

The mobile toggle is a <button> with aria-expanded + aria-controls pointing at the panel and an aria-label that flips between 'Open menu' / 'Close menu'. Categories are real anchors with visible focus rings. Search and cart actions live both in the desktop bar and inside the mobile panel.

Token budget: 944

Verified against @hex-core/components@1.14.0

Edit this page on GitHub