Zoeken...  ⌘K GitHub

NavMinimal Navigation

Ultra-minimale navigatie. Alleen logo en essentiële links.

/nav-minimal
src/components/nav/NavMinimal.astro
---
/**
 * NavMinimal
 * Minimale navigatie — logo links, weinig links, geen chrome.
 * Ideaal voor landingspagina's of portfolio.
 */
interface Props {
  logo: string;
  links?: { label: string; href: string }[];
  cta?: { label: string; href: string };
}
const { logo, links = [], cta } = Astro.props;
---
<header class="nm">
  <nav class="nm-inner">
    <a href="/" class="nm-logo">{logo}</a>
    <div class="nm-right">
      {links.map(l => <a href={l.href} class="nm-link">{l.label}</a>)}
      {cta && <a href={cta.href} class="nm-cta">{cta.label} →</a>}
    </div>
  </nav>
</header>
<style>
  .nm { background: #fff; border-bottom: 1px solid #f1f5f9; }
  .nm-inner { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 60px; }
  .nm-logo { font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; color: #0a0a0a; text-decoration: none; }
  .nm-right { display: flex; align-items: center; gap: 1.5rem; }
  .nm-link { font-size: 0.875rem; color: #6b7280; text-decoration: none; transition: color 0.15s; }
  .nm-link:hover { color: #0a0a0a; }
  .nm-cta { font-size: 0.875rem; font-weight: 600; color: var(--color-accent,#6366f1); text-decoration: none; }
</style>

Props

Prop Type Default Beschrijving
logo * string Merknaam
links { label: string; href: string }[] Navigatielinks
cta { label: string; href: string } CTA link

* = verplicht