DSCatalyst design system
TenantRexall
Design system/Components/Nav item
atom ยท source observed

Nav item

Route label with optional submenu, active state, and external treatment.

3consumers1evidence6tokens
Rendered primitiveNav item variants and statesdeterministic source context state extraction
Brand 0 top nav itemHeader navigation uses button-like DOM, but the normalized contract is route navigation, not Button. Mobile source also exposes accordion trigger states.
source observed
Closed routePharmacynav.nav-item-2.closedsource observed
Menu openPharmacynav.nav-item-2.openrequired derived
Current routePharmacynav.nav-item-2.currentagent inferred
Keyboard focusPharmacynav.nav-item-2.focusrequired derived

Semantic token resolution

Labelvar(--wl-primary-strong)primaryStrongcolorFocus ringvar(--wl-accent)Nav itematom API

Used by

Global navigation shellPrimary nav labels and dropdown triggers.directSide rail resource stackContextual route list items.inferredGlobal footerFooter group links once normalized.inferred

Proposed contract

labelhrefactivechildrenexternalanalyticsKey

Token contract

Labelvar(--wl-primary-strong)Weightvar(--wl-label-weight)Activevar(--wl-primary)Menu surfacevar(--wl-surface)Radiusvar(--wl-control-radius)Focus ringvar(--wl-accent)
  • This should power universal top nav and contextual side rails without duplicating route styling.
Evidence1 source clusters
legacy buttonRexall.ca homepage fidelity audit
PharmacyEveryday HealthShop Now