Nav Local

"use client"

import * as React from "react"

import { Navbar } from "@/components/patterns/navbar"
import { Button } from "@/components/ui/button"

const images = {
  hero: "https://images.unsplash.com/photo-1714972384975-fbd4f19b1bb3?w=1600&q=80&auto=format&fit=crop",
  detail:
    "https://images.unsplash.com/photo-1695083691065-4f77dfd0f0d5?w=1600&q=80&auto=format&fit=crop",
}

type Section = { id: string; label: string }

const sections: [Section, ...Section[]] = [

A sticky product sub-navigation with the product name on the left and section links and a Buy button on the right, underlining the link for the section in view. The bar gains a blurred background once the page scrolls, and the links collapse into a full-screen menu when space runs out. It renders dark and comes with a sample page of three sections. Use it under a global nav on long product or feature pages.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/nav-local

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add blocks nav-local

Manual

1. Add the pieces it builds on: Button, Navbar.

2. Copy the source into components/blocks/nav-local.tsx:

"use client"

import * as React from "react"

import { Navbar } from "@/components/patterns/navbar"
import { Button } from "@/components/ui/button"

const images = {
  hero: "https://images.unsplash.com/photo-1714972384975-fbd4f19b1bb3?w=1600&q=80&auto=format&fit=crop",
  detail:
    "https://images.unsplash.com/photo-1695083691065-4f77dfd0f0d5?w=1600&q=80&auto=format&fit=crop",
}

type Section = { id: string; label: string }

const sections: [Section, ...Section[]] = [

3. Update the import paths to match your project.

Usage

import { NavLocal } from "@/components/blocks/nav-local"

<NavLocal />

Edit sections; each id must match an element on your page, because an IntersectionObserver picks the active link from the section in view. Replace the sample sections, highlights and images with your own content, and give Buy a handler.

Notes

Images are Unsplash placeholders.