KitlenoKitlenov2.0.0

Navigation / Navbar

Navbar

Navigation bars anchor a page and let users move between sections. These ones are minimalistic, responsive, and collapse into a mobile menu on smaller screens.

SaaS Navbar

A minimalistic, responsive navigation bar with a logo, centered links, and a sign-in/CTA pair. Collapses into a slide-down menu on mobile.

SaasNavbar.jsx
'use client'

import { useState } from 'react'
import Link from 'next/link'
import { Menu, X } from 'lucide-react'

// Add or edit your navigation links here
const NAV_LINKS = [
  { name: 'Product', href: '#' },
  { name: 'Features', href: '#' },
  { name: 'Pricing', href: '#' },
  { name: 'Docs', href: '#' },
]

export default function SaasNavbar() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <nav className="@container relative w-full rounded-2xl border border-[#E0E0E0] dark:border-[#4C4C4C] bg-white/80 dark:bg-[#1e1e1e]/80 backdrop-blur-md">
      <div className="flex items-center justify-between px-5 py-3">
        {/* Swap the logo mark and product name below */}
        <Link href="#" className="flex items-center gap-2 cursor-pointer">
          <span className="w-6 h-6 rounded-lg bg-[#7e60d6]" />
          <span className="text-[15px] font-semibold text-[#121212] dark:text-[#f1f1f1]">Kitleno</span>
        </Link>

        <div className="hidden @3xl:flex items-center gap-8">
          {NAV_LINKS.map((link) => (
            <Link
              key={link.name}
              href={link.href}
              className="text-sm font-medium text-[#4b4b4b] dark:text-[#b5b5b5] hover:text-[#121212] dark:hover:text-[#f1f1f1] transition-colors cursor-pointer">
              {link.name}
            </Link>
          ))}
        </div>

        <div className="hidden @3xl:flex items-center gap-4">
          <Link href="#" className="text-sm font-medium text-[#4b4b4b] dark:text-[#b5b5b5] hover:text-[#121212] dark:hover:text-[#f1f1f1] transition-colors cursor-pointer">
            Sign in
          </Link>
          <Link
            href="#"
            className="bg-[#E8E8E8] border-2 border-[#E0E0E0] py-2 px-4 rounded-full hover:bg-[#F1F1F1] text-sm font-medium text-[#121212] dark:text-[#f1f1f1] dark:bg-[#2A2A2A] dark:border-[#4C4C4C] dark:hover:bg-[#1E1E1E] transition-colors cursor-pointer">
            Get started
          </Link>
        </div>

        <button
          onClick={() => setIsOpen(!isOpen)}
          className="@3xl:hidden flex items-center justify-center w-9 h-9 rounded-lg text-[#121212] dark:text-[#f1f1f1] cursor-pointer"
          aria-label="Toggle menu">
          {isOpen ? <X size={20} /> : <Menu size={20} />}
        </button>
      </div>

      {isOpen && (
        <div className="@3xl:hidden overflow-hidden border-t border-[#E0E0E0] dark:border-[#4C4C4C]">
          <div className="flex flex-col gap-4 px-5 py-5">
            {NAV_LINKS.map((link) => (
              <Link
                key={link.name}
                href={link.href}
                onClick={() => setIsOpen(false)}
                className="text-sm font-medium text-[#4b4b4b] dark:text-[#b5b5b5] hover:text-[#121212] dark:hover:text-[#f1f1f1] cursor-pointer">
                {link.name}
              </Link>
            ))}
            <div className="h-px bg-[#E0E0E0] dark:bg-[#4C4C4C]" />
            <Link href="#" onClick={() => setIsOpen(false)} className="text-sm font-medium text-[#4b4b4b] dark:text-[#b5b5b5] cursor-pointer">
              Sign in
            </Link>
            <Link
              href="#"
              onClick={() => setIsOpen(false)}
              className="bg-[#E8E8E8] border-2 border-[#E0E0E0] py-2 px-4 rounded-full text-center text-sm font-medium text-[#121212] dark:text-[#f1f1f1] dark:bg-[#2A2A2A] dark:border-[#4C4C4C] cursor-pointer">
              Get started
            </Link>
          </div>
        </div>
      )}
    </nav>
  )
}

