Live CortexUI Surface

This block renders live CortexUI contract metadata in the docs DOM so AI View can inspect real machine-readable elements instead of only code examples.

AI View can now inspect a live status region, form fields, actions, and table entities on every docs page.

AI-addressable docs entities
Item	State
Search docs	Ready
Inspect metadata	Visible in AI View

Navigation

Primary navigation component for app-level navigation.

Overview

Navigation renders the main navigation structure. Each item is a nav-item role, with data-ai-state="selected" on the active item. AI agents use navigation to understand app structure and traverse between sections.

Props

Prop	Type	Default	Description
items	`NavItem[]`	required	Array of `{ id, label, href, icon? }`
activeHref	`string`	required	Current active href

AI Contract

<nav data-ai-role="section" data-ai-section="main-navigation">
  <a
    data-ai-role="nav-item"
    data-ai-id="nav-dashboard"
    data-ai-state="idle"
    href="/dashboard"
  >Dashboard</a>
  <a
    data-ai-role="nav-item"
    data-ai-id="nav-users"
    data-ai-state="selected"
    href="/users"
  >Users</a>
  <a
    data-ai-role="nav-item"
    data-ai-id="nav-settings"
    data-ai-state="idle"
    href="/settings"
  >Settings</a>
</nav>

Example

<Navigation
  activeHref="/users"
  items={[
    { id: 'nav-dashboard', label: 'Dashboard', href: '/dashboard' },
    { id: 'nav-users', label: 'Users', href: '/users' },
    { id: 'nav-settings', label: 'Settings', href: '/settings' }
  ]}
/>

✦

Best Practice

Use stable, semantic IDs for nav items: nav-dashboard, nav-users. This lets AI agents navigate reliably without parsing link text.

Accessibility