Tailwind CSS Secondary Navs Blocks

Secondary Navs

Tailwind CSS secondary navigation blocks for account settings, profile areas, admin sections, and application subpages.

Scrollable Pill Account Nav Pro

A horizontal row of pill links scrolls inside one bordered nav container.

<div class="relative overflow-hidden flex justify-center md:justify-start" data-hs-scroll-nav='{
                        "autoCentering": true
                      }'>
                      <nav class="hs-scroll-nav-body flex flex-nowrap overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb snap-x snap-mandatory pb-1.5">
                        <a class="snap-start inline-flex items-center gap-x-2 py-2 px-3 text-sm whitespace-nowrap border text-foreground hover:text-muted-foreground-1 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-muted-foreground-1 bg-layer border-layer-line shadow-2xs active" href="../../../templates/dashboards/admin-dashboard/account-profile.html">
                          Profile
                        </a>
                        <a class="snap-start inline-flex items-center gap-x-2 py-2 px-3 text-sm whitespace-nowrap border text-foreground hover:text-muted-foreground-1 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-muted-foreground-1 border-transparent" href="../../../templates/dashboards/admin-dashboard/account-notifications.html">
                          Notifications
                        </a>
                        <a class="snap-start inline-flex items-center gap-x-2 py-2 px-3 text-sm whitespace-nowrap border text-foreground hover:text-muted-foreground-1 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-muted-foreground-1 border-transparent" href="../../../templates/dashboards/admin-dashboard/account-integrations.html">
                          Integrations
                        </a>
                        <a class="snap-start inline-flex items-center gap-x-2 py-2 px-3 text-sm whitespace-nowrap border text-foreground hover:text-muted-foreground-1 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-muted-foreground-1 border-transparent" href="../../../templates/dashboards/admin-dashboard/account-preferences.html">
                          Preferences
                        </a>
                        <a class="snap-start inline-flex items-center gap-x-2 py-2 px-3 text-sm whitespace-nowrap border text-foreground hover:text-muted-foreground-1 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-muted-foreground-1 border-transparent" href="../../../templates/dashboards/admin-dashboard/account-workspace.html">
                          Workspace
                        </a>
                        <a class="snap-start inline-flex items-center gap-x-2 py-2 px-3 text-sm whitespace-nowrap border text-foreground hover:text-muted-foreground-1 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-muted-foreground-1 border-transparent" href="../../../templates/dashboards/admin-dashboard/account-plan-and-billing.html">
                          Plan & Billing
                        </a>
                        <a class="snap-start inline-flex items-center gap-x-2 py-2 px-3 text-sm whitespace-nowrap border text-foreground hover:text-muted-foreground-1 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-muted-foreground-1 border-transparent" href="../../../templates/dashboards/admin-dashboard/account-members.html">
                          Members
                        </a>
                      </nav>
                    </div>

Open related account profile template

Scrollable Category Link Row Pro

Horizontal links stay in one row and scroll when the list runs past the viewport width.

<div class="relative flex flex-1 items-center overflow-hidden">
                      <div class="flex flex-row items-center gap-2 py-2 overflow-x-auto [&::-webkit-scrollbar]:hidden after:h-px after:min-w-10">
                        <button type="button" class="py-1.5 px-3 flex whitespace-nowrap items-center gap-x-1.5 rounded-full bg-layer border border-line-8 text-[13px] text-layer-foreground hover:border-line-8 focus:outline-hidden focus:border-line-8">
                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/></svg>
                          Recommended
                        </button>

<button type="button" class="py-1.5 px-3 flex whitespace-nowrap items-center gap-x-1.5 rounded-full bg-layer border border-layer-line text-[13px] text-layer-foreground hover:border-line-3 focus:outline-hidden focus:border-line-3">
                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 7 3 5"/><path d="M9 6V3"/><path d="m13 7 2-2"/><circle cx="9" cy="13" r="3"/><path d="M11.83 12H20a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h2.17"/><path d="M16 16h2"/></svg>
                          Office equipment
                        </button>

