Live demo — this example is server-driven; run the showcase locally for the interactive version.
Tree view
A tree view is a structure that displays data in a hierarchical view.
Expand all
Settings
Loading App 1
Loading App 2
Loading App 3
Really really really long folder name that overflows the container it is in
A tree can be set up to allow multiple nodes to be selected. To turn on multiple selection, set
aria-multiselectable="true" on the root
ul[role="tree"] element.
Settings
Loader app 2
Loader app 3
This is a really really really long folder name that overflows from the width of the container.
With separate selection and expansion
The node renders its toggle button and text button separately so a parent node can be selected (or deselected) without
toggling its expansion. The wrapper becomes a
div.pf-v6-c-tree-view__node containing two child buttons —
one for toggle, one for the label.
Settings
Loader app 2
Loader app 3
This is a really really really long folder name that overflows from the width of the container.
A search input can be used to filter tree view items. It is recommended that a tree view with more than 7 nodes
includes a search input.
Loader app 2
Loader app 3
This is a really really really long folder name that overflows from the width of the container.
This is a really really really long folder name that overflows from the width of the container.
With unique icon per
item
Loader app 2
Loader app 3
This is a really really really long folder name that overflows from the width of the container.
2
Application launcher
2 applications
Loader app 2
Loader app 3
Cost management
3 settings
This is a really really really long folder name that overflows from the width of the container.
2 nested
Loader app 2
Loader app 3
This is a really really really long folder name that overflows from the width of the container.
Settings
Loader app 2
Loader app 3
This is a really really really long folder name that overflows from the width of the container.
apiVersion
APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.
kind
Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:
metadata
Standard object metadata
spec
Specification of the desired behavior of deployment.
minReadySeconds
Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).
paused
Indicates that the deployment is paused
progressDeadlineSeconds
The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.
replicas
Number of desired pods. This is a pointer to distinguish between explicit zero and not specified. Defaults to 1.
revisionHistoryLimit
The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.
Selector
Label selector for pods. Existing ReplicaSets whose pods are selected by this will be the ones affected by this deployment
matchExpressions
matchExpressions is a list of the label selector requirements. The requirements and ANDed.
matchLabels
Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.
matchLabels
Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.
apiVersion
APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.
kind
Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:
metadata
Standard object metadata
spec
Specification of the desired behavior of deployment.
minReadySeconds
Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).
paused
Indicates that the deployment is paused
progressDeadlineSeconds
The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.
replicas
Number of desired pods. This is a pointer to distinguish between explicit zero and not specified. Defaults to 1.
revisionHistoryLimit
The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.
Selector
Label selector for pods. Existing ReplicaSets whose pods are selected by this will be the ones affected by this deployment
matchExpressions
matchExpressions is a list of the label selector requirements. The requirements and ANDed.
matchLabels
Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.
matchLabels
Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.
With non-expandable top level nodes
