Navigation

Tree Item

semantic HTML

tree 안의 개별 계층 노드입니다.

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

expanded, selected, disabled 상태를 ARIA에 반영하고 중첩 항목은 group 구조 안에 둡니다.

Server template guidance

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