Tree nav

Default tree nav
HTML

<nav class="orc-c-tree-nav" role="navigation">

  <ul class="orc-c-tree-nav__list">

    <li class="orc-c-tree-nav__item ">
      <a href="#" href="#" class="orc-c-tree-nav__link ">
				<span class="orc-c-tree-nav__link-text">Getting Started</span>



			</a>
      <!--end orc-c-tree-nav__link-->


    </li>
    <!-- end orc-c-tree-nav__list__item -->
    <li class="orc-c-tree-nav__item ">
      <a href="#" href="#" class="orc-c-tree-nav__link orc-js-tree-nav-dropdown-trigger">
				<span class="orc-c-tree-nav__link-text">Guidelines</span>


                <svg class="orc-c-icon orc-c-tree-nav__icon">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
                </svg>

			</a>
      <!--end orc-c-tree-nav__link-->

      <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown">

        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Overview</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Design Principles</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Code conventions</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Accessibility</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Data display</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Data entry</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Data validation</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Input modes</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Navigation</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Notifications</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Writing</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Browser support</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->

      </ul>
      <!-- end orc-c-tree-nav__sublist -->

    </li>
    <!-- end orc-c-tree-nav__list__item -->
    <li class="orc-c-tree-nav__item ">
      <a href="#" href="#" class="orc-c-tree-nav__link orc-js-tree-nav-dropdown-trigger">
				<span class="orc-c-tree-nav__link-text">Styles</span>


                <svg class="orc-c-icon orc-c-tree-nav__icon">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
                </svg>

			</a>
      <!--end orc-c-tree-nav__link-->

      <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown">

        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Overview</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Design tokens</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Color</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Typography</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Iconography</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Imagery</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Motion</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink ">
                            <span class="orc-c-tree-nav__sublink-text">Voice and tone</span>
                        </a>


        </li>
        <!-- end orc-c-tree-nav__sublist__item -->

      </ul>
      <!-- end orc-c-tree-nav__sublist -->

    </li>
    <!-- end orc-c-tree-nav__list__item -->
    <li class="orc-c-tree-nav__item ">
      <a href="#" href="#" class="orc-c-tree-nav__link orc-js-tree-nav-dropdown-trigger">
				<span class="orc-c-tree-nav__link-text">Components</span>


                <svg class="orc-c-icon orc-c-tree-nav__icon">
                    <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
                </svg>

			</a>
      <!--end orc-c-tree-nav__link-->

      <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown">

        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">
                            <span class="orc-c-tree-nav__sublink-text">Blocks and cards</span>
                            <svg class="orc-c-icon orc-c-tree-nav__icon">
                                <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
                            </svg>
                        </a>

          <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown">

            <li class="orc-c-tree-nav__subitem">

              <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a>

            </li>
            <!-- end orc-c-tree-nav__sublist__item -->

          </ul>
          <!-- end orc-c-tree-nav__sublist -->

        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">
                            <span class="orc-c-tree-nav__sublink-text">Buttons</span>
                            <svg class="orc-c-icon orc-c-tree-nav__icon">
                                <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
                            </svg>
                        </a>

          <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown">

            <li class="orc-c-tree-nav__subitem">

              <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a>

            </li>
            <!-- end orc-c-tree-nav__sublist__item -->

          </ul>
          <!-- end orc-c-tree-nav__sublist -->

        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">
                            <span class="orc-c-tree-nav__sublink-text">Charts and graphs</span>
                            <svg class="orc-c-icon orc-c-tree-nav__icon">
                                <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
                            </svg>
                        </a>

          <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown">

            <li class="orc-c-tree-nav__subitem">

              <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a>

            </li>
            <!-- end orc-c-tree-nav__sublist__item -->

          </ul>
          <!-- end orc-c-tree-nav__sublist -->

        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">
                            <span class="orc-c-tree-nav__sublink-text">Form controls</span>
                            <svg class="orc-c-icon orc-c-tree-nav__icon">
                                <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
                            </svg>
                        </a>

          <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown">

            <li class="orc-c-tree-nav__subitem">

              <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a>

            </li>
            <!-- end orc-c-tree-nav__sublist__item -->

          </ul>
          <!-- end orc-c-tree-nav__sublist -->

        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">
                            <span class="orc-c-tree-nav__sublink-text">Headers and footers</span>
                            <svg class="orc-c-icon orc-c-tree-nav__icon">
                                <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
                            </svg>
                        </a>

          <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown">

            <li class="orc-c-tree-nav__subitem">

              <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a>

            </li>
            <!-- end orc-c-tree-nav__sublist__item -->

          </ul>
          <!-- end orc-c-tree-nav__sublist -->

        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">
                            <span class="orc-c-tree-nav__sublink-text">Imagery</span>
                            <svg class="orc-c-icon orc-c-tree-nav__icon">
                                <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
                            </svg>
                        </a>

          <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown">

            <li class="orc-c-tree-nav__subitem">

              <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a>

            </li>
            <!-- end orc-c-tree-nav__sublist__item -->

          </ul>
          <!-- end orc-c-tree-nav__sublist -->

        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">
                            <span class="orc-c-tree-nav__sublink-text">Icons</span>
                            <svg class="orc-c-icon orc-c-tree-nav__icon">
                                <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
                            </svg>
                        </a>

          <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown">

            <li class="orc-c-tree-nav__subitem">

              <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a>

            </li>
            <!-- end orc-c-tree-nav__sublist__item -->

          </ul>
          <!-- end orc-c-tree-nav__sublist -->

        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">
                            <span class="orc-c-tree-nav__sublink-text">Interactive panels</span>
                            <svg class="orc-c-icon orc-c-tree-nav__icon">
                                <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
                            </svg>
                        </a>

          <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown">

            <li class="orc-c-tree-nav__subitem">

              <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a>

            </li>
            <!-- end orc-c-tree-nav__sublist__item -->

          </ul>
          <!-- end orc-c-tree-nav__sublist -->

        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">
                            <span class="orc-c-tree-nav__sublink-text">Lists and collections</span>
                            <svg class="orc-c-icon orc-c-tree-nav__icon">
                                <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
                            </svg>
                        </a>

          <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown">

            <li class="orc-c-tree-nav__subitem">

              <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a>

            </li>
            <!-- end orc-c-tree-nav__sublist__item -->

          </ul>
          <!-- end orc-c-tree-nav__sublist -->

        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">
                            <span class="orc-c-tree-nav__sublink-text">Media</span>
                            <svg class="orc-c-icon orc-c-tree-nav__icon">
                                <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
                            </svg>
                        </a>

          <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown">

            <li class="orc-c-tree-nav__subitem">

              <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a>

            </li>
            <!-- end orc-c-tree-nav__sublist__item -->

          </ul>
          <!-- end orc-c-tree-nav__sublist -->

        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">
                            <span class="orc-c-tree-nav__sublink-text">Messaging</span>
                            <svg class="orc-c-icon orc-c-tree-nav__icon">
                                <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
                            </svg>
                        </a>

          <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown">

            <li class="orc-c-tree-nav__subitem">

              <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a>

            </li>
            <!-- end orc-c-tree-nav__sublist__item -->

          </ul>
          <!-- end orc-c-tree-nav__sublist -->

        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">
                            <span class="orc-c-tree-nav__sublink-text">Navigation</span>
                            <svg class="orc-c-icon orc-c-tree-nav__icon">
                                <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
                            </svg>
                        </a>

          <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown">

            <li class="orc-c-tree-nav__subitem">

              <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a>

            </li>
            <!-- end orc-c-tree-nav__sublist__item -->

          </ul>
          <!-- end orc-c-tree-nav__sublist -->

        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">
                            <span class="orc-c-tree-nav__sublink-text">Tables</span>
                            <svg class="orc-c-icon orc-c-tree-nav__icon">
                                <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
                            </svg>
                        </a>

          <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown">

            <li class="orc-c-tree-nav__subitem">

              <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a>

            </li>
            <!-- end orc-c-tree-nav__sublist__item -->

          </ul>
          <!-- end orc-c-tree-nav__sublist -->

        </li>
        <!-- end orc-c-tree-nav__sublist__item -->
        <li class="orc-c-tree-nav__subitem">

          <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">
                            <span class="orc-c-tree-nav__sublink-text">Text</span>
                            <svg class="orc-c-icon orc-c-tree-nav__icon">
                                <use xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
                            </svg>
                        </a>

          <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown">

            <li class="orc-c-tree-nav__subitem">

              <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a>

            </li>
            <!-- end orc-c-tree-nav__sublist__item -->

          </ul>
          <!-- end orc-c-tree-nav__sublist -->

        </li>
        <!-- end orc-c-tree-nav__sublist__item -->

      </ul>
      <!-- end orc-c-tree-nav__sublist -->

    </li>
    <!-- end orc-c-tree-nav__list__item -->
    <li class="orc-c-tree-nav__item ">
      <a href="#" href="#" class="orc-c-tree-nav__link ">
				<span class="orc-c-tree-nav__link-text">Utilities</span>



			</a>
      <!--end orc-c-tree-nav__link-->


    </li>
    <!-- end orc-c-tree-nav__list__item -->
    <li class="orc-c-tree-nav__item ">
      <a href="#" href="#" class="orc-c-tree-nav__link ">
				<span class="orc-c-tree-nav__link-text">Page templates</span>



			</a>
      <!--end orc-c-tree-nav__link-->


    </li>
    <!-- end orc-c-tree-nav__list__item -->
    <li class="orc-c-tree-nav__item ">
      <a href="#" href="#" class="orc-c-tree-nav__link ">
				<span class="orc-c-tree-nav__link-text">Downloads</span>



			</a>
      <!--end orc-c-tree-nav__link-->


    </li>
    <!-- end orc-c-tree-nav__list__item -->
    <li class="orc-c-tree-nav__item ">
      <a href="#" href="#" class="orc-c-tree-nav__link ">
				<span class="orc-c-tree-nav__link-text">Support</span>



			</a>
      <!--end orc-c-tree-nav__link-->


    </li>
    <!-- end orc-c-tree-nav__list__item -->
    <li class="orc-c-tree-nav__item ">
      <a href="#" href="#" class="orc-c-tree-nav__link ">
				<span class="orc-c-tree-nav__link-text">Contribute</span>



			</a>
      <!--end orc-c-tree-nav__link-->


    </li>
    <!-- end orc-c-tree-nav__list__item -->

  </ul>
  <!-- end orc-c-tree-nav__list -->

