Header

Design a clear navigation

The Header component provides your site’s primary navigation, including logo, main links, and a mobile menu toggle. It’s responsive by default and works across all screen sizes.

1. Customize logo and brand name

Update the logo and text inside the Header component. You can use either an image or a text-based logo depending on your brand style.

<Link href="/" className="flex items-center gap-2">
  <Logo className="h-6 w-6" />
  <span className="font-semibold text-lg">aSaaSin</span>
</Link>

2. Adjust navigation links

Modify or extend the default links. Each link is wrapped with Link and styled for hover/focus states.

<nav className="hidden md:flex gap-6">
  <Link href="/features">Features</Link>
  <Link href="/pricing">Pricing</Link>
  <Link href="/docs">Docs</Link>
</nav>

3. Enable mobile toggle

On smaller screens, the navigation collapses into a menu button that toggles a dropdown. You can customize the toggle logic or menu content.

<Button variant="ghost" size="icon" onClick={toggleMobileNav}>
  <MenuIcon className="w-5 h-5" />
</Button>

What’s next

Next, let’s configure your Hero section - the first impression of your product.