Tailwind CSS Sidebar Navigation Blocks

Sidebar Navigation

Vertical sidebar navigation patterns for account menus, help categories, and other app-specific sidebar navigation lists.

A fixed left rail groups account links in one vertical list beside the main content area.

Create a responsive UI block named "Account Sidebar Navigation" 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/sidebar-navigation/#account-sidebar-navigation. 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/sidebar-navigation
- Block ID: account-sidebar-navigation
- Source description: A fixed left rail groups account links in one vertical list beside the main content area.
- Preview iframe: https://preline.co/blocks/navigation-layout/sidebar-navigation/iframes/pro/account-sidebar-navigation.html (repo path: blocks/navigation-layout/sidebar-navigation/iframes/pro/account-sidebar-navigation.html)
- Source markup reference:
  - partials/pro/admin-dashboard/navbars/breadcrumb.html
  - partials/pro/storefront/sidebars/toggle-button.html
  - partials/pro/storefront/sidebars/account.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):
  - The rail is headed by the label `Account` and holds exactly 9 rows in three groups separated by two 1px dividers: group one is `Personal Info`, `My Orders`, `Order Details`, `Addresses`, `Payment`, `Email Newsletter`; group two is `Gift Cards` and `Returns & Refunds`; group three is a single `Logout` button that turns destructive-red on hover/focus.
  - Every row is an icon + label pair using a 16px Lucide-style outline icon (user, package/bag, kanban bars, map pin, credit card, envelope, gift, refresh-arrow, log-out) with `py-2 px-2.5`, `gap-x-3.5`, `text-sm`, and `rounded-lg`.
  - `Personal Info` is the active row on first load and is the only one carrying the active background; all other rows render in the resting state.
  - The sidebar element is `id="hs-pro-shas"`, an `hs-overlay` drawer with `[--auto-close:lg]`, `role="dialog"`, `aria-label="Sidebar"`: hidden and translated `-translate-x-full` on small screens, `lg:block lg:static lg:translate-x-0` on large; width is `w-72 lg:w-56 xl:w-72` with `min-h-160` and an end border.
  - Above the rail sits an `lg:hidden` row containing a breadcrumb reading `Home` / `Account` / `Personal Info` (first two are links, `Personal Info` is static and semibold, separated by thin slash SVGs) and a 32px square toggle button.
  - Two triggers drive the drawer via Preline HSOverlay: the `lg:hidden` toggle button and the 24px round close button inside the sidebar header, both `data-hs-overlay="#hs-pro-shas"` with `aria-controls="hs-pro-shas"` and `aria-expanded="false"`.
  - No dropdowns, badges, counters, avatars, or search field appear anywhere in this block.

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="mb-5 lg:mb-0 lg:hidden flex flex-wrap justify-between items-center gap-x-5">
                      
                      <ol class=" flex items-center whitespace-nowrap">
                        <li class="flex items-center">
                          
                          <a class="py-0.5 px-1.5 flex items-center gap-x-1 text-sm rounded-md text-foreground hover:bg-surface-hover focus:bg-surface-focus focus:outline-hidden" href="index.html">
                            Home
                          </a>
                          <svg class="shrink-0 overflow-visible size-4  text-muted-foreground" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"></path></svg>
                        </li>
                        <li class="flex items-center truncate">
                          
                          <a class="py-0.5 px-1.5 flex items-center truncate gap-x-1 text-sm truncate rounded-md text-foreground hover:bg-surface-hover focus:bg-surface-focus focus:outline-hidden" href="account.html">
                            <span class="truncate">Account</span>
                          </a>
                          <svg class="shrink-0 overflow-visible size-4  text-muted-foreground" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"></path></svg>
                        </li>
                        <li class="ps-1.5 flex items-center truncate font-semibold text-foreground text-sm truncate">
                          <span class="truncate">Personal Info</span>
                        </li>
                      </ol>

<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-shas" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-shas">
                        <span class="sr-only">Toggle navigation</span>
                        <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"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m8 9 3 3-3 3"/></svg>
                      </button>
                      
                    </div>

