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.

Create a responsive UI block named "Scrollable Pill Account Nav" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/navigation-layout/secondary-navs/#scrollable-pill-account-nav. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: navigation-layout/secondary-navs
- Block ID: scrollable-pill-account-nav
- Source description: A horizontal row of pill links scrolls inside one bordered nav container.
- Preview iframe: https://preline.co/blocks/navigation-layout/secondary-navs/iframes/pro/scrollable-pill-account-nav.html (repo path: blocks/navigation-layout/secondary-navs/iframes/pro/scrollable-pill-account-nav.html)
- Source markup reference:
  - partials/pro/admin-dashboard/navbars/account-nav.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- For headers, navbars, sidebars, tabs, and app chrome, separate source demo wrapper width from the destination app shell. Reuse the destination project's header/container max width and padding when adapting.
- Preserve active/current states, trigger geometry, separator presence, mobile ordering, dropdown placement, and focus/keyboard behavior.
- Source content inventory (from the source markup):
  - Seven links in this exact order: `Profile`, `Notifications`, `Integrations`, `Preferences`, `Workspace`, `Plan & Billing`, `Members`.
  - `Profile` is the selected pill on first load - the active link adds `bg-layer border-layer-line shadow-2xs active` while the other six carry `border-transparent`; every link keeps `border` so widths do not shift.
  - Link geometry is `snap-start inline-flex items-center gap-x-2 py-2 px-3 text-sm whitespace-nowrap border text-foreground rounded-lg` with `hover:text-muted-foreground-1` and `focus:text-muted-foreground-1`; there are no icons or badges.
  - The rail is Preline's scroll-nav: the outer div carries `data-hs-scroll-nav='{ "autoCentering": true }'` and the inner `<nav>` carries `hs-scroll-nav-body`, so the active pill auto-centers on load.
  - The track is `flex flex-nowrap overflow-x-auto snap-x snap-mandatory pb-1.5` with a deliberately visible 2px scrollbar - `[&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb`; the wrapper is `relative overflow-hidden flex justify-center md:justify-start`, so the row centers on mobile and left-aligns from `md`.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<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.

Create a responsive UI block named "Scrollable Category Link Row" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/navigation-layout/secondary-navs/#scrollable-category-link-row. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: navigation-layout/secondary-navs
- Block ID: scrollable-category-link-row
- Source description: Horizontal links stay in one row and scroll when the list runs past the viewport width.
- Preview iframe: https://preline.co/blocks/navigation-layout/secondary-navs/iframes/pro/scrollable-category-link-row.html (repo path: blocks/navigation-layout/secondary-navs/iframes/pro/scrollable-category-link-row.html)
- Source markup reference:
  - partials/pro/marketplace/layouts-components/scrollable-nav-group.html

Block-specific fidelity rules:
- For headers, navbars, sidebars, tabs, and app chrome, separate source demo wrapper width from the destination app shell. Reuse the destination project's header/container max width and padding when adapting.
- Preserve active/current states, trigger geometry, separator presence, mobile ordering, dropdown placement, and focus/keyboard behavior.
- Source content inventory (from the source markup):
  - Twelve pills in this exact order: `Recommended`, `Phones`, `Laptops`, `Computers`, `TV`, `Tablets`, `Office equipment`, `Monitor`, `Headphones`, `Game Consoles`, `Cameras`, `Speakers`.
  - Each is a `<button type="button">` (not a link) styled `py-1.5 px-3 flex whitespace-nowrap items-center gap-x-1.5 rounded-full bg-layer border text-[13px] text-layer-foreground` with a leading `shrink-0 size-3.5` outline icon.
  - `Recommended` is the emphasized first pill - it uses `border-line-8` with `hover:border-line-8 focus:border-line-8`, while the other eleven use `border-layer-line` with `hover:border-line-3 focus:border-line-3`; nothing is marked `active` or `aria-current`.
  - The track is `flex flex-row items-center gap-2 py-2 overflow-x-auto [&::-webkit-scrollbar]:hidden after:h-px after:min-w-10` inside `relative flex flex-1 items-center overflow-hidden` - the scrollbar is hidden and the `after:min-w-10` spacer guarantees trailing scroll room.
  - A non-interactive fade sits at the end edge: `absolute top-0 inset-e-0 h-full w-12 pointer-events-none bg-linear-to-l from-background via-background/90 to-transparent`.
  - Fully static - no Preline JS plugin, no arrow buttons, no snap alignment; the demo wrapper is `w-full max-w-5xl mx-auto px-4 xl:px-0`.

