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

What this style doesn't cover

  • --nl-focus: Signal has no focus color. The package uses var(--nl-ink).
  • dark mode: Signal has no dark mode. The package uses Light values in every mode.
  • Arial Black isn't loaded by this package. It shows only where the font is installed; elsewhere the stack falls back to "Helvetica Neue", Arial, sans-serif.
  • Helvetica Neue isn't loaded by this package. It shows only where the font is installed; elsewhere the stack falls back to Arial, sans-serif.
Desktop, 1280px, lightOpen alone
Phone, 390px, lightOpen alone

Signal has no dark mode, so only light is shown.

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-signal.css with your styles.
  2. Import styles/neat-signal.css once, after @import "tailwindcss" in your global stylesheet.
  3. Make sure Tailwind scans the folder that holds the component.
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-signal.css
/* Neat Labs theme "signal" (revision 5aa0ba0b4008) for nav-simple (revision c260468446a7), catalogue 0.1.0. */
:root {
  --nl-canvas: #FFFFFF;
  --nl-surface: #F4F4F0;
  --nl-ink: #0A0A0A;
  --nl-muted: #3F3F3F;
  --nl-line: #0A0A0A;
  --nl-accent: #FFD400;
  --nl-accent-ink: #0A0A0A;
  --nl-focus: var(--nl-ink); /* fallback: not part of the style */
  --nl-font-display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --nl-font-sans: "Helvetica Neue", Arial, sans-serif;
  --nl-radius: 0px;
}
MCP tool call
{
  "name": "get_component",
  "arguments": {
    "id": "nav-simple",
    "style": "signal"
  }
}

In every style