Header
A responsive header with branding, navigation links and a sign-in button. Includes support for a mobile menu.
...
<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