<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.

Create a responsive UI block named "Scrollable User Profile Nav with Icons" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/navigation-layout/secondary-navs/#scrollable-user-profile-nav-with-icons. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: navigation-layout/secondary-navs
- Block ID: scrollable-user-profile-nav-with-icons
- Source description: Icon-and-label links scroll in one row with the active state carried on each item.
- Preview iframe: https://preline.co/blocks/navigation-layout/secondary-navs/iframes/pro/scrollable-user-profile-nav-with-icons.html (repo path: blocks/navigation-layout/secondary-navs/iframes/pro/scrollable-user-profile-nav-with-icons.html)
- Source markup reference:
  - partials/pro/admin-dashboard/navbars/user-profile-nav.html

Block-specific fidelity rules:
- For headers, navbars, sidebars, tabs, and app chrome, separate source demo wrapper width from the destination app shell. Reuse the destination project's header/container max width and padding when adapting.
- Preserve active/current states, trigger geometry, separator presence, mobile ordering, dropdown placement, and focus/keyboard behavior.
- Source content inventory (from the source markup):
  - Four links in this exact order, each with a leading `shrink-0 size-4` outline icon: `My Profile` (user-with-gear), `Teams` (two-people), `Files` (document), `Connections` (two arrows).
  - `Teams` is the selected item on first load - the active link adds `bg-surface font-medium active`; inactive links have no background and no border.
  - Link geometry is `snap-start relative inline-flex flex-nowrap items-center gap-x-2 px-2.5 py-1.5 text-sm whitespace-nowrap rounded-lg` with `hover:bg-muted-hover` and `focus:bg-muted-focus`; the nav uses `gap-x-1` between items.
  - The rail is Preline's scroll-nav: the outer div carries `data-hs-scroll-nav='{ "autoCentering": true }'` and the inner `<nav>` carries `hs-scroll-nav-body`, so the active item auto-centers on load.
  - The track is `flex flex-nowrap overflow-x-auto pb-1.5` with a visible thumb-only scrollbar (`[&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb` and no track color); the wrapper is `relative flex justify-center md:justify-start`.

<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.

Create a responsive UI block named "Bottom-Bordered Secondary Nav" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/navigation-layout/secondary-navs/#bottom-bordered-secondary-nav. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: navigation-layout/secondary-navs
- Block ID: bottom-bordered-secondary-nav
- Source description: Short links sit on one row with the active state shown by a bottom border.
- Preview iframe: https://preline.co/blocks/navigation-layout/secondary-navs/iframes/pro/bottom-bordered-secondary-nav.html (repo path: blocks/navigation-layout/secondary-navs/iframes/pro/bottom-bordered-secondary-nav.html)
- Source markup reference:
  - partials/pro/ecommerce-admin/navbars/store-nav-links.html

Block-specific fidelity rules:
- For headers, navbars, sidebars, tabs, and app chrome, separate source demo wrapper width from the destination app shell. Reuse the destination project's header/container max width and padding when adapting.
- Preserve active/current states, trigger geometry, separator presence, mobile ordering, dropdown placement, and focus/keyboard behavior.
- Source content inventory (from the source markup):
  - Exactly two links in order: `Overview` and `Payouts` - no icons, badges, counts, or overflow menu.
  - `Overview` is the active tab on first load: active rows get `text-foreground` plus an `after:bg-secondary` underline, inactive rows get `text-muted-foreground-1` with no underline.
  - The rail itself draws the hairline - `<nav class="relative flex gap-x-1 after:absolute after:bottom-0 after:inset-x-0 after:border-b after:border-line-2">` - and each link paints its own `after:absolute after:-bottom-2 after:inset-x-0 after:z-1 after:h-0.5 after:pointer-events-none` indicator, so the underline overlaps the border rather than replacing it.
  - Link geometry is `px-2.5 py-1.5 mb-2 inline-flex items-center gap-x-2 text-sm rounded-lg` with `hover:bg-surface-hover` and `focus:bg-surface-focus`; the `mb-2` is what leaves room for the `-bottom-2` underline.
  - Fully static anchors - no Preline JS plugin, no scroll container, no dropdown; the demo wrapper is `w-full max-w-5xl mx-auto px-4 xl:px-0`.

<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