Menu Bar

<div class="example-menu-variants">
<section class="example-menu-variant"><h3>1단 메뉴</h3><p>하위 메뉴 없이 기본 링크만 배치합니다.</p><div data-standard-component="menu-bar" label="Open one-level navigation" levels="1" data='{"label":"One level navigation","levels":1,"brand":{"label":"Studio","href":"#home"},"primary":[{"id":"home","label":"Home","href":"#home"},{"id":"articles","label":"Articles","href":"#articles"},{"id":"about","label":"About","href":"#about"},{"id":"contact","label":"Contact","href":"#contact"}]}'><nav aria-label="Menu fallback"><a href="#home">Home</a><a href="#articles">Articles</a><a href="#about">About</a><a href="#contact">Contact</a></nav></div></section>
<section class="example-menu-variant"><h3>2단 메뉴</h3><p>상위 항목을 클릭하면 한 단계 하위 메뉴를 엽니다.</p><div data-standard-component="menu-bar" label="Open two-level navigation" levels="2" desktop-mode="disclosure" data='{"label":"Two level navigation","levels":2,"brand":{"label":"Workspace","href":"#home"},"desktop":{"mode":"disclosure","open":"hover"},"expand":{"mode":"step","allowMultiple":false},"primary":[{"id":"products","label":"Products","children":[{"id":"editor","label":"Editor","href":"#editor"},{"id":"analytics","label":"Analytics","href":"#analytics"}]},{"id":"guides","label":"Guides","children":[{"id":"start","label":"Getting started","href":"#start"},{"id":"api","label":"API reference","href":"#api"}]}]}'><nav aria-label="Menu fallback"><a href="#editor">Editor</a><a href="#analytics">Analytics</a><a href="#start">Getting started</a><a href="#api">API reference</a></nav></div></section>
<section class="example-menu-variant"><h3>3단 메뉴</h3><p>상위 단계부터 순서대로 열어 세 번째 단계까지 탐색합니다.</p><div data-standard-component="menu-bar" label="Open three-level navigation" levels="3" desktop-mode="disclosure" data='{"label":"Three level navigation","levels":3,"brand":{"label":"Platform","href":"#home"},"desktop":{"mode":"disclosure","open":"hover"},"expand":{"mode":"step","allowMultiple":false},"primary":[{"id":"products","label":"Products","children":[{"id":"platform","label":"Platform","children":[{"id":"api","label":"API","href":"#api"},{"id":"integrations","label":"Integrations","href":"#integrations"}]},{"id":"editor","label":"Editor","href":"#editor"}]},{"id":"company","label":"Company","href":"#company"}]}'><nav aria-label="Menu fallback"><a href="#api">API</a><a href="#integrations">Integrations</a><a href="#editor">Editor</a><a href="#company">Company</a></nav></div></section>
<section class="example-menu-variant"><h3>1단 클릭 -> 전체 펼침</h3><p>Mega 모드는 첫 항목을 클릭하면 모든 하위 단계를 한 번에 표시합니다.</p><div data-standard-component="menu-bar" label="Open mega navigation" levels="3" desktop-mode="mega" open-mode="click" data='{"label":"Mega navigation","levels":3,"brand":{"label":"Catalog","href":"#home"},"desktop":{"mode":"mega","open":"click"},"expand":{"mode":"step","allowMultiple":true},"primary":[{"id":"catalog","label":"All products","children":[{"id":"design","label":"Design tools","children":[{"id":"figma","label":"Interface kit","href":"#figma"},{"id":"tokens","label":"Design tokens","href":"#tokens"}]},{"id":"development","label":"Development","children":[{"id":"api","label":"API","href":"#api"},{"id":"deploy","label":"Deployments","href":"#deploy"}]}]},{"id":"pricing","label":"Pricing","href":"#pricing"}]}'><nav aria-label="Menu fallback"><a href="#figma">Interface kit</a><a href="#tokens">Design tokens</a><a href="#api">API</a><a href="#deploy">Deployments</a><a href="#pricing">Pricing</a></nav></div></section>
</div>