Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
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 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" | undefined
"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" | undefined
"inherit"
Property treeItemData

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

type: IcTreeItemOptions[] - { label: string; icon?: string; children?: IcTreeItemOptions[]; disabled?: boolean; expanded?: boolean; href?: string; selected?: boolean; treeItemId?: string; theme?: IcThemeMode; truncateTreeItem?: boolean; }
[]
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 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" | undefined
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" | undefined
Default: "inherit"
Property treeItemData

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

type: IcTreeItemOptions[] - { label: string; icon?: string; children?: IcTreeItemOptions[]; disabled?: boolean; expanded?: boolean; href?: string; selected?: boolean; treeItemId?: string; theme?: IcThemeMode; truncateTreeItem?: boolean; }
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
Property hreflang
Attribute hreflang

The human language of the linked URL.

type: string - string | undefined
""
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" | undefined
Property rel
Attribute rel

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

type: string - string | undefined
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 - string | undefined
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" | undefined
"inherit"
Property treeItemId
Attribute tree-item-id

Sets the tree item id. Must be unique.

type: string - string | undefined
Property truncateTreeItem
Attribute truncate-tree-item

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

type: boolean - boolean | undefined
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
Property hreflang
Attribute hreflang

The human language of the linked URL.

type: string - string | undefined
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" | undefined
Property rel
Attribute rel

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

type: string - string | undefined
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 - string | undefined
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" | undefined
Default: "inherit"
Property treeItemId
Attribute tree-item-id

Sets the tree item id. Must be unique.

type: string - string | undefined
Property truncateTreeItem
Attribute truncate-tree-item

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

type: boolean - boolean | undefined

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 icTreeItemExpanded
React onIcTreeItemExpanded
Emitted when tree item is expanded.
{ isExpanded: boolean; id: string; }
Web component icTreeItemSelected
React onIcTreeItemSelected
Emitted when tree item is selected.
{ id: string; }
Web component icTreeItemExpanded
React onIcTreeItemExpanded
Emitted when tree item is expanded.
{ isExpanded: boolean; 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

Small and large styling will be passed down from the tree view to tree items and nested tree items.

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

Individual tree-items can be disabled using thedisabled prop.

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

Custom content can be passed to both the tree view (using theheading slot) and tree-items (using thelabel slot).

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

When the heading exceeds the width of the container, the text will wrap unlesstruncateTreeItem ortruncateHeading are set totrue .

Interactive example

Web component React
StackBlitz
Show full code 
<ic-tree-viewheading="Menu with nested options"truncate-heading="true">
<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"truncate-tree-item="true"></ic-tree-item>
</ic-tree-view>

When setting thehref attribute, the tree-item will function as a link.

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>

With React Router

Interactive example

React
StackBlitz
Show full code 
<divstyle={{ display:"flex", flexDirection:"row", gap:"16px"}}>
<divstyle={{ width:"250px"}}>
<IcTreeViewheading="Menu">
<IcTreeItemselected={isSelected("/")}>
<NavLinkslot="router-item"to="/">
            Home
</NavLink>
</IcTreeItem>
<IcTreeItemselected={isSelected("/coffee")}>
<NavLinkslot="router-item"to="/coffee">
            Coffee
</NavLink>
</IcTreeItem>
<IcTreeItemselected={isSelected("/tea")}>
<NavLinkslot="router-item"to="/tea">
            Tea
</NavLink>
</IcTreeItem>
</IcTreeView>
</div>
<divstyle={{ marginTop:"16px"}}>
<Routes>
<Routepath="/"element={<IcTypography>Home Page</IcTypography>}/>
<Routepath="/coffee"element={<IcTypography>Coffee Page</IcTypography>}/>
<Routepath="/tea"element={<IcTypography>Tea Page</IcTypography>}/>
</Routes>
</div>
</div>
Last reviewed 22 July 2025 .
Accessibility Statement Privacy Policy Cookies and Storage Policy Versions
Go to S.I.S. website Go to MI5 website Go to GCHQ website Go to HMGCC website
Navigated to Tree view - Intelligence Community Design System