Skip to content
Neat LabsJoin the waitlist

Simple navigation

Brand, three to five links, and one action. Links collapse into a native disclosure menu on phones.

id nav-simple · revision c260468446a7 · catalogue 0.1.0

Preview

Every token this component reads is set by the style, and every font is loaded or a system font.

Desktop, 1280px, lightOpen alone
Phone, 390px, lightOpen alone
Desktop, 1280px, darkOpen alone
Phone, 390px, darkOpen alone

Hover and keyboard focus

The component's own hover and focus styles, switched on for every link and button at once so you can see them without a mouse. In the previews above they work as usual.

Hover, desktop, lightOpen alone
Keyboard focus, desktop, lightOpen alone

Copy it

These two files are exactly what the previews above render. The MCP tool get_component returns the same files.

  1. Save NavSimple.tsx with your components and styles/neat-paper.css with your styles.
  2. Import styles/neat-paper.css once, after @import "tailwindcss" in your global stylesheet.
  3. Make sure Tailwind scans the folder that holds the component.
  4. For dark mode, set data-theme="dark" on the <html> element.
  5. Add <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],600&display=swap"> to the document head.
components/NavSimple.tsx
export interface NavLink {
  label: string;
  href: string;
}

export interface NavSimpleProps {
  brand?: string;
  links?: NavLink[];
  action?: NavLink;
}

const focusRing =
  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--nl-focus)]";

/**
 * Top navigation with a brand, a short link list, and one action. Below the
 * md breakpoint the links move into a native <details> menu, so it works
 * without client JavaScript.
 */
export function NavSimple({
  brand = "Example Studio",
  links = [
    { label: "Product", href: "#product" },
    { label: "Pricing", href: "#pricing" },
    { label: "Changelog", href: "#changelog" },
  ],
  action = { label: "Start a trial", href: "#start" },
}: NavSimpleProps) {
  return (
    <header className="border-b border-[color:var(--nl-line)] bg-[color:var(--nl-canvas)] font-[family-name:var(--nl-font-sans)] text-[color:var(--nl-ink)]">
      <nav aria-label="Main" className="mx-auto flex max-w-6xl items-center justify-between gap-6 px-6 py-4">
        <a href="/" className={`rounded-[var(--nl-radius)] font-[family-name:var(--nl-font-display)] text-lg font-semibold ${focusRing}`}>
          {brand}
        </a>
        <ul className="hidden items-center gap-8 text-sm md:flex">
          {links.map((link) => (
            <li key={link.href}>
              <a href={link.href} className={`rounded-[var(--nl-radius)] text-[color:var(--nl-muted)] hover:text-[color:var(--nl-ink)] ${focusRing}`}>
                {link.label}
              </a>
            </li>
          ))}
        </ul>
        <a
          href={action.href}
          className={`hidden rounded-[var(--nl-radius)] bg-[color:var(--nl-accent)] px-4 py-2 text-sm font-medium text-[color:var(--nl-accent-ink)] hover:opacity-90 md:inline-flex ${focusRing}`}
        >
          {action.label}
        </a>
        <details className="relative md:hidden">
          <summary className={`cursor-pointer list-none rounded-[var(--nl-radius)] border border-[color:var(--nl-line)] px-3 py-1.5 text-sm [&::-webkit-details-marker]:hidden ${focusRing}`}>
            Menu
          </summary>
          <div className="absolute right-0 z-10 mt-2 w-56 rounded-[var(--nl-radius)] border border-[color:var(--nl-line)] bg-[color:var(--nl-surface)] p-2 shadow-lg">
            <ul className="text-sm">
              {links.map((link) => (
                <li key={link.href}>
                  <a href={link.href} className={`block rounded-[var(--nl-radius)] px-3 py-2 hover:bg-[color:var(--nl-canvas)] ${focusRing}`}>
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
            <a
              href={action.href}
              className={`mt-2 block rounded-[var(--nl-radius)] bg-[color:var(--nl-accent)] px-3 py-2 text-center text-sm font-medium text-[color:var(--nl-accent-ink)] ${focusRing}`}
            >
              {action.label}
            </a>
          </div>
        </details>
      </nav>
    </header>
  );
}
styles/neat-paper.css
/* Neat Labs theme "paper" (revision 9e029aa69c45) for nav-simple (revision c260468446a7), catalogue 0.1.0. */
:root {
  --nl-canvas: #F5F1E8;
  --nl-surface: #FFFDF8;
  --nl-ink: #1F1B16;
  --nl-muted: #5E554A;
  --nl-line: #D9D0C1;
  --nl-accent: #B4462C;
  --nl-accent-ink: #FFFFFF;
  --nl-focus: #1F5FBF;
  --nl-font-display: "Fraunces", ui-serif, Georgia, serif;
  --nl-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --nl-radius: 6px;
}

[data-theme="dark"] {
  --nl-canvas: #16130F;
  --nl-surface: #211D18;
  --nl-ink: #F2ECE1;
  --nl-muted: #B3A999;
  --nl-line: #3A342C;
  --nl-accent: #E07A5F;
  --nl-accent-ink: #1A0F0B;
  --nl-focus: #8AB4F8;
}
MCP tool call
{
  "name": "get_component",
  "arguments": {
    "id": "nav-simple",
    "style": "paper"
  }
}

In every style