Lineone - Treeview Component

Treeview

Components
Treeview

Basic Treeview

Code

A tree view component presents a hierarchical list. Check out code for detail of usage.

Application
- Chrome
- VS Code
- Mail App
- Firefox
Document
- React App
  - src
    - Components
      - Button.js
      - Treeview.js
      - Menu.js
      - Avatar.js

                
  <ul class="space-y-1 font-inter font-medium">
    <li x-data="{expanded:false}">
      <div
        tabindex="0"
        :class="expanded && 'text-slate-800 dark:text-navy-100'"
        class="flex cursor-pointer items-center space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
      >
        <button
          @click="expanded = !expanded"
          class="btn size-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-4.5 transition-transform"
            :class="expanded && 'rotate-90'"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </button>
        <span>Application</span>
      </div>
      <ul x-show="expanded" x-collapse class="pl-4">
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="flex size-5 items-center justify-center"></div>
            <span>Chrome</span>
          </div>
        </li>
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="flex size-5 items-center justify-center"></div>
            <span>VS Code</span>
          </div>
        </li>
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="flex size-5 items-center justify-center"></div>
            <span>Mail App</span>
          </div>
        </li>
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="flex size-5 items-center justify-center"></div>
            <span>Firefox</span>
          </div>
        </li>
      </ul>
    </li>
    <li x-data="{expanded:true}">
      <div
        tabindex="0"
        :class="expanded && 'text-slate-800 dark:text-navy-100'"
        class="flex cursor-pointer items-center space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
      >
        <button
          @click="expanded = !expanded"
          class="btn size-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-4.5 transition-transform"
            :class="expanded && 'rotate-90'"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </button>
        <span>Document</span>
      </div>
      <ul x-show="expanded" x-collapse class="pl-4">
        <li x-data="{expanded:true}">
          <div
            tabindex="0"
            :class="expanded && 'text-slate-800 dark:text-navy-100'"
            class="flex cursor-pointer items-center space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <button
              @click="expanded = !expanded"
              class="btn size-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-4.5 transition-transform"
                :class="expanded && 'rotate-90'"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  fill-rule="evenodd"
                  d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                  clip-rule="evenodd"
                ></path>
              </svg>
            </button>
            <span>React App</span>
          </div>
          <ul x-show="expanded" x-collapse class="pl-4">
            <li x-data="{expanded:true}">
              <div
                tabindex="0"
                :class="expanded && 'text-slate-800 dark:text-navy-100'"
                class="flex cursor-pointer items-center space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >
                <button
                  @click="expanded = !expanded"
                  class="btn size-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="size-4.5 transition-transform"
                    :class="expanded && 'rotate-90'"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                      clip-rule="evenodd"
                    ></path>
                  </svg>
                </button>
                <span>src</span>
              </div>
              <ul x-show="expanded" x-collapse class="pl-4">
                <li x-data="{expanded:true}">
                  <div
                    tabindex="0"
                    :class="expanded && 'text-slate-800 dark:text-navy-100'"
                    class="flex cursor-pointer items-center space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
                  >
                    <button
                      @click="expanded = !expanded"
                      class="btn size-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="size-4.5 transition-transform"
                        :class="expanded && 'rotate-90'"
                        viewBox="0 0 20 20"
                        fill="currentColor"
                      >
                        <path
                          fill-rule="evenodd"
                          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                          clip-rule="evenodd"
                        ></path>
                      </svg>
                    </button>
                    <span>Components</span>
                  </div>
                  <ul x-show="expanded" x-collapse class="pl-4">
                    <li>
                      <div
                        tabindex="0"
                        class="flex cursor-pointer items-center space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
                      >
                        <div
                          class="flex size-5 items-center justify-center"
                        ></div>
                        <span>Button.js</span>
                      </div>
                    </li>
                    <li>
                      <div
                        tabindex="0"
                        class="flex cursor-pointer items-center space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
                      >
                        <div
                          class="flex size-5 items-center justify-center"
                        ></div>
                        <span>Treeview.js</span>
                      </div>
                    </li>
                    <li>
                      <div
                        tabindex="0"
                        class="flex cursor-pointer items-center space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
                      >
                        <div
                          class="flex size-5 items-center justify-center"
                        ></div>
                        <span>Menu.js</span>
                      </div>
                    </li>
                    <li>
                      <div
                        tabindex="0"
                        class="flex cursor-pointer items-center space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
                      >
                        <div
                          class="flex size-5 items-center justify-center"
                        ></div>
                        <span>Avatar.js</span>
                      </div>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

Advanced Treeview

Code

A tree view component presents a hierarchical list. Check out code for detail of usage.

Design
- Web Apps
- CRM Apps
  - LMS App
  - Ecommerce
  - Dashboard
- Desktop Apps
- Mobile Apps
Backup Files
Documents
- Sheets
- Slides
- Words
Application
- Web Apps
- CRM Apps
  - LMS App
  - Ecommerce
  - Dashboard
