Navigation
Mega Menu
semantic HTML여러 탐색 그룹을 넓은 패널에 구성합니다.
Live example
<nav data-standard-component="mega-menu" aria-label="Product navigation" data-mega-menu><button type="button" data-mega-trigger aria-expanded="false">Explore products</button><div class="example-mega-grid" data-mega-panel hidden><section><strong>Build</strong><a href="#components">Components</a><a href="#patterns">Patterns</a></section><section><strong>Learn</strong><a href="#guides">Guides</a><a href="#accessibility">Accessibility</a></section><section><strong>Ship</strong><a href="#release">Release</a><a href="#rollback">Rollback</a></section></div></nav>Variants and sizes
The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.
compactcomfortableroomy
Public API
| Contract | Value |
|---|---|
| Implementation | semantic HTML |
| Status | stable |
| License | free |
| Since | 0.4 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
트리거의 expanded 상태와 panel 연결을 제공하고 Escape와 외부 클릭에서 안전하게 닫습니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->