<div id="hs-pro-shas" class="hs-overlay [--auto-close:lg]
                      hs-overlay-open:translate-x-0
                      -translate-x-full transition-all duration-300 transform
                      w-72 lg:w-56 xl:w-72 h-full min-h-160
                      hidden
                      fixed inset-y-0 inset-s-0 z-60
                      bg-sidebar border-e border-sidebar-line
                      lg:block lg:static lg:z-0 lg:translate-x-0" role="dialog" tabindex="-1" aria-label="Sidebar">
                      <div class="p-5 lg:pt-5 lg:pb-12 lg:ps-0">
                        
                        <div class="ps-2.5 mb-5 flex justify-between items-center gap-x-3">
                          <div class="grow">
                            <span class="block font-medium text-sidebar-nav-foreground">
                              Account
                            </span>
                          </div>

<button type="button" class="lg:hidden size-6 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-shas" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-shas">
                            <span class="sr-only">Close</span>
                            <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                          </button>
                          
                        </div>

<ul class="flex flex-col space-y-1">
                          <li>
                            <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus bg-sidebar-nav-active" href="../../../templates/ecommerce/storefront/personal-info.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="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                              Personal Info
                            </a>
                          </li>

<li>
                            <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus " href="../../../templates/ecommerce/storefront/payment.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"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
                              Payment
                            </a>
                          </li>
      
                          <li>
                            <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus " href="../../../templates/ecommerce/storefront/email-newsletter.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"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                              Email Newsletter
                            </a>
                          </li>
                        </ul>

<ul class="flex flex-col space-y-1">
                          <li>
                            <a class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus " href="../../../templates/ecommerce/storefront/gift-cards.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"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></svg>
                              Gift Cards
                            </a>
                          </li>

<p>
                          <button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover hover:text-destructive focus:muted-focus focus:bg-sidebar-nav-focus focus:text-destructive">
                            <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="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>
                            Logout
                          </button>
                        </p>
                      </div>
                    </div>

A vertical help rail stacks category links and section groups beside the support content area.

Create a responsive UI block named "Help Center Sidebar Navigation" 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/sidebar-navigation/#help-center-sidebar-navigation. 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/sidebar-navigation
- Block ID: help-center-sidebar-navigation
- Source description: A vertical help rail stacks category links and section groups beside the support content area.
- Preview iframe: https://preline.co/blocks/navigation-layout/sidebar-navigation/iframes/pro/help-center-sidebar-navigation.html (repo path: blocks/navigation-layout/sidebar-navigation/iframes/pro/help-center-sidebar-navigation.html)
- Source markup reference:
  - partials/pro/sources/examples-trigger-button.html
  - partials/pro/storefront/sidebars/help-categories.html
  - partials/pro/storefront/sidebars/help-categories-nav.html
  - partials/pro/storefront/sidebars/contacts-list.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):
  - The category nav is exactly 5 icon links in this order: `Delivery`, `Return and exchange`, `Online`, `Store`, `Products`, each `flex gap-x-3 py-2 px-3 text-sm rounded-lg` with a 16px Lucide-style outline icon (truck, refresh arrow, tablet, store, gift-package) offset by `mt-0.5`.
  - Below a `pt-5 mt-5 border-t` divider sit 4 contact rows: `Chat` with trailing underlined `Open chat`, `Phone` with trailing underlined `(0161) 347 8854`, `Email` with trailing underlined `Send us email`, and `Send us feedback` with no trailing value; icons are message-square, phone, envelope, message-square.
  - Scrollspy is enabled in this block: the `<ul>` carries `[--scrollspy-offset:60]` and `data-hs-scrollspy="#hs-pro-shh-scrollspy"`, links point at `#delivery`, `#return-and-exchange`, `#online`, `#store`, `#products`, and each uses `hs-scrollspy-active:bg-sidebar-nav-active`.
  - `Delivery` is the initially active link (it also carries the `active` class); the contact rows are never highlighted by scrollspy.
  - The sidebar is `id="hs-pro-shas"`, an `hs-overlay` drawer with `[--auto-close:lg]`, `role="dialog"`, `aria-label="Sidebar"`, hidden and `-translate-x-full` on small screens and `lg:block lg:sticky lg:top-10` on large; width is `w-80 lg:w-72`, and the body scrolls with a 2px custom scrollbar.
  - An `lg:hidden` header bar labeled `Categories` sits above the lists with a 24px round close button (`data-hs-overlay="#hs-pro-shas"`); the small "Open" button seen in the demo preview is iframe chrome, not part of the block.

