Navigation

Site navigation with URL synchronization and roving tabindex.

Usage

<w-nav label="Main navigation">
  <w-slot item><w-link href="/home">Home</w-link></w-slot>
  <w-slot item><w-link href="/about">About</w-link></w-slot>
  <w-slot item><w-link href="/contact">Contact</w-link></w-slot>
</w-nav>

Props

Prop	Type	Default	Description
label	string	"Navigation"	Accessible label
orientation	"horizontal" | "vertical"	"horizontal"	Navigation layout
value	string	""	Currently active item value

Slots

Slot	Element	Description
item	w-link / button	Navigation items (uses href or data-value for value)

Events

Event	Detail	Description
change	{ value }	Fired when active item changes

Keyboard

Key	Action
ArrowRight / ArrowDown	Focus next item
ArrowLeft / ArrowUp	Focus previous item
Home	Focus first item
End	Focus last item

Examples

Vertical Navigation

<w-nav label="Sidebar" orientation="vertical">
  <w-slot item><w-link href="/dashboard">Dashboard</w-link></w-slot>
  <w-slot item><w-link href="/profile">Profile</w-link></w-slot>
  <w-slot item><w-link href="/settings">Settings</w-link></w-slot>
</w-nav>

With Data Values (Buttons)

<w-nav label="Options" value="option1">
  <w-slot item><button data-value="option1">Option 1</button></w-slot>
  <w-slot item><button data-value="option2">Option 2</button></w-slot>
</w-nav>

External Links

<w-nav label="Resources">
  <w-slot item><w-link href="/docs">Docs</w-link></w-slot>
  <w-slot item><w-link href="https://github.com" external>GitHub</w-link></w-slot>
</w-nav>

Styling

w-nav {
  display: flex;
  gap: 4px;
  background: #f5f5f5;
  border-radius: 4px;
}

w-nav[orientation="vertical"] {
  flex-direction: column;
}

w-nav w-slot[item] {
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
}

/* Active state */
w-nav [aria-current="page"] {
  background-color: #0056b3;
  color: white;
}

With Views

Navigation works with w-view for single-page routing:

<w-nav label="Navigation">
  <w-slot item><w-link href="/home">Home</w-link></w-slot>
  <w-slot item><w-link href="/about">About</w-link></w-slot>
</w-nav>

<w-view path="/home">
  <h1>Home Page</h1>
</w-view>

<w-view path="/about">
  <h1>About Page</h1>
</w-view>

Accessibility

• role="navigation" on container
• aria-label from label prop
• aria-current="page" on active item
• Roving tabindex for keyboard navigation
• Works with both w-link and buttons