// Generated by scripts/generate-showcase.mjs. Do not edit directly. page NavDetail { layout = "showcase" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"nav-0-1\",\"key\":\"nav-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#nav-demo\",\"actionHref\":\"#nav-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"nav-0-2\",\"key\":\"nav-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#nav-demo\",\"actionHref\":\"#nav-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") state playground_active = ctx.url.searchParams.get("pg_active") ?? "" state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Nav" state playground_collapsible = (ctx.url.searchParams.get("pg_collapsible") ?? "true") === "true" state playground_toggleLabel = ctx.url.searchParams.get("pg_toggleLabel") ?? "Nav" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Nav" description = "Theme-aware, responsive nav component." } view {
Navigation component

Nav

Theme-aware, responsive nav component.

9 props1 slots1 outputsTheme readyResponsive
Interactive playground

Configure Nav

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<Nav
  items='[
    {
      "id": "nav-0-1",
      "key": "nav-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#nav-demo",
      "actionHref": "#nav-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "nav-0-2",
      "key": "nav-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#nav-demo",
      "actionHref": "#nav-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  label="Nav"
  toggleLabel="Nav"
/>
Event outputInteract with the preview to inspect the typed payload.
Component props9 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Horizontal links

A flat link bar. The active item is marked with aria-current, and the arrow keys move between items.

01
Live preview
Component usage.wrn
<Nav
  items='[
    {
      "label": "Home",
      "href": "/",
      "value": "home",
      "icon": "icon-[lucide--house]"
    },
    {
      "label": "Inbox",
      "href": "/inbox",
      "value": "inbox",
      "badge": "9"
    },
    {
      "label": "Reports",
      "href": "/reports",
      "value": "reports"
    },
    {
      "label": "Archive",
      "href": "/archive",
      "value": "archive",
      "disabled": true
    }
  ]'
  active="inbox"
  label="Nav"
  toggleLabel="Nav"
/>
Advanced

Nested submenus

An item carrying its own items array opens a submenu on hover or focus, to a maximum of three levels. On a phone the submenus stack inline instead of floating, because a hover-opened overlay is unreachable on touch.

02
Live preview
Component usage.wrn
<Nav
  size="sm"
  items='[
    {
      "label": "Home",
      "href": "/",
      "value": "home"
    },
    {
      "label": "Products",
      "value": "products",
      "items": [
        {
          "label": "Overview",
          "href": "/p",
          "value": "p-overview"
        },
        {
          "label": "Platform",
          "value": "p-platform",
          "items": [
            {
              "label": "Runtime",
              "href": "/p/runtime",
              "value": "runtime"
            },
            {
              "label": "Compiler",
              "href": "/p/compiler",
              "value": "compiler"
            }
          ]
        }
      ]
    }
  ]'
  active="p-overview"
  label="Compact example"
  toggleLabel="Compact example"
/>
Recommended

Vertical rail

Vertical orientation switches the arrow keys to up and down.

03
Live preview
Component usage.wrn
<Nav
  size="lg"
  items='[
    {
      "label": "Dashboard",
      "href": "/",
      "value": "dash",
      "icon": "icon-[lucide--gauge]"
    },
    {
      "label": "Team",
      "href": "/team",
      "value": "team",
      "icon": "icon-[lucide--users]"
    },
    {
      "label": "Settings",
      "href": "/settings",
      "value": "settings",
      "icon": "icon-[lucide--settings]"
    }
  ]'
  active="team"
  orientation="vertical"
  label="Advanced example"
  collapsible="false"
  toggleLabel="Advanced example"
/>
Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@selectFires when an item, option, card, or result is selected.
Declarative handlers.wrn
<Nav
  @select='console.log(payload)'
/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"Nav\"], [data-component=\"Nav\"]")

if (component) registerOutputHandler(component, "select", (payload) => {
  console.log("select", payload)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
colorstring"primary"No
sizestring"default"No
itemsunknown[][]No
activestring""No
orientationstring"horizontal"No
labelstring"Main"No
collapsiblebooleantrueNo
toggleLabelstring"Menu"No
classstring""No
} }