<anura-tree adapter="some-adapter" root="1337" icon="tag" aria-live="polite"></anura-tree>

Basic navigation tree, featuring automatic (based on selection) and manual folding of sub-trees.

Screenshot of <anura-tree>



required: yes, live: yes, default: -

The root node of your navigation (ID or String).


required: no, live: write-only, default: -

Which node in the tree should be selected initially. Subsequent selections by the user are reflected in this attribute, but are write-only after the initial load. Note that the state parameter node will override the initial selection.


required: no, live: yes, default: folder

The icon that each node in the tree should display (see anura-icon)


required: no, live: no, default: -

To what depth the tree should load subnodes.


required: no, live: no, default: -

Whether to allow a user to deselect a previously selected node. Otherwise the user can only change the selection.


required: no, live: no, default: -

Whether to show a count of how many items are in this node (provided your adapter supports this)


required: no, live: no, default: true

Whether to update the URL to persist the currently selected node (for sharing the link)



regular change event


{detail: {id:, name:}}

Fired whenever the user has clicked on a node, regardless whether a selection or a deselection has occurred.


{detail: {id:, name:}}

Fired whenever the user has selected a node. This will also update the selected attribute of the component.


{detail: {id:, name:}}

Fired whenever the user has deselected a node. This will also remove selected attribute from the component.


  • header - the header slot will appear before the title and tree content.

  • title - appears before the tree content. When show-root is disabled, this slot will automatically be set to the root nodes name, unless you overwrite this slot yourself.
    <anura-tree adapter="some-adapter" root="1337" icon="tag" aria-live="polite">
    <h3 slot="title">My custom title</h3>
  • footer - he footer slot will appear at the very end, after the tree content.


<ul part="tree-root">
    <li part="node-li">
        <a part="node-link">
            <anura-icon part="node-icon"></anura-icon>
            <span part="node-name">Wheel</span>
            <span part="node-counter">42</span>
        <ul part="node-ul"><!-- snip, repeats inside --></ul>
    <li><!-- snip, etc. --></li>

E.g. color all the icons in the tree:

anura-tree::part(node-icon) { color: green; }