Skip to main content Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Skip to page content Show navigation section

Tree view

Guidance Code Accessibility

Component demo

Interactive example

Web component React
StackBlitz
Show full code 
<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>

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

Iftrue , 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 treeItemData

The content within the tree view tree items. This will take precedence over slotted content.

type: IcTreeItemOptions[]
[]
Property truncateHeading
Attribute truncate-heading

Iftrue , the tree view heading will be truncated instead of text wrapping. When used on small devices, this prop will be overridden and headings will be set to text-wrap.

type: boolean
false
Property truncateTreeItems
Attribute truncate-tree-items

Iftrue , tree items will be truncated, unless they are individually overridden. When used on small devices, this prop will be overridden and tree-items will be set to text-wrap.

type: boolean
false
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"
Property treeItemData

The content within the tree view tree items. This will take precedence over slotted content.

type: IcTreeItemOptions[]
Default: []
Property truncateHeading
Attribute truncate-heading

Iftrue , the tree view heading will be truncated instead of text wrapping. When used on small devices, this prop will be overridden and headings will be set to text-wrap.

type: boolean
Default: false
Property truncateTreeItems
Attribute truncate-tree-items

Iftrue , tree items will be truncated, unless they are individually overridden. When used on small devices, this prop will be overridden and tree-items will be set to text-wrap.

type: boolean
Default: false

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.

Read more about slots .


Name Description
Slot heading
Content is set as the tree view heading.
Slot icon
Content is placed to the left of the heading.
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

Iftrue , the tree item appears in the disabled state.

type: boolean
false
Property expanded
Attribute expanded

Iftrue , 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

Iftrue , 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 truncateTreeItem
Attribute truncate-tree-item

Iftrue , the tree item label will be truncated instead of text wrapping.

type: boolean
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.

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

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"
Property truncateTreeItem
Attribute truncate-tree-item

Iftrue , the tree item label will be truncated instead of text wrapping.

type: boolean

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.

Read more about slots .


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.
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
StackBlitz
Show full code 
<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>

Slotted icons

Interactive example

Web component React
StackBlitz
Show full code 
<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>

Small

Interactive example

Web component React
StackBlitz
Show full code 
<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>

Large

Interactive example

Web component React
StackBlitz
Show full code 
<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>

Theme

Interactive example

Web component React
StackBlitz
Show full code 
<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>

Disabled tree items

Interactive example

Web component React
StackBlitz
Show full code 
<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>

Slotted content

Interactive example

Menu Coffee
Web component React
StackBlitz
Show full code 
<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>

Truncated

Interactive example

Web component React
StackBlitz
Show full code 
<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>

Interactive example

Web component React
StackBlitz
Show full code 
<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>
Last reviewed 23 August 2024 .
Accessibility Statement Privacy Policy Cookies and Storage Policy Versions
Go to S.I.S. website Go to MI5 website Go to GCHQ website
Navigated to Tree view - Intelligence Community Design System