Tree view

CANARY

Component demo

Interactive example

Web component

React

<ic-tree-viewheading="Menu">
<ic-tree-itemlabel="Coffee"></ic-tree-item>
<ic-tree-itemlabel="Tea"></ic-tree-item>
<ic-tree-itemlabel="Hot chocolate"></ic-tree-item>
</ic-tree-view>

<IcTreeViewheading="Menu">
<IcTreeItemlabel="Coffee"/>
<IcTreeItemlabel="Tea"/>
<IcTreeItemlabel="Hot chocolate"/>
</IcTreeView>

Tree view details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property focusInset Attribute focus-inset	If`true` , tree items will have inset focus. type: boolean	false
Property heading Attribute heading	The heading of the tree view. type: string	""
Property size Attribute size	The size of the tree view. type: IcSizes - "large" \| "medium" \| "small"	"medium"
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light"	"inherit"

Property

focusInset

Attribute

focus-inset

Iftrue , tree items will have inset focus.

type: boolean

Default: false

Property

heading

Attribute

heading

The heading of the tree view.

type: string

Default: ""

Property

size

Attribute

size

The size of the tree view.

type: IcSizes - "large" | "medium" | "small"

Default: "medium"

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light"

Default: "inherit"

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot heading	Content is set as the tree view heading.
Slot icon	Content is placed to the left of the heading.

CSS Custom Properties

Name	Description
--tree-view-width	Width of the tree view

--tree-view-width Width of the tree view

Tree item details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property disabled Attribute disabled	If`true` , the tree item appears in the disabled state. type: boolean	false
Property expanded Attribute expanded	If`true` , the tree item appears in the expanded state. type: boolean	false
Property href Attribute href	The URL that the tree item link points to. If set, the tree item will render as an "a" tag, otherwise it will render as a div. type: string \| undefined - string
Property hreflang Attribute hreflang	The human language of the linked URL. type: string	""
Property label Attribute label	The label of the tree item. type: string	""
Property referrerpolicy Attribute referrerpolicy	How much of the referrer to send when following the link. type: ReferrerPolicy - "" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url"
Property rel Attribute rel	The relationship of the linked URL as space-separated link types. type: string
Property selected Attribute selected	If`true` , the tree item appears in the selected state. type: boolean	false
Property target Attribute target	The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe). type: string
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light"	"inherit"

Property

disabled

Attribute

disabled

Iftrue , the tree item appears in the disabled state.

type: boolean

Default: false

Property

expanded

Attribute

expanded

Iftrue , the tree item appears in the expanded state.

type: boolean

Default: false

Property

href

Attribute

href

The URL that the tree item link points to. If set, the tree item will render as an "a" tag, otherwise it will render as a div.

type: string | undefined - string

Property

hreflang

Attribute

hreflang

The human language of the linked URL.

type: string

Default: ""

Property

label

Attribute

label

The label of the tree item.

type: string

Default: ""

Property

referrerpolicy

Attribute

referrerpolicy

How much of the referrer to send when following the link.

Property

rel

Attribute

rel

The relationship of the linked URL as space-separated link types.

type: string

Property

selected

Attribute

selected

Iftrue , the tree item appears in the selected state.

type: boolean

Default: false

Property

target

Attribute

target

The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).

type: string

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light"

Default: "inherit"

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Name	Description
Slot icon	Content is placed to the left of the label.
Slot label	Content is set as the tree item label.
Slot router-item	Handle routing by nesting your routes in this slot.

Events

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Name	Description	Signature
Web component icTreeItemSelected React onIcTreeItemSelected	Emitted when tree item is selected.	{ id: string; }

Web component

icTreeItemSelected

React

onIcTreeItemSelected

Emitted when tree item is selected.

{ id: string; }

Methods

Name	Description	Signature
Method setFocus	Sets focus on the native `input`.	setFocus() => Promise<void>

Method

setFocus

Sets focus on the native `input`.

setFocus() => Promise<void>

Variants

Nested levels

Interactive example

Web component

React

<ic-tree-viewheading="Menu">
<ic-tree-itemlabel="Coffee">
<ic-tree-itemlabel="Americano"></ic-tree-item>
<ic-tree-itemlabel="Latte"></ic-tree-item>
<ic-tree-itemlabel="Espresso"></ic-tree-item>
</ic-tree-item>
<ic-tree-itemlabel="Tea">
<ic-tree-itemlabel="Earl Grey"></ic-tree-item>
<ic-tree-itemlabel="Chai"></ic-tree-item>
</ic-tree-item>
<ic-tree-itemlabel="Hot chocolate"></ic-tree-item>
</ic-tree-view>

<IcTreeViewheading="Menu">
<IcTreeItemlabel="Coffee">
<IcTreeItemlabel="Americano"/>
<IcTreeItemlabel="Latte"/>
<IcTreeItemlabel="Espresso"/>
</IcTreeItem>
<IcTreeItemlabel="Tea">
<IcTreeItemlabel="Earl Grey"/>
<IcTreeItemlabel="Chai"/>
</IcTreeItem>
<IcTreeItemlabel="Hot chocolate"/>
</IcTreeView>

