The Lightning Design System includes a Tree component. Each node in the tree can have a chevron svg icon indicating if it is expanded or collapsed.

Expanded and collapsed nodes

Regardless of the node state it always appears to use the /assets/icons/utility-sprite/svg/symbols.svg#chevronright icon.

How is the lightning design system animating the SVG chevron's on tree nodes?

In the example if I change the aria-expanded attribute in the DOM on the corresponding li it rotates into a down arrow. Change it back to false and it rotates back.

The only active scripting I can see on the page is something about Raven config. It isn't clear to me if or how this is animating the svg icon. It may or may not be relavant.

I'm using the SLDS 2.1.3 in a Visualforce page and I'm not getting the same animation or rotation occuring.

Using something like the following to toggle the li attribute.

document.getElementById('tree0-node1').setAttribute('aria-expanded', false);

Found it in the GitHub source. It is animated and rotated via the CSS.

  [aria-expanded="false"] > .#{$css-prefix}tree__item > .#{$css-prefix}button[aria-controls] > .#{$css-prefix}button__icon,
  [aria-expanded="false"] > .#{$css-prefix}tree__item > .#{$css-prefix}button[aria-controls] > span > .#{$css-prefix}button__icon {
    transition: $duration-promptly transform ease-in-out;
    transform: rotate(0deg);

  [aria-expanded="true"] > .#{$css-prefix}tree__item > .#{$css-prefix}button[aria-controls] > .#{$css-prefix}button__icon,
  [aria-expanded="true"] > .#{$css-prefix}tree__item > .#{$css-prefix}button[aria-controls] > span > .#{$css-prefix}button__icon {
    transition: $duration-promptly transform ease-in-out;
    transform: rotate(90deg);

When it actually comes out in my Visualforce page the CSS is:

  .myscopingclass .slds-tree [aria-expanded="false"] > .slds-tree__item > .slds-button[aria-controls] > .slds-button__icon,
  .myscopingclass .slds-tree [aria-expanded="false"] > .slds-tree__item > .slds-button[aria-controls] > span > .slds-button__icon {
    transition: 0.2s transform ease-in-out;
    transform: rotate(0deg); }
  .myscopingclass .slds-tree [aria-expanded="true"] > .slds-tree__item > .slds-button[aria-controls] > .slds-button__icon,
  .myscopingclass .slds-tree [aria-expanded="true"] > .slds-tree__item > .slds-button[aria-controls] > span > .slds-button__icon {
    transition: 0.2s transform ease-in-out;
    transform: rotate(90deg); }

The problem with my Visualforce page was a missing aria-controls attribute on the button that the CSS selector required.

Doh! To be fair to the SLDS, the requirement for this is right there in the documentation:

In our example, we are using a chevron icon on tree branches to help indicate to the user what action clicking the tree branch will perform, whether opening or closing it. The effect of rotating the icon 90° to indicate open/closed status is achieved by applying the ARIA attribute aria-controls to the button the icon is contained within. The value of the aria-controls attribute should be the ID of the group that clicking the button will affect.

  • do i need any javascript to achieve interactions like collapse and expand? Feb 7 '17 at 8:51
  • @BalayesuChilakalapudi Yes, I used JavaScript to toggle the aria-expanded attribute between true and false when the node was clicked. Feb 7 '17 at 18:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.