Minimal Navbar

A clean navigation bar with centered links and generous whitespace. No shadows or gradients, just hairline borders and subtle color. Collapses into a slide-down menu on mobile.

MinimalNavbar.jsx
'use client'

import { useState } from 'react'
import Link from 'next/link'
import { Menu, X } from 'lucide-react'

// Add or edit your navigation links here
const NAV_LINKS = [
  { name: 'Overview', href: '#' },
  { name: 'Features', href: '#' },
  { name: 'Pricing', href: '#' },
  { name: 'Support', href: '#' },
]

export default function MinimalNavbar() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <nav className="@container relative w-full border-b border-[#E5E5E5] dark:border-[#3A3A3A] bg-white/70 dark:bg-[#161616]/70 backdrop-blur-xl">
      <div className="flex items-center justify-between px-6 py-4">
        {/* Swap the wordmark below */}
        <Link href="#" className="text-[15px] font-medium tracking-tight text-[#1d1d1f] dark:text-[#f5f5f7] cursor-pointer">
          Kitleno
        </Link>

        <div className="hidden @3xl:flex flex-1 items-center justify-center gap-10">
          {NAV_LINKS.map((link) => (
            <Link
              key={link.name}
              href={link.href}
              className="text-[12px] font-normal tracking-wide text-[#6e6e73] hover:text-[#1d1d1f] dark:text-[#a1a1a6] dark:hover:text-[#f5f5f7] transition-colors cursor-pointer">
              {link.name}
            </Link>
          ))}
        </div>

        <div className="hidden @3xl:flex items-center gap-5">
          <Link href="#" className="text-[12px] font-normal text-[#6e6e73] hover:text-[#1d1d1f] dark:text-[#a1a1a6] dark:hover:text-[#f5f5f7] transition-colors cursor-pointer">
            Sign in
          </Link>
          <Link
            href="#"
            className="border border-black/15 dark:border-white/20 rounded-full px-4 py-1.5 text-[12px] font-medium text-[#1d1d1f] dark:text-[#f5f5f7] hover:bg-black/[0.03] dark:hover:bg-white/[0.06] transition-colors cursor-pointer">
            Get started
          </Link>
        </div>

        <button
          onClick={() => setIsOpen(!isOpen)}
          className="@3xl:hidden flex items-center justify-center w-9 h-9 rounded-lg text-[#1d1d1f] dark:text-[#f5f5f7] cursor-pointer"
          aria-label="Toggle menu">
          {isOpen ? <X size={20} /> : <Menu size={20} />}
        </button>
      </div>

      {isOpen && (
        <div className="@3xl:hidden overflow-hidden border-t border-[#E5E5E5] dark:border-[#3A3A3A]">
          <div className="flex flex-col items-center gap-4 px-6 py-6">
            {NAV_LINKS.map((link) => (
              <Link
                key={link.name}
                href={link.href}
                onClick={() => setIsOpen(false)}
                className="text-[12px] font-normal tracking-wide text-[#6e6e73] hover:text-[#1d1d1f] dark:text-[#a1a1a6] dark:hover:text-[#f5f5f7] cursor-pointer">
                {link.name}
              </Link>
            ))}
            <div className="h-px w-full bg-[#E5E5E5] dark:bg-[#3A3A3A]" />
            <Link href="#" onClick={() => setIsOpen(false)} className="text-[12px] font-normal text-[#6e6e73] dark:text-[#a1a1a6] cursor-pointer">
              Sign in
            </Link>
            <Link
              href="#"
              onClick={() => setIsOpen(false)}
              className="border border-black/15 dark:border-white/20 rounded-full px-4 py-1.5 text-center text-[12px] font-medium text-[#1d1d1f] dark:text-[#f5f5f7] cursor-pointer">
              Get started
            </Link>
          </div>
        </div>
      )}
    </nav>
  )
}