> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-layout/hierarchy.md).

# Hierarchy ✅

Transforms elements and collection list content into hierarchical form.

### Overview

The **Hierarchy** component transforms a list of items or collection list content into a hierarchy. 

* It's designed for up to 5 levels of hierarchy, each of which;
  * Can be based on a completely different "level" template that you customize 
  * Can be always-expanded, collapsable, or collapsed 
* Source content is simple to manage, a collection with a single ref to itself is adequate- each item identifies its parent. 

Uses; 

* This is ideal for hierarchical navigations. 

Notes;

* Avoid circular references, like B's parent is A, and A's parent is B.  The component will seek to handle that situation but since it presents an undefined data structure, there's no way to handle it "gracefully."  

{% embed url="<https://www.loom.com/share/38acf6fcdcf74e90acb0dd2e35d3b359>" %}

## Examples

{% embed url="<https://webflow-core-component-test.webflow.io/hierarchies>" %}

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FNgkv5McOJoW3HqndCeCU%2Fimage.png?alt=media&amp;token=a1bf4170-0196-4a51-8652-8a0067ce3f0f" alt=""><figcaption></figcaption></figure>

## Component Properties

**To be documented. Use the video as reference for now.** &#x20;

## Variables

Use these for styling;&#x20;

cc-hierarchy-1-border-radius
\
cc-hierarchy-1-border-width
\
cc-hierarchy-1-border-color
\
cc-hierarchy-1-bg-color
\
cc-hierarchy-1-color
\
cc-hierarchy-1-font-family
\
cc-hierarchy-1-font-size
\
cc-hierarchy-1-font-weight
\
cc-hierarchy-1-line-height
\
cc-hierarchy-1-padding-left
\
cc-hierarchy-1-padding-top
\
cc-hierarchy-1-padding-right
\
cc-hierarchy-1-padding-bottom
\
cc-hierarchy-1-icon-color
\
cc-hierarchy-1-icon-size
\
cc-hierarchy-gap