// Generated by scripts/generate-showcase.mjs. Do not edit directly. page NavbarDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Navbar" state playground_topbarLabel = ctx.url.searchParams.get("pg_topbarLabel") ?? "Navbar" state playground_brand = JSON.parse(ctx.url.searchParams.get("pg_brand") ?? "{\"id\":\"navbar-0-1\",\"key\":\"navbar-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\":\"#navbar-demo\",\"actionHref\":\"#navbar-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\"]}") state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"navbar-0-1\",\"key\":\"navbar-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\":\"#navbar-demo\",\"actionHref\":\"#navbar-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\":\"navbar-0-2\",\"key\":\"navbar-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#navbar-demo\",\"actionHref\":\"#navbar-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_actions = JSON.parse(ctx.url.searchParams.get("pg_actions") ?? "[{\"id\":\"navbar-0-1\",\"key\":\"navbar-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\":\"#navbar-demo\",\"actionHref\":\"#navbar-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\":\"navbar-0-2\",\"key\":\"navbar-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#navbar-demo\",\"actionHref\":\"#navbar-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_sticky = (ctx.url.searchParams.get("pg_sticky") ?? "false") === "true" state playground_openOnHover = (ctx.url.searchParams.get("pg_openOnHover") ?? "false") === "true" state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full" state playground_mobileLabel = ctx.url.searchParams.get("pg_mobileLabel") ?? "Navbar" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state demo_obj_0 = JSON.parse("{\"label\":\"Northwind\",\"description\":\"Console\",\"href\":\"/\"}") state demo_obj_1 = JSON.parse("{\"label\":\"Northwind\",\"icon\":\"icon-[lucide--box]\",\"href\":\"/\"}") state demo_obj_2 = JSON.parse("{\"label\":\"Acme\",\"href\":\"/\"}") seo { title = "Navbar" description = "Theme-aware, responsive navbar component." } view {
Navigation component

Navbar

Theme-aware, responsive navbar component.

13 props2 slots5 outputsTheme readyResponsive
Interactive playground

Configure Navbar

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

Live preview
Component code
<Navbar
  label="Navbar"
  topbarLabel="Navbar"
  brand='{
    "id": "navbar-0-1",
    "key": "navbar-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": "#navbar-demo",
    "actionHref": "#navbar-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"
    ]
  }'
  items='[
    {
      "id": "navbar-0-1",
      "key": "navbar-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": "#navbar-demo",
      "actionHref": "#navbar-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": "navbar-0-2",
      "key": "navbar-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#navbar-demo",
      "actionHref": "#navbar-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"
      ]
    }
  ]'
  actions='[
    {
      "id": "navbar-0-1",
      "key": "navbar-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": "#navbar-demo",
      "actionHref": "#navbar-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": "navbar-0-2",
      "key": "navbar-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#navbar-demo",
      "actionHref": "#navbar-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"
      ]
    }
  ]'
  mobileLabel="Navbar">
  <div data-slot="topbar">
    <div class="showcase-slot">topbar slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
</Navbar>
Event outputInteract with the preview to inspect the typed payload.
Component props13 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Brand, links and actions

The everyday shape: a brand, a row of links with the current page marked, and calls to action on the right. Arrow keys move along the menu bar.

01
Live preview
Component usage.wrn
<Navbar
  topbarLabel="Navbar"
  brand='{
    "label": "Northwind",
    "description": "Console",
    "href": "/"
  }'
  items='[
    {
      "label": "Overview",
      "href": "/",
      "value": "overview"
    },
    {
      "label": "Projects",
      "href": "/projects",
      "value": "projects"
    },
    {
      "label": "Reports",
      "href": "/reports",
      "value": "reports"
    }
  ]'
  actions='[
    {
      "label": "Sign in",
      "href": "/login",
      "variant": "link"
    },
    {
      "label": "Start free",
      "href": "/signup",
      "variant": "primary"
    }
  ]'
  active="projects"
  mobileLabel="Navbar">
  <div data-slot="topbar">
    <div class="showcase-slot">topbar slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
</Navbar>
Advanced

Dropdown and mega panel

An item carrying children opens a panel built from native details and summary, so it is keyboard operable without any extra script. Give a child its own children to get a titled column inside the panel.

02
Live preview
Component usage.wrn
<Navbar
  size="sm"
  label="Compact example"
  topbarLabel="Compact example"
  brand='{
    "label": "Northwind",
    "icon": "icon-[lucide--box]",
    "href": "/"
  }'
  items='[
    {
      "label": "Overview",
      "href": "/",
      "value": "overview"
    },
    {
      "label": "Products",
      "value": "products",
      "columns": 2,
      "description": "Everything in the platform.",
      "children": [
        {
          "label": "Platform",
          "children": [
            {
              "label": "Runtime",
              "href": "/runtime",
              "description": "The browser half.",
              "icon": "icon-[lucide--cpu]"
            },
            {
              "label": "Compiler",
              "href": "/compiler",
              "description": "WRN to JavaScript.",
              "icon": "icon-[lucide--hammer]"
            }
          ]
        },
        {
          "label": "Tooling",
          "children": [
            {
              "label": "CLI",
              "href": "/cli",
              "description": "Scaffold and deploy."
            },
            {
              "label": "Editor",
              "href": "/editor",
              "description": "Language server."
            }
          ]
        }
      ]
    },
    {
      "label": "Pricing",
      "href": "/pricing",
      "value": "pricing"
    }
  ]'
  actions='[
    {
      "label": "Book a demo",
      "href": "/demo",
      "variant": "primary"
    }
  ]'
  active="overview"
  mobileLabel="Compact example">
  <div data-slot="topbar">
    <div class="showcase-slot">topbar slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
</Navbar>
Compact

Sticky and compact

Sticky keeps the bar pinned while the page scrolls. The toggle appears below the tablet breakpoint and the links collapse behind it.

03
Live preview
Component usage.wrn
<Navbar
  size="sm"
  label="Advanced example"
  topbarLabel="Advanced example"
  brand='{
    "label": "Acme",
    "href": "/"
  }'
  items='[
    {
      "label": "Docs",
      "href": "/docs",
      "value": "docs"
    },
    {
      "label": "Support",
      "href": "/support",
      "value": "support"
    }
  ]'
  actions='[
    {
      "label": "Dashboard",
      "href": "/app",
      "variant": "primary"
    }
  ]'
  active="docs"
  sticky="true">
  <div data-slot="topbar">
    <div class="showcase-slot">topbar slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
</Navbar>
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.

@toggleFires when the component changes between open and closed or on and off states.
@openFires after the component opens.
@closeFires after the component closes.
@selectFires when an item, option, card, or result is selected.
@actionFires when the component's primary or item action is activated.
Declarative handlers.wrn
<Navbar
  @toggle='console.log(payload)'
  @open='console.log(payload)'
  @close='console.log(payload)'
  @select='console.log(payload)'
  @action='console.log(payload)'
/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"

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

if (component) registerOutputHandler(component, "toggle", (payload) => {
  console.log("toggle", payload)
})

if (component) registerOutputHandler(component, "open", (payload) => {
  console.log("open", payload)
})

if (component) registerOutputHandler(component, "close", (payload) => {
  console.log("close", payload)
})

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

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

Props and configuration

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

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Primary navigation"No
topbarLabelstring"Utility navigation"No
brandRecord<string, unknown>{}No
itemsunknown[][]No
actionsunknown[][]No
activestring""No
stickybooleanfalseNo
openOnHoverbooleanfalseNo
maxWidthstring"full"No
mobileLabelstring"Toggle navigation"No
classstring""No
} }