ClintchizandClaude Opus 5
f1d1081b67
MegaMenu replaces a scaffold with a trigger and a wide panel of grouped link columns. One level deep on purpose: a mega menu exists to show breadth flat so everything is one click away, and nesting inside the panel buries content behind hover-within-hover. Nav is the component for cascading submenus. The panel is anchored so the runtime clamp keeps it inside the viewport. Sidebar now composes Drawer for its off-canvas presentation instead of a hand-rolled backdrop, inheriting the focus trap and scroll lock from one place. Single items, labelled groups and branches nested to three levels, with vertical roving focus. Sidebar classes move to the BEM naming the rest of the library uses, which is a breaking change; nesting via children still works, since that is what shipped in 0.8.5. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
408 lines
22 KiB
Plaintext
408 lines
22 KiB
Plaintext
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
|
page MegaMenuDetail {
|
|
layout = "showcase"
|
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
|
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Mega Menu"
|
|
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
|
|
state playground_columns = JSON.parse(ctx.url.searchParams.get("pg_columns") ?? "[{\"id\":\"mega-menu-0-1\",\"key\":\"mega-menu-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\":\"#mega-menu-demo\",\"actionHref\":\"#mega-menu-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\":\"mega-menu-0-2\",\"key\":\"mega-menu-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#mega-menu-demo\",\"actionHref\":\"#mega-menu-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_footer = ctx.url.searchParams.get("pg_footer") ?? ""
|
|
state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
|
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
|
seo {
|
|
title = "Mega Menu"
|
|
description = "Theme-aware, responsive mega menu 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>Mega Menu</span>
|
|
</nav>
|
|
<header class="detail-hero">
|
|
<div class="detail-hero-copy">
|
|
<span class="showcase-eyebrow">Navigation component</span>
|
|
<h1>Mega Menu</h1>
|
|
<p>Theme-aware, responsive mega menu component.</p>
|
|
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>3 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="MegaMenu" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="open,close,select">
|
|
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Mega Menu</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><MegaMenu color='{playground_color}' size='{playground_size}' label='{playground_label}' icon='{playground_icon}' columns='{playground_columns}' footer='{playground_footer}' defaultOpen='{playground_defaultOpen}' 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><MegaMenu
|
|
label="Mega Menu"
|
|
columns='[
|
|
<span>{</span>
|
|
"id": "mega-menu-0-1",
|
|
"key": "mega-menu-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": "#mega-menu-demo",
|
|
"actionHref": "#mega-menu-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": "mega-menu-0-2",
|
|
"key": "mega-menu-0-2",
|
|
"value": "secondary",
|
|
"label": "Additional option",
|
|
"title": "Supporting example",
|
|
"description": "A clean default configuration for everyday product interfaces.",
|
|
"text": "Another configurable message.",
|
|
"href": "#mega-menu-demo",
|
|
"actionHref": "#mega-menu-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>
|
|
]'
|
|
/></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>8 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-mega-menu-color"><span><strong>color</strong><small>string</small></span><select id="playground-mega-menu-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-mega-menu-size"><span><strong>size</strong><small>string</small></span><select id="playground-mega-menu-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-mega-menu-label"><span><strong>label</strong><small>string</small></span><input id="playground-mega-menu-label" name="pg_label" type="text" value="Mega Menu" /></label><label class="playground-field" for="playground-mega-menu-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-mega-menu-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-mega-menu-columns"><span><strong>columns</strong><small>unknown[]</small></span><textarea id="playground-mega-menu-columns" name="pg_columns" rows="5" spellcheck="false" data-playground-json>[
|
|
{
|
|
"id": "mega-menu-0-1",
|
|
"key": "mega-menu-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": "#mega-menu-demo",
|
|
"actionHref": "#mega-menu-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": "mega-menu-0-2",
|
|
"key": "mega-menu-0-2",
|
|
"value": "secondary",
|
|
"label": "Additional option",
|
|
"title": "Supporting example",
|
|
"description": "A clean default configuration for everyday product interfaces.",
|
|
"text": "Another configurable message.",
|
|
"href": "#mega-menu-demo",
|
|
"actionHref": "#mega-menu-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-mega-menu-footer"><span><strong>footer</strong><small>string</small></span><input id="playground-mega-menu-footer" name="pg_footer" type="text" value="" /></label><label class="playground-toggle" for="playground-mega-menu-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-mega-menu-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-mega-menu-class"><span><strong>class</strong><small>string</small></span><input id="playground-mega-menu-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>Grouped columns</h2><p>One level deep by design: a mega menu shows breadth flat so everything is one click away. Nesting inside the panel would bury content behind hover-within-hover. Use Nav when you want cascading submenus.</p></div>
|
|
<span class="demo-case-number">01</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="mega-menu-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"><MegaMenu size="default" label="Products" icon="icon-[lucide--box]" columns='[{"heading":"Platform","items":[{"label":"Runtime","href":"/runtime","description":"The browser half of the framework."},{"label":"Compiler","href":"/compiler","description":"WRN to JavaScript."}]},{"heading":"Tooling","items":[{"label":"CLI","href":"/cli","description":"Scaffold, build and deploy."},{"label":"Editor","href":"/editor","description":"Language server and syntax."}]}]' defaultOpen="false" class="showcase-instance showcase-instance--1" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Grouped columns usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><MegaMenu
|
|
label="Products"
|
|
icon="icon-[lucide--box]"
|
|
columns='[
|
|
<span>{</span>
|
|
"heading": "Platform",
|
|
"items": [
|
|
<span>{</span>
|
|
"label": "Runtime",
|
|
"href": "/runtime",
|
|
"description": "The browser half of the framework."
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Compiler",
|
|
"href": "/compiler",
|
|
"description": "WRN to JavaScript."
|
|
<span>}</span>
|
|
]
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"heading": "Tooling",
|
|
"items": [
|
|
<span>{</span>
|
|
"label": "CLI",
|
|
"href": "/cli",
|
|
"description": "Scaffold, build and deploy."
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Editor",
|
|
"href": "/editor",
|
|
"description": "Language server and syntax."
|
|
<span>}</span>
|
|
]
|
|
<span>}</span>
|
|
]'
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Advanced</span><h2>With a footer note</h2><p>The panel is anchored, so the runtime clamp pulls it back inside the viewport instead of letting it hang off a wide layout. On a phone it stops floating and joins the flow.</p></div>
|
|
<span class="demo-case-number">02</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="mega-menu-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"><MegaMenu size="sm" label="Solutions" icon="icon-[lucide--arrow-right]" columns='[{"heading":"By team","items":[{"label":"Engineering","href":"/eng","icon":"icon-[lucide--code]"},{"label":"Design","href":"/design","icon":"icon-[lucide--palette]"},{"label":"Support","href":"/support","icon":"icon-[lucide--life-buoy]"}]},{"heading":"By size","items":[{"label":"Startup","href":"/startup"},{"label":"Enterprise","href":"/enterprise"}]}]' footer="Not sure where to start? Talk to us." defaultOpen="false" class="showcase-instance showcase-instance--2" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="With a footer note usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><MegaMenu
|
|
size="sm"
|
|
label="Solutions"
|
|
icon="icon-[lucide--arrow-right]"
|
|
columns='[
|
|
<span>{</span>
|
|
"heading": "By team",
|
|
"items": [
|
|
<span>{</span>
|
|
"label": "Engineering",
|
|
"href": "/eng",
|
|
"icon": "icon-[lucide--code]"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Design",
|
|
"href": "/design",
|
|
"icon": "icon-[lucide--palette]"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Support",
|
|
"href": "/support",
|
|
"icon": "icon-[lucide--life-buoy]"
|
|
<span>}</span>
|
|
]
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"heading": "By size",
|
|
"items": [
|
|
<span>{</span>
|
|
"label": "Startup",
|
|
"href": "/startup"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Enterprise",
|
|
"href": "/enterprise"
|
|
<span>}</span>
|
|
]
|
|
<span>}</span>
|
|
]'
|
|
footer="Not sure where to start? Talk to us."
|
|
/></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>@open</code><span>Fires after the component opens.</span></div><div><code>@close</code><span>Fires after the component closes.</span></div><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><MegaMenu
|
|
@open='console.log(payload)'
|
|
@close='console.log(payload)'
|
|
@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=\"MegaMenu\"], [data-component=\"MegaMenu\"]")
|
|
|
|
if (component) registerOutputHandler(component, "open", (payload) => <span>{</span>
|
|
console.log("open", payload)
|
|
<span>}</span>)
|
|
|
|
if (component) registerOutputHandler(component, "close", (payload) => <span>{</span>
|
|
console.log("close", payload)
|
|
<span>}</span>)
|
|
|
|
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>label</code></td><td>string</td><td><code>"Menu"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>footer</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</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="#mega-menu-demo-1">Grouped columns</a><a href="#mega-menu-demo-2">With a footer note</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
|
</aside>
|
|
</div>
|
|
<nav class="detail-pagination">
|
|
<a href="/components/breadcrumb"><small>Previous</small><strong>← Breadcrumb</strong></a>
|
|
<a href="/components/nav"><small>Next</small><strong>Nav →</strong></a>
|
|
</nav>
|
|
}
|
|
}
|