1 viewer
Back to Components
Component · Navigation

Nav

Top bar with brand link, flat item list, and optional right-slot children (theme controls / status pills).

Category
Navigation
Slots
7
States
1
Writer
Shared
cre8.primitive.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.primitive-nav
left.primitive-nav__left
brand.primitive-nav__brand
items.primitive-nav__items
item.primitive-nav__item
link.primitive-nav__link
right.primitive-nav__right
7 rows
Role
navigation

States and platforms

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

States
active
Platforms
webnativeruntime-node
Recipes
unstyledruntime-console

Renderers

Shared writer
Nav 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
runtime-nodeview-nodeready
ssrhtml-navigationready
terminalterminal-textplanned
nativenative-adapterexperimental
5 rows

Accessibility

Semantic structure must stay available without visual styling.

  • Expose meaningful names for interactive controls.
  • Keep keyboard and pointer behavior equivalent where the platform supports it.
  • Publish state with native semantics and data attributes where the adapter supports them.