Layout
PrimaryNav
Top-level storefront browse navigation inside the StoreHeader family, with a split between ordinary items and items that own a mega-menu panel.
Best for
top-level category navigationcampaign entry pointsmain browse systems
Import
import { PrimaryNav } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use PrimaryNav for the main browse path a shopper scans first.
That usually means:
- top-level category links
- campaign-led browse entries
- high-priority merchandising destinations
Composition notes
PrimaryNav currently exposes two public link roles:
PrimaryNav.Item— plain top-level destinationPrimaryNav.Trigger— top-level destination that also owns the desktop mega-menu panel
That split matters because the desktop panel should stay attached to the owning top-level browse item instead of turning every shell link into a menu trigger.
Examples
Live examples you can edit directly in the sandbox.
Primary navigation items and triggers
Use PrimaryNav.Item for ordinary destinations and PrimaryNav.Trigger for top-level links that own the mega-menu panel.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | No description yet. |