Header

The Header component is a customizable header that can include a logo, app name (both pulled from config.js), navigation links, and a call-to-action button. It is designed to be responsive and can adapt to different screen sizes automatically (dropdown menu on mobile).

Usage

The component automatically pulls the logo and app name from config.js if they are defined, so you can simply import the component and use it like this:

javascript
1import Header from '@/components/organisms/Header';
2
3<Header
4    navLinks={[
5        { title: 'Home', href: '/' },
6        { title: 'About', href: '/about' },
7        { title: 'Contact', href: '/contact' },
8    ]}
9    ctaButton={{
10        label: 'Get Started',
11        href: '/get-started',
12    }}
13/>

Since Header uses TextLink and Button components, you can pass any prop that they accept to customize the header, for example:

javascript
1// For nav links
2{
3    title: 'Home',
4    href: '/',
5    props: { underline: true, fade: true },
6}
7
8// For CTA button
9{
10    label: 'Get Started',
11    href: '/get-started',
12    props: { size: 'lg', color: 'primary' },
13}

Props

Examples

Default Header

Header Hiding App Name

Header with Custom Nav Links and CTA Button

Header with Custom Background Color