<div id="hs-pro-shas" class="hs-overlay [--auto-close:lg]
                      hs-overlay-open:translate-x-0
                      -translate-x-full transition-all duration-300 transform
                      w-80 lg:w-72 h-full
                      hidden
                      fixed inset-y-0 inset-s-0 z-60
                      bg-sidebar border-e border-sidebar-line
                      lg:block lg:sticky lg:top-10 lg:z-0 lg:translate-x-0" role="dialog" tabindex="-1" aria-label="Sidebar">
                      <div class="lg:sticky top-10 inset-s-0 h-full flex-1 flex flex-col lg:h-auto">
                        
                        <div class="lg:hidden py-3 px-5 flex justify-between items-center gap-x-3 border-b border-sidebar-divider">
                          <div class="grow">
                            <span class="block font-medium text-foreground">
                              Categories
                            </span>
                          </div>

<button type="button" class="lg:hidden size-6 inline-flex justify-center items-center gap-x-2 rounded-full bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-shas" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-shas">
                            <span class="sr-only">Close</span>
                            <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                          </button>
                          
                        </div>

<div class="h-full overflow-y-auto overflow-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          <div class="p-5 ps-3 lg:pt-10 lg:ps-0 flex flex-col">

<ul class="[--scrollspy-offset:60] space-y-1" data-hs-scrollspy="#hs-pro-shh-scrollspy">
                              
                              <li>
                                <a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus hs-scrollspy-active:bg-sidebar-nav-active active" href="#delivery">
                                  <svg class="shrink-0 mt-0.5 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="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/></svg>
                                  Delivery
                                </a>
                              </li>

<li>
                                <a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus hs-scrollspy-active:bg-sidebar-nav-active" href="#store">
                                  <svg class="shrink-0 mt-0.5 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="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"/><path d="M2 7h20"/><path d="M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7"/></svg>
                                  Store
                                </a>
                              </li>

<li>
                                <a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus hs-scrollspy-active:bg-sidebar-nav-active" href="#products">
                                  <svg class="shrink-0 mt-0.5 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="M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"/></svg>
                                  Products
                                </a>
                              </li>
                              
                            </ul>

<div class="pt-5 mt-5 space-y-1 border-t border-sidebar-divider">
                              
                              <a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                <svg class="shrink-0 mt-0.5 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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M8 10h.01"/><path d="M12 10h.01"/><path d="M16 10h.01"/></svg>
                                <div class="grow">
                                  <div class="flex flex-wrap justify-between items-center gap-2">
                                    Chat
                                    <span class="inline-flex items-center gap-x-1.5 text-xs text-sidebar-nav-foreground underline underline-offset-4">Open chat</span>
                                  </div>
                                </div>
                              </a>

<a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                <svg class="shrink-0 mt-0.5 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="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/><path d="M14.05 2a9 9 0 0 1 8 7.94"/><path d="M14.05 6A5 5 0 0 1 18 10"/></svg>
                                <div class="grow">
                                  <div class="flex flex-wrap justify-between items-center gap-2">
                                    Phone
                                    <span class="inline-flex items-center gap-x-1.5 text-xs text-sidebar-nav-foreground underline underline-offset-4">(0161) 347 8854</span>
                                  </div>
                                </div>
                              </a>

<a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                <svg class="shrink-0 mt-0.5 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"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                                <div class="grow">
                                  <div class="flex flex-wrap justify-between items-center gap-2">
                                    Email
                                    <span class="inline-flex items-center gap-x-1.5 text-xs text-sidebar-nav-foreground underline underline-offset-4">Send us email</span>
                                  </div>
                                </div>
                              </a>

<a class="flex gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                <svg class="shrink-0 mt-0.5 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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                                <div class="grow">
                                  <div class="flex flex-wrap justify-between items-center gap-2">
                                    Send us feedback
                                  </div>
                                </div>
                              </a>
                              
                            </div>
                            
                          </div>
                        </div>
                        
                      </div>
                    </div>

Open related storefront help template

Sidebar Navigation

Account Sidebar Navigation Pro

Help Center Sidebar Navigation Pro