- Desktop Apps
- Mobile Apps
Archives

                
  <ul class="space-y-1 font-inter font-medium">
    <li x-data="{expanded:false}">
      <div
        tabindex="0"
        class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
      >
        <button
          @click="expanded = !expanded"
          class="btn mr-1 size-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-4.5 transition-transform"
            :class="expanded && 'rotate-90'"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </button>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="mr-3 size-6 text-warning"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
          ></path>
        </svg>
        <span>Design</span>
      </div>
      <ul x-show="expanded" x-collapse class="pl-4">
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="mr-1 flex size-5 items-center justify-center"></div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="mr-3 size-6 text-warning"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
              ></path>
            </svg>
            <span>Web Apps</span>
          </div>
        </li>
        <li x-data="{expanded:false}">
          <div
            tabindex="0"
            class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <button
              @click="expanded = !expanded"
              class="btn mr-1 size-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-4.5 transition-transform"
                :class="expanded && 'rotate-90'"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  fill-rule="evenodd"
                  d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                  clip-rule="evenodd"
                ></path>
              </svg>
            </button>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="mr-3 size-6 text-warning"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
              ></path>
            </svg>
            <span>CRM Apps</span>
          </div>
          <ul x-show="expanded" x-collapse class="pl-4">
            <li>
              <div
                tabindex="0"
                class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >
                <div
                  class="mr-1 flex size-5 items-center justify-center"
                ></div>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="mr-3 size-6 text-warning"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
                  ></path>
                </svg>
                <span>LMS App</span>
              </div>
            </li>
            <li>
              <div
                tabindex="0"
                class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >
                <div
                  class="mr-1 flex size-5 items-center justify-center"
                ></div>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="mr-3 size-6 text-warning"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
                  ></path>
                </svg>
                <span>Ecommerce</span>
              </div>
            </li>
            <li>
              <div
                tabindex="0"
                class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >
                <div
                  class="mr-1 flex size-5 items-center justify-center"
                ></div>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="mr-3 size-6 text-warning"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
                  ></path>
                </svg>
                <span>Dashboard</span>
              </div>
            </li>
          </ul>
        </li>
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="mr-1 flex size-5 items-center justify-center"></div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="mr-3 size-6 text-warning"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
              ></path>
            </svg>
            <span>Desktop Apps</span>
          </div>
        </li>
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="mr-1 flex size-5 items-center justify-center"></div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="mr-3 size-6 text-warning"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
              ></path>
            </svg>
            <span>Mobile Apps</span>
          </div>
        </li>
      </ul>
    </li>
    <li>
      <div
        tabindex="0"
        class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
      >
        <div class="mr-1 flex size-5 items-center justify-center"></div>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="mr-3 size-6 text-warning"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
          ></path>
        </svg>
        <span>Backup Files</span>
      </div>
    </li>
    <li x-data="{expanded:false}">
      <div
        tabindex="0"
        class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
      >
        <button
          @click="expanded = !expanded"
          class="btn mr-1 size-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-4.5 transition-transform"
            :class="expanded && 'rotate-90'"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </button>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="mr-3 size-6 text-warning"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
          ></path>
        </svg>
        <span>Documents</span>
      </div>
      <ul x-show="expanded" x-collapse class="pl-4">
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="mr-1 flex size-5 items-center justify-center"></div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="mr-3 size-6 text-warning"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
              ></path>
            </svg>
            <span>Sheets</span>
          </div>
        </li>
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="mr-1 flex size-5 items-center justify-center"></div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="mr-3 size-6 text-warning"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
              ></path>
            </svg>
            <span>Slides</span>
          </div>
        </li>
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="mr-1 flex size-5 items-center justify-center"></div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="mr-3 size-6 text-warning"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
              ></path>
            </svg>
            <span>Words</span>
          </div>
        </li>
      </ul>
    </li>
    <li x-data="{expanded:false}">
      <div
        tabindex="0"
        class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
      >
        <button
          @click="expanded = !expanded"
          class="btn mr-1 size-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-4.5 transition-transform"
            :class="expanded && 'rotate-90'"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </button>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="mr-3 size-6 text-warning"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
          ></path>
        </svg>
        <span>Application</span>
      </div>
      <ul x-show="expanded" x-collapse class="pl-4">
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="mr-1 flex size-5 items-center justify-center"></div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="mr-3 size-6 text-warning"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
              ></path>
            </svg>
            <span>Web Apps</span>
          </div>
        </li>
        <li x-data="{expanded:false}">
          <div
            tabindex="0"
            class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <button
              @click="expanded = !expanded"
              class="btn mr-1 size-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-4.5 transition-transform"
                :class="expanded && 'rotate-90'"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  fill-rule="evenodd"
                  d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                  clip-rule="evenodd"
                ></path>
              </svg>
            </button>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="mr-3 size-6 text-warning"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
              ></path>
            </svg>
            <span>CRM Apps</span>
          </div>
          <ul x-show="expanded" x-collapse class="pl-4">
            <li>
              <div
                tabindex="0"
                class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >
                <div
                  class="mr-1 flex size-5 items-center justify-center"
                ></div>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="mr-3 size-6 text-warning"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
                  ></path>
                </svg>
                <span>LMS App</span>
              </div>
            </li>
            <li>
              <div
                tabindex="0"
                class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >
                <div
                  class="mr-1 flex size-5 items-center justify-center"
                ></div>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="mr-3 size-6 text-warning"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
                  ></path>
                </svg>
                <span>Ecommerce</span>
              </div>
            </li>
            <li>
              <div
                tabindex="0"
                class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >
                <div
                  class="mr-1 flex size-5 items-center justify-center"
                ></div>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="mr-3 size-6 text-warning"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
                  ></path>
                </svg>
                <span>Dashboard</span>
              </div>
            </li>
          </ul>
        </li>
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="mr-1 flex size-5 items-center justify-center"></div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="mr-3 size-6 text-warning"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
              ></path>
            </svg>
            <span>Desktop Apps</span>
          </div>
        </li>
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="mr-1 flex size-5 items-center justify-center"></div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="mr-3 size-6 text-warning"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
              ></path>
            </svg>
            <span>Mobile Apps</span>
          </div>
        </li>
      </ul>
    </li>
    <li>
      <div
        tabindex="0"
        class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
      >
        <div class="mr-1 flex size-5 items-center justify-center"></div>

        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="mr-3 size-6 text-warning"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.5"
            d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
          ></path>
        </svg>
        <span>Archives</span>
      </div>
    </li>
  </ul>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Treeview

Basic Treeview

Advanced Treeview