Slotted icons

Interactive example

Web component

React

<ic-tree-viewheading="Menu">
<svgslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
/>
</svg>
<ic-tree-itemlabel="Coffee">
<svgslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</svg>
<ic-tree-itemlabel="Americano"></ic-tree-item>
<ic-tree-itemlabel="Latte">
<svgslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</svg>
</ic-tree-item>
<ic-tree-itemlabel="Espresso"></ic-tree-item>
</ic-tree-item>
<ic-tree-itemlabel="Tea">
<ic-tree-itemlabel="Earl Grey"></ic-tree-item>
<ic-tree-itemlabel="Chai"></ic-tree-item>
</ic-tree-item>
<ic-tree-itemlabel="Hot chocolate"></ic-tree-item>
</ic-tree-view>

<IcTreeViewheading="Menu">
<SlottedSVGslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
/>
</SlottedSVG>
<IcTreeItemlabel="Coffee">
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</SlottedSVG>
<IcTreeItemlabel="Americano"/>
<IcTreeItemlabel="Latte">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</svg>
</IcTreeItem>
<IcTreeItemlabel="Espresso"/>
</IcTreeItem>
<IcTreeItemlabel="Tea">
<IcTreeItemlabel="Earl Grey"/>
<IcTreeItemlabel="Chai"/>
</IcTreeItem>
<IcTreeItemlabel="Hot chocolate"/>
</IcTreeView>

Small

Interactive example

Web component

React

<ic-tree-viewheading="Menu"size="small">
<svgslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
/>
</svg>
<ic-tree-itemlabel="Coffee">
<svgslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</svg>
<ic-tree-itemlabel="Americano"></ic-tree-item>
<ic-tree-itemlabel="Latte">
<svgslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</svg>
</ic-tree-item>
<ic-tree-itemlabel="Espresso"></ic-tree-item>
</ic-tree-item>
<ic-tree-itemlabel="Tea">
<ic-tree-itemlabel="Earl Grey"></ic-tree-item>
<ic-tree-itemlabel="Chai"></ic-tree-item>
</ic-tree-item>
<ic-tree-itemlabel="Hot chocolate"></ic-tree-item>
</ic-tree-view>

<IcTreeViewheading="Menu"size="small">
<SlottedSVGslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
/>
</SlottedSVG>
<IcTreeItemlabel="Coffee">
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</SlottedSVG>
<IcTreeItemlabel="Americano"/>
<IcTreeItemlabel="Latte">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</svg>
</IcTreeItem>
<IcTreeItemlabel="Espresso"/>
</IcTreeItem>
<IcTreeItemlabel="Tea">
<IcTreeItemlabel="Earl Grey"/>
<IcTreeItemlabel="Chai"/>
</IcTreeItem>
<IcTreeItemlabel="Hot chocolate"/>
</IcTreeView>

Large

Interactive example

Web component

React

<ic-tree-viewheading="Menu"size="large">
<svgslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
/>
</svg>
<ic-tree-itemlabel="Coffee">
<svgslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</svg>
<ic-tree-itemlabel="Americano"></ic-tree-item>
<ic-tree-itemlabel="Latte">
<svgslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</svg>
</ic-tree-item>
<ic-tree-itemlabel="Espresso"></ic-tree-item>
</ic-tree-item>
<ic-tree-itemlabel="Tea">
<ic-tree-itemlabel="Earl Grey"></ic-tree-item>
<ic-tree-itemlabel="Chai"></ic-tree-item>
</ic-tree-item>
<ic-tree-itemlabel="Hot chocolate"></ic-tree-item>
</ic-tree-view>

<IcTreeViewheading="Menu"size="large">
<SlottedSVGslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
/>
</SlottedSVG>
<IcTreeItemlabel="Coffee">
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</SlottedSVG>
<IcTreeItemlabel="Americano"/>
<IcTreeItemlabel="Latte">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</svg>
</IcTreeItem>
<IcTreeItemlabel="Espresso"/>
</IcTreeItem>
<IcTreeItemlabel="Tea">
<IcTreeItemlabel="Earl Grey"/>
<IcTreeItemlabel="Chai"/>
</IcTreeItem>
<IcTreeItemlabel="Hot chocolate"/>
</IcTreeView>

Theme

Interactive example

Web component

React

<ic-tree-viewheading="Menu"theme="dark">
<svgslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
/>
</svg>
<ic-tree-itemlabel="Coffee">
<svgslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</svg>
<ic-tree-itemlabel="Americano"></ic-tree-item>
<ic-tree-itemlabel="Latte">
<svgslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</svg>
</ic-tree-item>
<ic-tree-itemlabel="Espresso"></ic-tree-item>
</ic-tree-item>
<ic-tree-itemlabel="Tea">
<ic-tree-itemlabel="Earl Grey"></ic-tree-item>
<ic-tree-itemlabel="Chai"></ic-tree-item>
</ic-tree-item>
<ic-tree-itemlabel="Hot chocolate"></ic-tree-item>
</ic-tree-view>

