ClintchizandClaude Opus 5
124da548b8
Every bundled component must expose color and size; the rewrites dropped them, which the library-wide invariant test caught. Rather than re-adding them as dead props, each component now maps color onto an accent variable that its active, current and focus affordances actually use, and size onto the root font scale. Regenerates the component reference, showcase and visual contract. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
437 lines
24 KiB
Plaintext
437 lines
24 KiB
Plaintext
// 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 {
|
|
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
|
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/navigation">Navigation</a><span aria-hidden="true">/</span><span>Nav</span>
|
|
</nav>
|
|
<header class="detail-hero">
|
|
<div class="detail-hero-copy">
|
|
<span class="showcase-eyebrow">Navigation component</span>
|
|
<h1>Nav</h1>
|
|
<p>Theme-aware, responsive nav component.</p>
|
|
<div class="detail-badges"><span>9 props</span><span>1 slots</span><span>1 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
|
</div>
|
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
|
</header>
|
|
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="Nav" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select">
|
|
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Nav</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
|
|
<div class="playground-workbench">
|
|
<div class="playground-preview">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="playground-preview-source" data-playground-preview><Nav color='{playground_color}' size='{playground_size}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' label='{playground_label}' collapsible='{playground_collapsible}' toggleLabel='{playground_toggleLabel}' class='{playground_class}' /></div>
|
|
<section class="playground-code" aria-label="Current component code">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
|
<pre><code data-playground-code><Nav
|
|
items='[
|
|
<span>{</span>
|
|
"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": [
|
|
<span>{</span>
|
|
"label": "Nested option A",
|
|
"value": "nested-a"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Nested option B",
|
|
"value": "nested-b"
|
|
<span>}</span>
|
|
],
|
|
"links": [
|
|
<span>{</span>
|
|
"label": "Documentation",
|
|
"href": "#documentation"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "API reference",
|
|
"href": "#api-reference"
|
|
<span>}</span>
|
|
],
|
|
"values": [
|
|
"Included",
|
|
"Standard"
|
|
]
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"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": [
|
|
<span>{</span>
|
|
"label": "Nested option A",
|
|
"value": "nested-a"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Nested option B",
|
|
"value": "nested-b"
|
|
<span>}</span>
|
|
],
|
|
"links": [
|
|
<span>{</span>
|
|
"label": "Documentation",
|
|
"href": "#documentation"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "API reference",
|
|
"href": "#api-reference"
|
|
<span>}</span>
|
|
],
|
|
"values": [
|
|
"Included",
|
|
"Standard"
|
|
]
|
|
<span>}</span>
|
|
]'
|
|
label="Nav"
|
|
toggleLabel="Nav"
|
|
/></code></pre>
|
|
</section>
|
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
|
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
|
|
</div>
|
|
<form class="playground-controls" data-playground-form>
|
|
<header><div><span>Component props</span><strong>9 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
|
<div class="playground-fields"><label class="playground-field" for="playground-nav-color"><span><strong>color</strong><small>string</small></span><select id="playground-nav-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-nav-size"><span><strong>size</strong><small>string</small></span><select id="playground-nav-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-nav-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-nav-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
|
{
|
|
"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"
|
|
]
|
|
}
|
|
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-nav-active"><span><strong>active</strong><small>string</small></span><input id="playground-nav-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-nav-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-nav-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-nav-label"><span><strong>label</strong><small>string</small></span><input id="playground-nav-label" name="pg_label" type="text" value="Nav" /></label><label class="playground-toggle" for="playground-nav-collapsible"><span><strong>collapsible</strong><small>boolean</small></span><input id="playground-nav-collapsible" name="pg_collapsible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-nav-toggleLabel"><span><strong>toggle Label</strong><small>string</small></span><input id="playground-nav-toggleLabel" name="pg_toggleLabel" type="text" value="Nav" /></label><label class="playground-field" for="playground-nav-class"><span><strong>class</strong><small>string</small></span><input id="playground-nav-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
<div class="detail-layout">
|
|
<main class="detail-content">
|
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Recommended</span><h2>Horizontal links</h2><p>A flat link bar. The active item is marked with aria-current, and the arrow keys move between items.</p></div>
|
|
<span class="demo-case-number">01</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="nav-demo-1" class="demo-canvas demo-canvas--1">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><Nav size="default" 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" collapsible="true" toggleLabel="Nav" class="showcase-instance showcase-instance--1" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Horizontal links usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Nav
|
|
items='[
|
|
<span>{</span>
|
|
"label": "Home",
|
|
"href": "/",
|
|
"value": "home",
|
|
"icon": "icon-[lucide--house]"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Inbox",
|
|
"href": "/inbox",
|
|
"value": "inbox",
|
|
"badge": "9"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Reports",
|
|
"href": "/reports",
|
|
"value": "reports"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Archive",
|
|
"href": "/archive",
|
|
"value": "archive",
|
|
"disabled": true
|
|
<span>}</span>
|
|
]'
|
|
active="inbox"
|
|
label="Nav"
|
|
toggleLabel="Nav"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Advanced</span><h2>Nested submenus</h2><p>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.</p></div>
|
|
<span class="demo-case-number">02</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="nav-demo-2" class="demo-canvas demo-canvas--2">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><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" collapsible="true" toggleLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Nested submenus usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Nav
|
|
size="sm"
|
|
items='[
|
|
<span>{</span>
|
|
"label": "Home",
|
|
"href": "/",
|
|
"value": "home"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Products",
|
|
"value": "products",
|
|
"items": [
|
|
<span>{</span>
|
|
"label": "Overview",
|
|
"href": "/p",
|
|
"value": "p-overview"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Platform",
|
|
"value": "p-platform",
|
|
"items": [
|
|
<span>{</span>
|
|
"label": "Runtime",
|
|
"href": "/p/runtime",
|
|
"value": "runtime"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Compiler",
|
|
"href": "/p/compiler",
|
|
"value": "compiler"
|
|
<span>}</span>
|
|
]
|
|
<span>}</span>
|
|
]
|
|
<span>}</span>
|
|
]'
|
|
active="p-overview"
|
|
label="Compact example"
|
|
toggleLabel="Compact example"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Recommended</span><h2>Vertical rail</h2><p>Vertical orientation switches the arrow keys to up and down.</p></div>
|
|
<span class="demo-case-number">03</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="nav-demo-3" class="demo-canvas demo-canvas--3">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><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" class="showcase-instance showcase-instance--3" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Vertical rail usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Nav
|
|
size="lg"
|
|
items='[
|
|
<span>{</span>
|
|
"label": "Dashboard",
|
|
"href": "/",
|
|
"value": "dash",
|
|
"icon": "icon-[lucide--gauge]"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Team",
|
|
"href": "/team",
|
|
"value": "team",
|
|
"icon": "icon-[lucide--users]"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Settings",
|
|
"href": "/settings",
|
|
"value": "settings",
|
|
"icon": "icon-[lucide--settings]"
|
|
<span>}</span>
|
|
]'
|
|
active="team"
|
|
orientation="vertical"
|
|
label="Advanced example"
|
|
collapsible="false"
|
|
toggleLabel="Advanced example"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article></div></section>
|
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component outputs</span><h2>Receive every typed component output</h2><p>Use declarative output handlers in <code>.wrn</code> files or register a direct output handler from JavaScript. The canonical API exposes <code>payload</code> and does not require <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code><Nav
|
|
@select='console.log(payload)'
|
|
/></code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Direct output handlers</span><small>.js</small></header><pre><code>import <span>{</span> registerOutputHandler <span>}</span> from "@wrnexus/csr/outputs"
|
|
|
|
const component = document.querySelector("[data-ui-component=\"Nav\"], [data-component=\"Nav\"]")
|
|
|
|
if (component) registerOutputHandler(component, "select", (payload) => <span>{</span>
|
|
console.log("select", payload)
|
|
<span>}</span>)</code></pre></section></div></div></section>
|
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Main"</code></td><td>No</td></tr><tr><td><code>collapsible</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>toggleLabel</code></td><td>string</td><td><code>"Menu"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
|
</main>
|
|
<aside class="detail-aside">
|
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#nav-demo-1">Horizontal links</a><a href="#nav-demo-2">Nested submenus</a><a href="#nav-demo-3">Vertical rail</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
|
</aside>
|
|
</div>
|
|
<nav class="detail-pagination">
|
|
<a href="/components/mega-menu"><small>Previous</small><strong>← Mega Menu</strong></a>
|
|
<a href="/components/navbar"><small>Next</small><strong>Navbar →</strong></a>
|
|
</nav>
|
|
}
|
|
}
|