Landing Page Navigation / Header

This component displays a top navigation / header bar with a main menu and a logo. On smaller screens, the main menu is hidden and a menu is displayed instead. The menu will open a side sheet with the main menu items.

Usage

import { LandingHeader } from '@/components/landing/LandingHeader';
import { LandingHeaderMenuItem } from '@/components/landing/LandingHeaderMenuItem';

<LandingHeader>
  <LandingHeaderMenuItem href="#" label="Home" />
  <LandingHeaderMenuItem href="#" label="Pricing" />
  <LandingHeaderMenuItem href="#" label="Articles" />
</LandingHeader>

Examples

With custom logo

With background

This adds a background to the navigation bar (centered on larger screens).

With button

With icon button (or other elements)

Variant

API Reference

More Examples

For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.