Founderflow Logo

Header Customization

Complete guide to customizing the header component in your Founderflow Boilerplate. Learn how to modify navigation, branding, and responsive behavior.

Overview

🧭

Header Component System

The header component is fully customizable with support for different layouts, navigation styles, branding options, and responsive behavior. It adapts to different screen sizes and user states.

✓

Responsive Design

Mobile-first approach with collapsible navigation

✓

Brand Customization

Logo, colors, and branding elements

✓

Navigation Menus

Customizable navigation items and dropdowns

✓

User Authentication

Sign in/out buttons and user menu

✓

Theme Support

Light/dark mode toggle and theme switching

✓

Accessibility

ARIA labels, keyboard navigation, and screen reader support

Header Structure

Component Hierarchy

The header component is organized into logical sections:

components/layout/Header.tsx
<header className="header-container">
<div className="header-content">
<Logo />
<Navigation />
<UserMenu />
<ThemeToggle />
<MobileMenu />
</div>
</header>

Responsive Breakpoints

Header adapts to different screen sizes:

Mobile (< 768px)

  • • Hamburger menu
  • • Logo only
  • • User avatar
  • • Theme toggle

Tablet (768px - 1024px)

  • • Collapsible navigation
  • • Logo + brand name
  • • User menu
  • • Theme toggle

Desktop (> 1024px)

  • • Full navigation
  • • Logo + brand name
  • • User dropdown
  • • Theme toggle

Customization Options

Logo Customization

Customize your logo and branding elements:

components/layout/Logo.tsx
import Image from 'next/image';
import Link from 'next/link';
import { SiteSettings } from '@/lib/config/settings';
export default function Logo() {
return (
<Link href="/" className="flex items-center space-x-2">
<Image
src={SiteSettings.logoUrlLight}
alt={SiteSettings.name}
width={120}
height={40}
className="h-8 w-auto"
/>
<span className="text-xl font-bold text-[#015064]">
{SiteSettings.name}
</span>
</Link>
);
}

Navigation Customization

Customize navigation items and structure:

lib/config/navigation.ts
export const navigationItems = [
{
label: 'Home',
href: '/',
icon: 'Home'
},
{
label: 'Features',
href: '/#features',
icon: 'Star'
},
{
label: 'Pricing',
href: '/#pricing',
icon: 'DollarSign'
},
{
label: 'Blog',
href: '/blog',
icon: 'BookOpen'
}
];

Styling Customization

Header Styles

Customize header appearance with CSS classes:

components/layout/Header.tsx
<header className="
sticky top-0 z-50
bg-white/95 backdrop-blur-md
border-b border-gray-200
shadow-sm
">
<div className="
max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
">
<div className="
flex justify-between items-center h-16
">
// Header content
</div>
</div>
</header>

Theme Customization

Customize header colors and themes:

tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#f0f9ff',
500: '#00637B',
900: '#015064'
}
}
}
}
};

Next Steps

Now that you understand header customization, explore these related areas:

Hero Customization

Learn how to customize your hero section.

Features Customization

Customize your features section layout and content.