Basic Treeview
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
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>