- 1.4.1

Tree

Renders a hierarchical list as a tree.

Read more Read less

A good use case for this component is a folder structure. For navigation and other menus, a regular nested list should be preferred.

Usage

<.tree label="Dogs">
  <tree_item>
    Breeds
    <:items>
      <.tree_item>Golden Retriever</.tree_item>
      <.tree_item>Labrador Retriever</.tree_item>
    </:items>
  </.tree_item>
  <.tree_item>
    Characteristics
    <:items>
      <.tree_item>Playful</.tree_item>
      <.tree_item>Loyal</.tree_item>
    </:items>
  </.tree_item>
</.tree>

CSS

You can target the wrapper with an attribute selector for the role:

[role="tree"] {}

This component needs the Doggo.Tree JavaScript hook. See Phoenix LiveView Hooks for registering it.

Keyboard

  • Down and Up - move between the visible items. A collapsed branch takes its children out of the sequence.
  • Right - expand the focused branch, or move to its first child if it is already expanded.
  • Left - collapse the focused branch, or move to its parent if it is already collapsed or is a leaf.
  • Home and End - first and last visible item.
  • Printable characters - move to the next visible item whose label starts with what you type.

The tree is a single tab stop. Expanding and collapsing is the hook's own state, and it survives a LiveView patch. Selecting an item is not: the component renders aria-selected from the selected attribute of tree_item, so wire your own click or key handler and re-render.

  • Breeds
    • Sporting
      • Retrievers
        • Golden Retriever
        • Labrador Retriever
      • Irish Setter
  • Characteristics
    • Playful
    • Loyal
Attribute Type Documentation Default Value
class :any

Any additional classes to be added.

 Read more Read less
[]

Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component.

The value can be a string or a list of strings.
Required id * :string

A unique DOM ID. Needed for the JavaScript hook.
label :string

A accessibility label for the tree. Set as aria-label attribute.

 Read more Read less

You should ensure that either the label or the labelledby attribute is set.

Do not repeat the word tree in the label. Screen readers announce the role along with the name. Using the role in the label would make screen readers repeat it.
labelledby :string

The DOM ID of an element that labels this tree.

 Read more Read less

Example:

Dogs

<.tree labelledby="dog-tree-label">

You should ensure that either the label or the labelledby attribute is set.
rest :global

Any additional HTML attributes.
Required inner_block * :slot

Slot for the root nodes of the tree. Use the tree_item/1 component as direct children.