# Header 6

A shadcn/ui block from the [@diarmuradi](https://diarmuradi.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/diarmuradi/header-6).

- Page, with a live preview: https://shadcn.exchange/r/diarmuradi/header-6
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/diarmuradi/header-6-light-70175144e785fb0c.png
- Registry item: https://diarmuradi.com/r/header-6.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://diarmuradi.com/r/header-6.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`, `motion`
- Registry items: `https://diarmuradi.com/r/styles/base-nova/button.json`, `https://diarmuradi.com/r/styles/base-nova/fancy-button.json`, `https://diarmuradi.com/r/styles/base-nova/icons.json`, `https://diarmuradi.com/r/styles/base-nova/navigation-menu.json`, `https://diarmuradi.com/r/styles/base-nova/separator.json`

## Files

### `header.tsx`

```tsx
"use client"

import Link from "next/link"

import { DesktopNav } from "@/components/header-6/desktop-nav"
import { MobileNav } from "@/components/header-6/mobile-nav"
import { FancyButton } from "@/components/ui/fancy-button"
import { Icons } from "@/components/ui/icons"

export function SiteHeader() {
  return (
    <header
      className="sticky top-0 z-50 flex w-full justify-center px-4"
      data-slot="header"
    >
      <div className="relative w-full max-w-xl">
        <div className="grid h-14 grid-cols-[1fr_auto_1fr] items-center gap-2">
          <FancyButton
            aria-label="Home"
            size="icon-lg"
            className="justify-self-start"
            render={<Link href="#" role="link" />}
          >
            <Icons.Logo aria-hidden="true" className="size-5" />
          </FancyButton>

          <DesktopNav />

          <div className="col-start-3 flex items-center justify-end gap-2">
            <FancyButton
              size="lg"
              className="max-md:hidden"
              render={<Link href="#sign-in" role="link" />}
            >
              Sign in
            </FancyButton>
            <MobileNav />
          </div>
        </div>
      </div>
    </header>
  )
}
```

### `desktop-nav.tsx`

```tsx
"use client"

import { useEffect, useState, type ReactNode } from "react"
import Link from "next/link"

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"
import { Separator } from "@/components/ui/separator"

export const SOLUTIONS = [
  {
    key: "insights",
    title: "Insights",
    description: "Deep analytics to help you understand user behavior",
    href: "#solutions/insights",
  },
  {
    key: "workflow",
    title: "Workflow",
    description: "Automate repetitive processes and save time",
    href: "#solutions/workflow",
  },
  {
    key: "crm-pro",
    title: "CRM Pro",
    description: "Manage customer relationships with advanced tools",
    href: "#solutions/crm-pro",
  },
]

export const LEARN_LINKS = [
  { href: "#guide/getting-started", title: "Start Guide" },
  { href: "#guide/tutorials", title: "Tutorials" },
  { href: "#guide/api", title: "API Docs" },
]

export const SUPPORT_LINKS = [
  { href: "#help/faq", title: "FAQ" },
  { href: "#help/contact", title: "Contact Support" },
]

export function DesktopNav() {
  const [menuValue, setMenuValue] = useState<string | null>(null)
  useEffect(() => {
    if (!menuValue) return
    const viewportWidth = window.innerWidth
    const close = () => {
      if (window.innerWidth === viewportWidth) return
      setMenuValue(null)
    }
    window.addEventListener("resize", close)
    return () => window.removeEventListener("resize", close)
  }, [menuValue])
  return (
    <nav className="flex max-md:hidden">
      <style>{`
        .cn-navigation-menu-positioner:has([data-header-content="6"]) {
          translate: 0 0.5rem;
          transition: top 300ms ease-in-out, left 300ms ease-in-out;
        }
        .cn-navigation-menu-popup:has([data-header-content="6"]) {
          border-radius: var(--radius-4xl);
          box-shadow: var(--shadow-elevated-sm);
          scale: 1;
          transition: width 300ms ease-in-out, height 300ms ease-in-out,
            opacity 300ms ease-in-out;
        }
        [data-header-content="6"] {
          height: auto;
        }
        @media (prefers-reduced-motion: reduce) {
          .cn-navigation-menu-positioner:has([data-header-content="6"]),
          .cn-navigation-menu-popup:has([data-header-content="6"]),
          [data-header-content="6"] {
            transition: none;
          }
        }
      `}</style>
      <NavigationMenu
        align="center"
        delay={100}
        closeDelay={150}
        value={menuValue}
        onValueChange={setMenuValue}
        className="relative flex items-center justify-center"
        aria-label="Main navigation"
      >
        <NavigationMenuList className="gap-2">
          <NavigationMenuItem>
            <NavigationMenuLink
              className="h-8 text-muted-foreground transition-colors duration-200 hover:text-foreground motion-reduce:transition-none"
              render={<Link href="#" />}
            >
              Home
            </NavigationMenuLink>
          </NavigationMenuItem>

          <NavigationMenuItem>
            <NavigationMenuTrigger className="h-8 font-normal text-muted-foreground transition-colors duration-200 hover:bg-muted hover:text-foreground motion-reduce:transition-none data-popup-open:[&_svg]:text-primary [&>svg]:duration-200 [&>svg]:motion-reduce:transition-none">
              Products
            </NavigationMenuTrigger>
            <NavigationMenuContent
              data-header-content="6"
              className="data-ending-style:data-activation-direction=left:translate-x-52 data-ending-style:data-activation-direction=right:-translate-x-52 data-starting-style:data-activation-direction=left:-translate-x-52 data-starting-style:data-activation-direction=right:translate-x-52 no-scrollbar flex max-h-[calc(100dvh-8rem)] w-135 gap-4 overflow-y-auto p-4 duration-300 ease-in-out motion-reduce:translate-none motion-reduce:transition-none"
            >
              <div className="flex flex-1 flex-col gap-2">
                <h3 className="px-2 text-xs font-semibold text-muted-foreground">
                  Solutions
                </h3>
                <ul className="flex flex-col gap-3">
                  {SOLUTIONS.map((solution) => (
                    <ListItem
                      key={solution.href}
                      href={solution.href}
                      title={solution.title}
                    >
                      {solution.description}
                    </ListItem>
                  ))}
                </ul>
              </div>
              <Separator orientation="vertical" className="bg-border/50" />
              <div className="flex flex-col gap-2">
                <h4 className="px-2 text-xs font-semibold text-muted-foreground">
                  Quick Links
                </h4>
                <ul className="flex flex-col gap-2">
                  {LEARN_LINKS.map((link) => (
                    <ListItem
                      key={link.href}
                      href={link.href}
                      title={link.title}
                    />
                  ))}
                  {SUPPORT_LINKS.map((link) => (
                    <ListItem
                      key={link.href}
                      href={link.href}
                      title={link.title}
                    />
                  ))}
                </ul>
              </div>
            </NavigationMenuContent>
          </NavigationMenuItem>

          <NavigationMenuItem>
            <NavigationMenuTrigger className="h-8 font-normal text-muted-foreground transition-colors duration-200 hover:bg-muted hover:text-foreground motion-reduce:transition-none data-popup-open:[&_svg]:text-primary [&>svg]:duration-200 [&>svg]:motion-reduce:transition-none">
              Resources
            </NavigationMenuTrigger>
            <NavigationMenuContent
              data-header-content="6"
              className="data-ending-style:data-activation-direction=left:translate-x-52 data-ending-style:data-activation-direction=right:-translate-x-52 data-starting-style:data-activation-direction=left:-translate-x-52 data-starting-style:data-activation-direction=right:translate-x-52 no-scrollbar flex max-h-[calc(100dvh-8rem)] w-110 gap-4 overflow-y-auto p-4 duration-300 ease-in-out motion-reduce:translate-none motion-reduce:transition-none"
            >
              <div className="flex flex-1 flex-col gap-2">
                <h3 className="px-2 text-xs font-semibold text-muted-foreground">
                  Learning Resources
                </h3>
                <ul className="flex flex-col gap-2">
                  {LEARN_LINKS.map((link) => (
                    <ListItem
                      key={link.href}
                      href={link.href}
                      title={link.title}
                    />
                  ))}
                </ul>
              </div>
              <div className="flex flex-col gap-2">
                <h3 className="px-2 text-xs font-semibold text-muted-foreground">
                  Support & Help
                </h3>
                <ul className="flex flex-col gap-2">
                  {SUPPORT_LINKS.map((link) => (
                    <ListItem
                      key={link.href}
                      href={link.href}
                      title={link.title}
                    />
                  ))}
                </ul>
              </div>
            </NavigationMenuContent>
          </NavigationMenuItem>

          <NavigationMenuItem>
            <NavigationMenuLink
              className="h-8 text-muted-foreground transition-colors duration-200 hover:text-foreground motion-reduce:transition-none"
              render={<Link href="#pricing" />}
            >
              Pricing
            </NavigationMenuLink>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </nav>
  )
}

function ListItem({
  title,
  children,
  href,
}: {
  title: string
  children?: ReactNode
  href: string
}) {
  return (
    <li>
      <NavigationMenuLink
        className="rounded-lg transition-colors duration-200 motion-reduce:transition-none"
        render={<Link href={href} />}
      >
        <div className="flex flex-col gap-1">
          <div className="leading-none font-medium">{title}</div>
          {children ? (
            <div className="line-clamp-2 text-muted-foreground">{children}</div>
          ) : null}
        </div>
      </NavigationMenuLink>
    </li>
  )
}
```

### `mobile-nav.tsx`

```tsx
"use client"

import { useEffect, useId, useRef, useState } from "react"
import Link from "next/link"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

import { Button } from "@/components/ui/button"
import {
  LEARN_LINKS,
  SOLUTIONS,
  SUPPORT_LINKS,
} from "@/components/header-6/desktop-nav"
import { ChevronDownIcon, MenuIcon, XIcon } from 'lucide-react'

const groups: {
  title: string
  items: { title: string; href: string; description?: string }[]
}[] = [
  { title: "Solutions", items: SOLUTIONS },
  { title: "Quick links", items: [...LEARN_LINKS, ...SUPPORT_LINKS] },
]
export function MobileNav() {
  const [isOpen, setIsOpen] = useState(false)
  const menuId = useId()
  const triggerRef = useRef<HTMLButtonElement>(null)
  const panelRef = useRef<HTMLElement>(null)
  const reducedMotion = useReducedMotion()
  useEffect(() => {
    if (!isOpen) return
    const dismiss = (event: PointerEvent | KeyboardEvent) => {
      if (event instanceof KeyboardEvent) {
        if (event.key !== "Escape") return
        event.preventDefault()
        setIsOpen(false)
        triggerRef.current?.focus()
      } else if (
        event.target instanceof Node &&
        !panelRef.current?.contains(event.target) &&
        !triggerRef.current?.contains(event.target)
      )
        setIsOpen(false)
    }
    const viewportWidth = window.innerWidth
    const resize = () => {
      if (window.innerWidth === viewportWidth) return
      setIsOpen(false)
    }
    document.addEventListener("pointerdown", dismiss)
    document.addEventListener("keydown", dismiss)
    window.addEventListener("resize", resize)
    return () => {
      document.removeEventListener("pointerdown", dismiss)
      document.removeEventListener("keydown", dismiss)
      window.removeEventListener("resize", resize)
    }
  }, [isOpen])
  return (
    <>
      <Button
        ref={triggerRef}
        type="button"
        variant="ghost"
        size="icon-lg"
        aria-label={isOpen ? "Close menu" : "Open menu"}
        aria-expanded={isOpen}
        aria-controls={isOpen ? menuId : undefined}
        onClick={() => setIsOpen(!isOpen)}
        className="md:hidden"
      >
        {isOpen ? (
          <XIcon  aria-hidden="true" />
        ) : (
          <MenuIcon  aria-hidden="true" />
        )}
      </Button>
      <AnimatePresence initial={false}>
        {isOpen && (
          <motion.nav
            data-slot="navigation-menu-popup"
            ref={panelRef}
            id={menuId}
            aria-label="Main navigation"
            initial={{ opacity: 0, y: reducedMotion ? 0 : -8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: reducedMotion ? 0 : -8 }}
            transition={{ duration: reducedMotion ? 0 : 0.2, ease: "easeOut" }}
            className="absolute inset-x-0 top-full z-50 mt-2 no-scrollbar max-h-[calc(100dvh-6rem)] overflow-y-auto rounded-3xl bg-popover p-3 text-popover-foreground shadow-elevated-sm md:hidden"
            onClick={(event) => {
              if ((event.target as HTMLElement).closest("a")) setIsOpen(false)
            }}
          >
            <div className="flex flex-col gap-1">
              <Button
                variant="ghost"
                size="lg"
                className="w-full justify-start"
                render={<Link href="#" role="link" />}
                nativeButton={false}
              >
                Home
              </Button>
              <Button
                variant="ghost"
                size="lg"
                className="w-full justify-start"
                render={<Link href="#pricing" role="link" />}
                nativeButton={false}
              >
                Pricing
              </Button>
              <Button
                variant="ghost"
                size="lg"
                className="w-full justify-start"
                render={<Link href="#sign-in" role="link" />}
                nativeButton={false}
              >
                Sign in
              </Button>
              {groups.map((group) => (
                <details key={group.title} className="group/section">
                  <Button
                    variant="ghost"
                    size="lg"
                    className="w-full justify-between"
                    render={<summary />}
                    nativeButton={false}
                  >
                    {group.title}
                    <ChevronDownIcon  aria-hidden="true" className="text-muted-foreground transition-transform duration-200 group-open/section:rotate-180 motion-reduce:transition-none" data-icon="inline-end" />
                  </Button>
                  <ul className="flex flex-col gap-1 py-1">
                    {group.items.map((item) => (
                      <li key={item.title}>
                        <Button
                          variant="ghost"
                          size="lg"
                          className="h-auto w-full flex-col items-start justify-start py-2.5 text-left whitespace-normal"
                          render={<Link href={item.href} role="link" />}
                          nativeButton={false}
                        >
                          <span className="font-medium">{item.title}</span>
                          {item.description && (
                            <span className="text-xs text-muted-foreground">
                              {item.description}
                            </span>
                          )}
                        </Button>
                      </li>
                    ))}
                  </ul>
                </details>
              ))}
            </div>
          </motion.nav>
        )}
      </AnimatePresence>
    </>
  )
}
```