Header Component

The Header component serves as the primary navigation element for your website. It features a clean, modern design with a responsive layout that adapts seamlessly to different screen sizes.

Key Features

• Company logo and name that links to the home page

• Navigation links that automatically hide on mobile

• Theme selector for dark/light mode switching

• Mobile-friendly hamburger menu

Basic Usage

To implement the header, you’ll need to import and configure it with your navigation links:

1
---
2
import Header from '@/components/NST-components/UI/header/Header.astro';
3

4
const navigation = { 'Home': '/', 'About': '/about', 'Contact': '/contact' };
5
---
6

7
<Header links={navigation} />

Responsive Design

The header automatically adjusts its layout based on screen size:

• Desktop: Full navigation menu with all links visible
• Mobile: Compact design with hamburger menu
• Transitions: Smooth animations for menu opening/closing

Header Component Props API

Search Menu

The header includes a search menu using the pagefind search interface. You must build your site using npm run build before the search menu will work in development mode.