// 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_floating = (ctx.url.searchParams.get("pg_floating") ?? "false") === "true" state playground_startFloating = ctx.url.searchParams.get("pg_startFloating") ?? "0px" 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_collapseAt = ctx.url.searchParams.get("pg_collapseAt") ?? "900px" state playground_mobilePanel = ctx.url.searchParams.get("pg_mobilePanel") ?? "content" state playground_mobileUtilitiesPosition = ctx.url.searchParams.get("pg_mobileUtilitiesPosition") ?? "header" state playground_gutter = ctx.url.searchParams.get("pg_gutter") ?? "md" state playground_contentGutter = ctx.url.searchParams.get("pg_contentGutter") ?? "md" state playground_flushMobile = (ctx.url.searchParams.get("pg_flushMobile") ?? "false") === "true" state playground_translationPrefix = ctx.url.searchParams.get("pg_translationPrefix") ?? "" 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.

22 props4 slots5 outputsTheme readyResponsive
Interactive playground

Configure Navbar

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

Live preview
Component code
page NavbarExample {
  state 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 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"
    ]
  }
]
  view {
    <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="{items}"
      actions="{actions}"
      mobileLabel="Navbar">
      <div data-slot="topbar">
        <div class="showcase-slot">topbar slot</div>
      </div>
      <div data-slot="brand">
        <div class="showcase-slot">brand slot</div>
      </div>
      <div data-slot="actions">
        <div class="showcase-slot">actions slot</div>
      </div>
      <div data-slot="utilities">
        <div class="showcase-slot">utilities slot</div>
      </div>
    </Navbar>
  }
}
Event outputInteract with the preview to inspect the typed payload.
Component props22 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
page NavbarExample {
  state items = [
  {
    "label": "Overview",
    "href": "/",
    "value": "overview"
  },
  {
    "label": "Projects",
    "href": "/projects",
    "value": "projects"
  },
  {
    "label": "Reports",
    "href": "/reports",
    "value": "reports"
  }
]
  state actions = [
  {
    "label": "Sign in",
    "href": "/login",
    "variant": "link"
  },
  {
    "label": "Start free",
    "href": "/signup",
    "variant": "primary"
  }
]
  view {
    <Navbar
      topbarLabel="Navbar"
      brand='{
        "label": "Northwind",
        "description": "Console",
        "href": "/"
      }'
      items="{items}"
      actions="{actions}"
      active="projects"
      mobileLabel="Navbar">
      <div data-slot="topbar">
        <div class="showcase-slot">topbar slot</div>
      </div>
      <div data-slot="brand">
        <div class="showcase-slot">brand slot</div>
      </div>
      <div data-slot="actions">
        <div class="showcase-slot">actions slot</div>
      </div>
      <div data-slot="utilities">
        <div class="showcase-slot">utilities 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
page NavbarExample {
  state 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"
  }
]
  state actions = [
  {
    "label": "Book a demo",
    "href": "/demo",
    "variant": "primary"
  }
]
  view {
    <Navbar
      size="sm"
      label="Compact example"
      topbarLabel="Compact example"
      brand='{
        "label": "Northwind",
        "icon": "icon-[lucide--box]",
        "href": "/"
      }'
      items="{items}"
      actions="{actions}"
      active="overview"
      mobileLabel="Compact example">
      <div data-slot="topbar">
        <div class="showcase-slot">topbar slot</div>
      </div>
      <div data-slot="brand">
        <div class="showcase-slot">brand slot</div>
      </div>
      <div data-slot="actions">
        <div class="showcase-slot">actions slot</div>
      </div>
      <div data-slot="utilities">
        <div class="showcase-slot">utilities 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
page NavbarExample {
  state items = [
  {
    "label": "Docs",
    "href": "/docs",
    "value": "docs"
  },
  {
    "label": "Support",
    "href": "/support",
    "value": "support"
  }
]
  state actions = [
  {
    "label": "Dashboard",
    "href": "/app",
    "variant": "primary"
  }
]
  view {
    <Navbar
      size="sm"
      label="Advanced example"
      topbarLabel="Advanced example"
      brand='{
        "label": "Acme",
        "href": "/"
      }'
      items="{items}"
      actions="{actions}"
      active="docs"
      sticky="true">
      <div data-slot="topbar">
        <div class="showcase-slot">topbar slot</div>
      </div>
      <div data-slot="brand">
        <div class="showcase-slot">brand slot</div>
      </div>
      <div data-slot="actions">
        <div class="showcase-slot">actions slot</div>
      </div>
      <div data-slot="utilities">
        <div class="showcase-slot">utilities 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
floatingbooleanfalseNo
startFloatingstring"0px"No
openOnHoverbooleanfalseNo
maxWidthstring"full"No
mobileLabelstring"Toggle navigation"No
collapseAtstring"900px"No
mobilePanelstring"content"No
mobileUtilitiesPositionstring"header"No
gutterstring"md"No
contentGutterstring"md"No
flushMobilebooleanfalseNo
translationPrefixstring""No
classstring""No
} }