Skip to content
jezuiMake it yours
← Blocks

Marketing Navigation

A complete marketing navigation section, ready to adapt to your product.

Open ↗

Make it yours.

Install the editable source and its dependencies into your React + Tailwind project.

Scroll horizontally for long lines
pnpm dlx shadcn@4.0.8 add http://localhost:3000/r/marketing-navigation.json

Use it

Scroll horizontally for long lines
"use client";
import {MarketingNavigation} from '@/components/jez-ui/blocks/marketing-navigation';

export default function Example(){

return <><MarketingNavigation/></>;
}

Props & types

Scroll horizontally for long lines
{
  brand?: string;
  items?: { label: string; href: string }[];
  home?: string;
  className?: string;
}

Source

View 3 source files

registry/blocks/marketing-navigation.tsx

Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "../ui/utils";
import { NavigationMenu } from "../ui/navigation-menu";
export function MarketingNavigation({
  brand = "Forma",
  items = [
    { label: "Features", href: "#features" },
    { label: "Pricing", href: "#pricing" },
    { label: "Contact", href: "#contact" },
  ],
  home = "/",
  className,
}: {
  brand?: string;
  items?: { label: string; href: string }[];
  home?: string;
  className?: string;
}) {
  return (
    <header
      className={cn(
        "flex flex-wrap items-center justify-between gap-4 border-b border-border py-5",
        className,
      )}
    >
      <a href={home} className="font-display text-2xl font-bold no-underline">
        {brand}
      </a>
      <NavigationMenu items={items} />
    </header>
  );
}

registry/ui/utils.ts

Scroll horizontally for long lines
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
  return twMerge(clsx(values));
}

registry/ui/navigation-menu.tsx

Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "./utils";
import { NavigationMenu as Primitive } from "radix-ui";
export function NavigationMenu({
  items,
  className,
}: {
  items: { label: string; href: string }[];
  className?: string;
}) {
  return (
    <Primitive.Root className={cn("", className)}>
      <Primitive.List className="flex flex-wrap gap-1">
        {items.map((i) => (
          <Primitive.Item key={i.href}>
            <Primitive.Link
              href={i.href}
              className="block rounded-lg px-3 py-2 text-sm hover:bg-muted"
            >
              {i.label}
            </Primitive.Link>
          </Primitive.Item>
        ))}
      </Primitive.List>
    </Primitive.Root>
  );
}

Dependencies

clsx@2.1.1 · tailwind-merge@3.5.0 · radix-ui@1.6.7

Accessibility & behaviour

Provide meaningful labels and preserve keyboard focus styles. Check contrast when customising theme colours.

Read the accessibility and performance guide →