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: June 7