1 viewer
Back to Components
Component · Navigation

SiteNav

Variant-aware site navigation bar for template pages. Supports brand, links, CTA button, phone, status LED, and sticky mode.

Category
Navigation
Slots
9
States
0
Writer
Shared
cre8.primitive.site-nav

Preview

Live renderShared SSR + WASM writers
<Nav brand="CRE8 RUNTIME">
  <Action href="/view" label="Dashboard" />
  <Action href="/view/components" label="Components" />
  <Action href="/view/market" label="Market" />
</Nav>

Anatomy

The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.

SlotDOM class
root.cre8-site-nav
inner.cre8-site-nav__inner
brand.cre8-site-nav__brand
links.cre8-site-nav__links
link.cre8-site-nav__link
spacer.cre8-site-nav__spacer
status.cre8-site-nav__status
phone.cre8-site-nav__phone
cta.cre8-site-nav__cta
9 rows
Role
navigation

States and platforms

The states the contract publishes, the platforms it declares, and the style recipes that dress it.

States
No published states
Platforms
web
Recipes
unstyledruntime-console

Renderers

Shared writer
SiteNav renders through the one writer the server and the WASM DOM share, so both emit the same markup.

Every tag in the example above renders through a shared writer.

Declared adapters. A status is the manifest's declaration, not a measured parity result.

TargetRendererStatus
webreactexperimental
1 row

Accessibility

Uses native nav landmark semantics for site-level navigation.

  • The nav element provides an implicit navigation landmark.
  • Active links expose aria-current when marked active.