Navigation

Tree

semantic HTML

계층 데이터를 펼치고 선택할 수 있게 표시합니다.

stablefreeSince 0.3

Live example

src
- components
  - tree.js
  - tabs.js

<ul data-standard-component="tree" data-ui="tree" role="tree" aria-label="Project files"><li role="treeitem" aria-expanded="true" aria-selected="true" tabindex="0">src <ul role="group"><li role="treeitem" aria-expanded="true">components <ul role="group"><li role="treeitem">tree.js</li><li role="treeitem">tabs.js</li></ul></li></ul></li></ul>

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.3`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

방향키, Home, End, Enter, Space로 탐색·선택하고 현재 선택 항목에 roving tabindex를 유지합니다.

Server template guidance

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