<!--:Nav vertical:-->
<nav class="flex flex-col space-y-0.5">
    <a href="#"
        class="px-3 py-2 gap-2.5 rounded-lg flex items-center active [.active]:bg-primary-subtle hover:text-primary dark:[.active]:bg-stone-800 [.active]:text-primary hover:bg-primary-subtle dark:hover:bg-stone-800">
        <span class="icon-[lucide--user] text-lg"></span>
        Profile
    </a>
    <a href="#"
        class="px-3 py-2 gap-2.5 rounded-lg flex items-center [.active]:bg-primary-subtle hover:text-primary dark:[.active]:bg-stone-800 [.active]:text-primary hover:bg-primary-subtle dark:hover:bg-stone-800">
        <span class="icon-[lucide--shield-check] text-lg"></span>
        Security
    </a>
    ...
</nav>

<!--:Nav Horizontal:-->
<nav class="nav-horizontal nav-fill py-2">
    <a href="#" class="nav-link active">
        <span class="icon-[lucide--activity]"></span> Timeline
    </a>
    <a href="#" class="nav-link">
        <span class="icon-[lucide--user]"></span> About
    </a>
    <a href="#" class="nav-link">
        <span class="icon-[lucide--folder]"></span> Projects
    </a>
    <a href="#" class="nav-link">
        <span class="icon-[lucide--folder-cog]"></span> Settings
    </a>
</nav>

<!--:Nav Horizontal:-->
<nav class="nav-horizontal nav-underline gap-4 flex flex-nowrap">
    <a href="#" class="nav-link active">
        <span class="icon-[lucide--activity]"></span> Timeline
    </a>
    <a href="#" class="nav-link">
        <span class="icon-[lucide--user]"></span> About
    </a>
    <a href="#" class="nav-link">
        <span class="icon-[lucide--folder]"></span> Projects
    </a>
    <a href="#" class="nav-link">
        <span class="icon-[lucide--folder-cog]"></span> Settings
    </a>
</nav>