Vertical Navigation
Icons and Badges
<nav class="flex flex-col items-center m-10">
<ul class="w-60 space-y-1">
<li class="flex items-center justify-between bg-gray-100 hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<div class="flex items-center space-x-3">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
</span>
<h3>Dashboard</h3>
</div>
<span class="badge-count text-center text-xs rounded-full px-3 py-1 bg-gray-300 font-semibold">4</span>
</li>
<li class="flex items-center justify-between hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<div class="flex items-center space-x-3">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</span>
<h3>Collaborators</h3>
</div>
</li>
<li class="flex items-center justify-between hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<div class="flex items-center space-x-3">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
</span>
<h3>Files</h3>
</div>
<span class="badge-count text-center text-xs rounded-full px-3 py-1 bg-gray-300 font-semibold">53</span>
</li>
<li class="flex items-center justify-between hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<div class="flex items-center space-x-3">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</span>
<h3>Events</h3>
</div>
<span class="badge-count text-center text-xs rounded-full px-3 py-1 bg-gray-300 font-semibold">17</span>
</li>
<li class="flex items-center justify-between hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<div class="flex items-center space-x-3">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
</svg>
</span>
<h3>Reports</h3>
</div>
<span class="badge-count text-center text-xs rounded-full px-3 py-1 bg-gray-300 font-semibold">99+</span>
</li>
<li class="flex items-center justify-between hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<div class="flex items-center space-x-3">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
</svg>
</span>
<h3>Settings</h3>
</div>
</li>
</ul>
</nav>With Badges Only
<nav class="flex flex-col items-center m-10">
<ul class="w-60 space-y-1">
<li class="flex items-center justify-between bg-gray-100 hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<h3>Dashboard</h3>
<span class="badge-count text-center text-xs rounded-full px-3 py-1 bg-gray-300 font-semibold">4</span>
</li>
<li class="flex items-center justify-between hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<h3>Collaborators</h3>
</li>
<li class="flex items-center justify-between hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<h3>Files</h3>
<span class="badge-count text-center text-xs rounded-full px-3 py-1 bg-gray-300 font-semibold">53</span>
</li>
<li class="flex items-center justify-between hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<h3>Events</h3>
<span class="badge-count text-center text-xs rounded-full px-3 py-1 bg-gray-300 font-semibold">17</span>
</li>
<li class="flex items-center justify-between hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<h3>Reports</h3>
<span class="badge-count text-center text-xs rounded-full px-3 py-1 bg-gray-300 font-semibold">99+</span>
</li>
<li class="flex items-center justify-between hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<h3>Settings</h3>
</li>
</ul>
</nav>With Icons Only
<nav class="flex flex-col items-center m-10">
<ul class="w-60 space-y-1">
<li class="flex items-center space-x-3 bg-gray-100 hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
</span>
<h3>Dashboard</h3>
</li>
<li class="flex items-center space-x-3 hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</span>
<h3>Collaborators</h3>
</li>
<li class="flex items-center space-x-3 hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
</span>
<h3>Files</h3>
</li>
<li class="flex items-center space-x-3 hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</span>
<h3>Events</h3>
</li>
<li class="flex items-center space-x-3 hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
</svg>
</span>
<h3>Reports</h3>
</li>
<li class="flex items-center space-x-3 hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
</svg>
</span>
<h3>Settings</h3>
</li>
</ul>
</nav>Badges and Icons with Additional Menu
<nav class="flex flex-col items-center m-10 space-y-7">
<ul class="w-60 space-y-1">
<li class="flex items-center justify-between bg-gray-100 hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<div class="flex items-center space-x-3">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
</span>
<h3>Dashboard</h3>
</div>
<span class="badge-count text-center text-xs rounded-full px-3 py-1 bg-gray-300 font-semibold">4</span>
</li>
<li class="flex items-center justify-between hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<div class="flex items-center space-x-3">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</span>
<h3>Collaborators</h3>
</div>
</li>
<li class="flex items-center justify-between hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<div class="flex items-center space-x-3">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
</span>
<h3>Files</h3>
</div>
<span class="badge-count text-center text-xs rounded-full px-3 py-1 bg-gray-300 font-semibold">53</span>
</li>
<li class="flex items-center justify-between hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<div class="flex items-center space-x-3">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</span>
<h3>Events</h3>
</div>
<span class="badge-count text-center text-xs rounded-full px-3 py-1 bg-gray-300 font-semibold">17</span>
</li>
<li class="flex items-center justify-between hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<div class="flex items-center space-x-3">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
</svg>
</span>
<h3>Reports</h3>
</div>
<span class="badge-count text-center text-xs rounded-full px-3 py-1 bg-gray-300 font-semibold">99+</span>
</li>
<li class="flex items-center justify-between hover:bg-gray-200 px-4 py-3 rounded-md cursor-pointer">
<div class="flex items-center space-x-3">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
</svg>
</span>
<h3>Settings</h3>
</div>
</li>
</ul>
<ul class="w-60 space-y-1 px-4">
<li class="uppercase font-semibold">Menu</li>
<li class="py-1">
<a href="#">Billing Systems</h3>
</li>
<li class="py-1">
<a href="#">User Management</a>
</li>
<li class="py-1">
<a href="#">Portfolio Visuals</a>
</li>
<li class="py-1">
<a href="#">Mirgration Services</a>
</li>
</ul>
</nav>