ChoisSTANDARD UI컴포넌트 검색 /

Navigation

Application Navigation

semantic HTML

브랜드, 탐색 링크와 모바일 메뉴 토글을 조합하는 범용 애플리케이션 탐색입니다.

stablefreeSince 0.6

Live example

<nav data-standard-component="app-navigation" aria-label="Primary"><strong>Chois</strong><button type="button" data-nav-toggle aria-expanded="false">Open navigation</button><div data-nav-panel><a href="#overview" aria-current="page">Overview</a><a href="#content">Content</a><a href="#settings">Settings</a></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

ContractValue
Implementationsemantic HTML
Statusstable
Licensefree
Since0.6
HTML contractNative HTML elements and attributes
EventsNative browser events

Accessibility

native navigation landmark, expanded state and light-DOM links

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->