Carbon Design System

Tree view

Stable
Feature flag
Last updated Sep 30, 2026
Carbon Core

    A tree view presents content in a hierarchical structure with nested levels, helping users navigate and explore related information.

    Tree view

    Color

    * Denotes a contextual color token that will change values based on the layer it is placed on.

    Example of closed and open tree view states

    Interactive states

    * Denotes a contextual color token that will change values based on the layer it is placed on.

    Tree view interactive states

    Typography

    Structure

    The internal structure of each node varies depending on the node type and level. The labels of nodes on the same level should always vertically align. Do not mix text-only and icon nodes together as this will misalign labels.

    Tree view (text only)

    Structure and spacing measurements for text only tree view

    Tree view (with icons)

    Structure and spacing measurements for tree view with icons

    Feedback

    Help us improve by providing feedback, asking questions, requesting features, or leaving any other comments on GitHub.

    Tree view | Carbon Design System