<button type="button" class="py-1.5 px-3 flex whitespace-nowrap items-center gap-x-1.5 rounded-full bg-layer border border-layer-line text-[13px] text-layer-foreground hover:border-line-3 focus:outline-hidden focus:border-line-3">
                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" x2="10" y1="11" y2="11"/><line x1="8" x2="8" y1="9" y2="13"/><line x1="15" x2="15.01" y1="12" y2="12"/><line x1="18" x2="18.01" y1="10" y2="10"/><path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"/></svg>
                          Game Consoles
                        </button>

Open Marketplace homepage

Scrollable User Profile Nav with Icons Pro

Icon-and-label links scroll in one row with the active state carried on each item.

<div class="relative flex justify-center md:justify-start" data-hs-scroll-nav='{
                        "autoCentering": true
                      }'>
                      <nav class="hs-scroll-nav-body flex flex-nowrap gap-x-1 overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb pb-1.5">
                        <a class="snap-start relative inline-flex flex-nowrap items-center gap-x-2 px-2.5 py-1.5 hover:bg-muted-hover text-foreground text-sm whitespace-nowrap rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus " href="../../../templates/dashboards/admin-dashboard/user-profile-my-profile.html">
                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="15" r="3"/><circle cx="9" cy="7" r="4"/><path d="M10 15H6a4 4 0 0 0-4 4v2"/><path d="m21.7 16.4-.9-.3"/><path d="m15.2 13.9-.9-.3"/><path d="m16.6 18.7.3-.9"/><path d="m19.1 12.2.3-.9"/><path d="m19.6 18.7-.4-1"/><path d="m16.8 12.3-.4-1"/><path d="m14.3 16.6 1-.4"/><path d="m20.7 13.8 1-.4"/></svg>
                          My Profile
                        </a>
                        <a class="snap-start relative inline-flex flex-nowrap items-center gap-x-2 px-2.5 py-1.5 hover:bg-muted-hover text-foreground text-sm whitespace-nowrap rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus bg-surface font-medium active" href="../../../templates/dashboards/admin-dashboard/user-profile-teams.html">
                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                          Teams
                        </a>
                        <a class="snap-start relative inline-flex flex-nowrap items-center gap-x-2 px-2.5 py-1.5 hover:bg-muted-hover text-foreground text-sm whitespace-nowrap rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus " href="../../../templates/dashboards/admin-dashboard/user-profile-files.html">
                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 2H8.6c-.4 0-.8.2-1.1.5-.3.3-.5.7-.5 1.1v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8c.4 0 .8-.2 1.1-.5.3-.3.5-.7.5-1.1V6.5L15.5 2z"/><path d="M3 7.6v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8"/><path d="M15 2v5h5"/></svg>
                          Files
                        </a>
                        <a class="snap-start relative inline-flex flex-nowrap items-center gap-x-2 px-2.5 py-1.5 hover:bg-muted-hover text-foreground text-sm whitespace-nowrap rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus " href="../../../templates/dashboards/admin-dashboard/user-profile-connections.html">
                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/></svg>
                          Connections
                        </a>
                      </nav>
                    </div>

Open related user profile template

Bottom-Bordered Secondary Nav Pro

Short links sit on one row with the active state shown by a bottom border.

<nav class="relative flex gap-x-1 after:absolute after:bottom-0 after:inset-x-0 after:border-b after:border-line-2">
                      <a class="px-2.5 py-1.5 mb-2 relative inline-flex items-center gap-x-2 hover:bg-surface-hover text-sm rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus after:absolute after:-bottom-2 after:inset-x-0 after:z-1 after:h-0.5 after:pointer-events-none text-foreground after:bg-secondary" href="../../../templates/ecommerce/admin/store.html">
                        Overview
                      </a>
                      <a class="px-2.5 py-1.5 mb-2 relative inline-flex items-center gap-x-2 hover:bg-surface-hover text-sm rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus after:absolute after:-bottom-2 after:inset-x-0 after:z-1 after:h-0.5 after:pointer-events-none text-muted-foreground-1" href="../../../templates/ecommerce/admin/payouts.html">
                        Payouts
                      </a>
                    </nav>

Open related ecommerce admin template