</nav>
<!-- end orc-c-tree-nav -->
When to use

Use a tree nav to nest child sections or pages within the primary nav. For instance, The Chelsea under Entertainment.
When to consider an alternative

Be stingy with the number of items you nest in a tree nav. The more clicks, the less likely a user is to find content, and a clean, highly prioritized set of items in the nav just looks better.
Class Name	Description
`orc-c-tree-nav` Required	Apply to the tree nav’s containing `nav` tag. This will establish the section where the tree nav list and items within will live.
`orc-c-tree-nav__list` Required	Apply to the `ul` tag within the tree nav. This will help layout the tree nav items.
`orc-c-tree-nav__item` Required	Apply to each `li` within the first level of the `orc-c-tree-nav__list`.
`orc-c-tree-nav__link` Required
`orc-js-tree-nav-dropdown-trigger` JS	Apply to `a` tag if linking out or a `button` tag if only functionality is being applied.
`orc-c-tree-nav__link-text` Required	Apply to `span` within the tree nav link to represent the actual text of the link.
`orc-c-icon`	Base icon class used for icons within the design system.
`orc-c-tree-nav__icon`	Apply in addition to `orc-c-icon` to style the icon specifically for the tree nav.
`orc-c-tree-nav__sublist`	Apply to nested `ul` within `orc-c-tree-nav__list` to add subnavigation to each `orc-c-tree-nav__item`.
`orc-js-tree-nav-dropdown` JS	Apply in addition to `orc-c-tree-nav__sublist` to allow JS to expand/collapse this when `orc-js-tree-nav-dropdown-trigger` is selected/deselected.
`orc-c-tree-nav__subitem`	Apply to each `li` tag within the `orc-c-tree-nav__sublist` to format these subnavigation items.
`orc-c-tree-nav__sublink`	Apply to the `a` tag within each `orc-c-tree-nav__subitem` to link elsewhere on the site.
Default tree nav `orc-c-tree-nav`

Usage

When to use

When to consider an alternative
