Header

A responsive header with branding, navigation links and a sign-in button. Includes support for a mobile menu.

Header Component


 
...
 
<Header navItems={/* Provide an array of NavItem objects */} />

Navigation items need to be set dynamically by passing a navItems props. You can set this in @/config/navigation.ts :

export const landingNav: NavItem[] = [
  {
    title: 'Features',
    href: '/#features',
  },
  {
    title: 'Reviews',
    href: '/#reviews',
  },
  {
    title: 'Pricing',
    href: '/#pricing',
  },
];

And then import this variable and pass it when using the header:

import Header from "@/components/Header";
import { landingNav } from "@/config/navigation";
 
...
 
<Header navItems={landingNav} />

This lets you customize what navigation links to show on a specific page. (To show no links, pass in [].)


Last Updated: March 5
Full Page CTAHero