Caster — Primary nav

Default — production layout

Six top-level items per the IA roadmap, plus a right-aligned CTA.

<nav class="primary-nav">
  <div class="primary-nav__inner">
    <a href="/parts" class="primary-nav__item is-active">Find Parts</a>
    <a href="/equipment" class="primary-nav__item">Equipment</a>
    <a href="/account/equipment" class="primary-nav__item primary-nav__item--new">My Equipment</a>
    <a href="/supplies" class="primary-nav__item">Chemicals & Supplies</a>
    <a href="/service" class="primary-nav__item">Service</a>
    <a href="/resources" class="primary-nav__item">Resources</a>
    <a href="tel:1-800-872-2532" class="primary-nav__cta">
      <svg width="14" height="14">...</svg>
      Talk to a parts expert
    </a>
  </div>
</nav>

Item states

Three visual states + a "NEW" modifier for items the team wants to highlight.

<a class="primary-nav__item">Default</a>
<a class="primary-nav__item is-active">Active</a>          <!-- or aria-current="page" -->
<a class="primary-nav__item primary-nav__item--new">Promoted</a>

Anatomy

Slot	Class	Notes
Container	.primary-nav	Use a `<nav>` tag with `aria-label="Primary"` for accessibility
Inner row	.primary-nav__inner	44px height, container padding, gap-1 between items
Item	.primary-nav__item	`<a>` — pad-2/3, brand color, rounded
Active item	.primary-nav__item.is-active	Or `aria-current="page"`. Bold + subtle bg.
NEW modifier	.primary-nav__item--new	Adds a small "NEW" gold badge after the label
CTA	.primary-nav__cta	Right-justified link with icon — typically support phone

Tokens consumed

Slot	Token
Background	--caster-primary-nav-bg → surface.default
Border	--caster-primary-nav-border → border.default
Item color	--caster-primary-nav-item-fg → brand.default
Active bg	--caster-primary-nav-item-bg-active → surface.subtle
Height	--caster-primary-nav-height (44px)

No mobile hamburger here (yet). The IA roadmap calls for a flat-accordion mobile pattern (Roadmap item 10) — when that lands, the primary-nav component grows a data-mobile="open" mode and the CSS handles the accordion drawer. Until then, the row scrolls horizontally on narrow viewports.