Nav Global

"use client"

import { HandbagIcon, MagnifyingGlassIcon } from "@phosphor-icons/react"
import { Navbar, type NavbarItem } from "@/components/patterns/navbar"
import { Button } from "@/components/ui/button"

const image =
  "https://images.unsplash.com/photo-1644792863360-40fa85ea52e7?w=1600&q=80&auto=format&fit=crop"

const items: NavbarItem[] = [
  { label: "Store", href: "#store" },
  {
    label: "Laptop",
    columns: [
      {
        label: "Explore laptops",

A sticky top navigation bar with mega-menu panels, a brand link and search and bag buttons, shown above a sample hero. The bar is translucent and blurred, turns solid while a panel is open, and collapses into a full-screen menu on mobile or whenever the links don't fit. Built on the Navbar pattern, it suits sites with a deep catalog or many sections.

Installation

CLI

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

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

Manual

1. Install the dependencies:

$ pnpm add @phosphor-icons/react

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

3. Copy the source into components/blocks/nav-global.tsx:

"use client"

import { HandbagIcon, MagnifyingGlassIcon } from "@phosphor-icons/react"
import { Navbar, type NavbarItem } from "@/components/patterns/navbar"
import { Button } from "@/components/ui/button"

const image =
  "https://images.unsplash.com/photo-1644792863360-40fa85ea52e7?w=1600&q=80&auto=format&fit=crop"

const items: NavbarItem[] = [
  { label: "Store", href: "#store" },
  {
    label: "Laptop",
    columns: [
      {
        label: "Explore laptops",

4. Update the import paths to match your project.

Usage

import { NavGlobal } from "@/components/blocks/nav-global"

<NavGlobal />

Edit items: plain entries take a label and href, and mega-menu entries take columns, each with a label, an optional featured flag and a list of links. Replace the brand link and hash URLs, and give the search and bag buttons handlers. Remove the sample hero below the bar.

Notes

The hero image is an Unsplash placeholder.