<IcTreeViewheading="Menu"theme="dark">
<SlottedSVGslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
/>
</SlottedSVG>
<IcTreeItemlabel="Coffee">
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</SlottedSVG>
<IcTreeItemlabel="Americano"/>
<IcTreeItemlabel="Latte">
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</SlottedSVG>
</IcTreeItem>
<IcTreeItemlabel="Espresso"/>
</IcTreeItem>
<IcTreeItemlabel="Tea">
<IcTreeItemlabel="Earl Grey"/>
<IcTreeItemlabel="Chai"/>
</IcTreeItem>
<IcTreeItemlabel="Hot chocolate"/>
</IcTreeView>

Disabled tree items

Interactive example

Web component

React

<ic-tree-viewheading="Menu">
<svgslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
/>
</svg>
<ic-tree-itemlabel="Coffee">
<svgslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</svg>
<ic-tree-itemlabel="Americano"></ic-tree-item>
<ic-tree-itemlabel="Latte"disabled="true">
<svgslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</svg>
</ic-tree-item>
<ic-tree-itemlabel="Espresso"></ic-tree-item>
</ic-tree-item>
<ic-tree-itemlabel="Tea">
<ic-tree-itemlabel="Earl Grey"></ic-tree-item>
<ic-tree-itemlabel="Chai"disabled="true"></ic-tree-item>
</ic-tree-item>
<ic-tree-itemlabel="Hot chocolate"disabled="true"></ic-tree-item>
</ic-tree-view>

<IcTreeViewheading="Menu">
<SlottedSVGslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
/>
</SlottedSVG>
<IcTreeItemlabel="Coffee">
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</SlottedSVG>
<IcTreeItemlabel="Americano"/>
<IcTreeItemlabel="Latte"disabled>
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</SlottedSVG>
</IcTreeItem>
<IcTreeItemlabel="Espresso"/>
</IcTreeItem>
<IcTreeItemlabel="Tea">
<IcTreeItemlabel="Earl Grey"/>
<IcTreeItemlabel="Chai"disabled/>
</IcTreeItem>
<IcTreeItemlabel="Hot chocolate"disabled/>
</IcTreeView>

Slotted content

Interactive example

Coffee

Web component

React

<ic-tree-view>
<ic-typographyvariant="subtitle-large"slot="heading">Menu</ic-typography>
<ic-tree-item>
<ic-typographyslot="label">Coffee</ic-typography>
</ic-tree-item>
<ic-tree-itemlabel="Tea"></ic-tree-item>
<ic-tree-itemlabel="Hot chocolate"></ic-tree-item>
</ic-tree-view>

<IcTreeView>
<IcTypographyvariant="subtitle-large"slot="heading">Menu</IcTypography>
<IcTreeItem>
<IcTypographyslot="label">Coffee</IcTypography>
</IcTreeItem>
<IcTreeItemlabel="Tea"/>
<IcTreeItemlabel="Hot chocolate"/>
</IcTreeView>

Truncated

Interactive example

Web component

React

<ic-tree-viewheading="Menu with nested options">
<svgslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
/>
</svg>
<ic-tree-itemlabel="Coffee">
<svgslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</svg>
<ic-tree-itemlabel="Americano"></ic-tree-item>
<ic-tree-itemlabel="Latte with extra milk and sugar"></ic-tree-item>
<ic-tree-itemlabel="Espresso"></ic-tree-item>
</ic-tree-item>
<ic-tree-itemlabel="Tea">
<ic-tree-itemlabel="Earl Grey"></ic-tree-item>
<ic-tree-itemlabel="Chai"></ic-tree-item>
</ic-tree-item>
<ic-tree-itemlabel="Hot chocolate with marshmallows"></ic-tree-item>
</ic-tree-view>

<IcTreeViewheading="Menu with nested options">
<SlottedSVGslot="icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<path
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
/>
</SlottedSVG>
<IcTreeItemlabel="Coffee">
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
/>
</SlottedSVG>
<IcTreeItemlabel="Americano"/>
<IcTreeItemlabel="Latte with extra milk and sugar"/>
<IcTreeItemlabel="Espresso"/>
</IcTreeItem>
<IcTreeItemlabel="Tea">
<IcTreeItemlabel="Earl Grey"/>
<IcTreeItemlabel="Chai"/>
</IcTreeItem>
<IcTreeItemlabel="Hot chocolate with marshmallows"/>
</IcTreeView>

Link

Interactive example

Web component

React

<ic-tree-viewheading="Menu">
<ic-tree-itemlabel="Coffee"href="#"></ic-tree-item>
<ic-tree-itemlabel="Tea"selected="true"href="#"></ic-tree-item>
<ic-tree-itemlabel="Hot chocolate"disabled="true"href="#"></ic-tree-item>
</ic-tree-view>

<IcTreeViewheading="Menu">
<IcTreeItemlabel="Coffee"href="#"/>
<IcTreeItemlabel="Tea"selectedhref="#"/>
<IcTreeItemlabel="Hot chocolate"disabledhref="#"/>
</IcTreeView>

Last reviewed 23 August 2024 .