Tree

Overview

Trees help users navigate complex structures by organizing content into parent and child relationships. They're commonly used for navigation menus, file browsers, and category lists. For flat lists without nested content, use the Navigation List instead.

<ul daff-tree [tree]="tree">
  <ng-template #daffTreeItemWithChildrenTpl let-node>
    <button daffTreeItem [node]="node">{{ node.title }}</button>
  </ng-template>

  <ng-template #daffTreeItemTpl let-node>
    <a daffTreeItem [node]="node" [routerLink]="node.url">{{ node.title }}</a>
  </ng-template>
</ul>

Usage

Import DAFF_TREE_COMPONENTS into your component:

import { DAFF_TREE_COMPONENTS } from '@daffodil/design/tree';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_TREE_COMPONENTS,
  ],
})
export class CustomComponent {}

Deprecation notice:

DaffTreeModule is deprecated. Use the standalone component imports instead.

Anatomy

A tree is composed of a container, node templates, and tree items:

<daff-tree [tree]="treeData">
  <ng-template #daffTreeItemWithChildrenTpl let-node>
    <button daffTreeItem [node]="node">{{ node.title }}</button>
  </ng-template>

  <ng-template #daffTreeItemTpl let-node>
    <a daffTreeItem [node]="node" [routerLink]="node.url">{{ node.title }}</a>
  </ng-template>
</daff-tree>

• <daff-tree>: The main wrapper that holds the tree and accepts your data.
• #daffTreeItemWithChildrenTpl: The template for items that can expand to show children. Click handling and icons are added automatically.
• #daffTreeItemTpl: The template for items at the end of a branch with no children.
• [daffTreeItem]: Added to links or buttons inside your templates to connect them to the tree.

Accessibility

The tree follows the disclosure navigation menu pattern rather than the tree view pattern.

Built-in behavior

• Unique id automatically assigned to each tree item
• aria-expanded indicating whether a parent item is open or closed

Developer responsibilities

• Use links (<a>) for navigation and buttons (<button>) for expanding sections
• Write clear, descriptive text for each tree item