Skip to Content
ClientComponentsHeader & Navigation

Header & Navigation

The Header component provides top navigation with responsive mobile menu and optional CTA button.

Location

src/components/Header/Header.tsx
src/components/Header/NavbarButton.tsx

Usage

app/layout.tsx
import Header from '@/components/Header/Header'
 
export default function RootLayout({ children }) {
  return (
    <>
      <Header />
      {children}
    </>
  )
}

Configuration

Edit the navbarItems array:

Header.tsx
const navbarItems: NavbarItem[] = [
  { name: 'Pricing', url: '/#pricing' },
  { name: 'FAQ', url: '/#faq' },
  { name: 'Blog', url: '/blog' },
  { name: 'Updates', url: '/updates' },
]

Adding Dropdown Menus

const navbarItems: NavbarItem[] = [
  { name: 'Home', url: '/' },
  {
    name: 'Products',
    subItems: [
      { name: 'Product 1', url: '/products/1' },
      { name: 'Product 2', url: '/products/2' },
    ],
  },
  { name: 'About', url: '/about' },
]

Site Name

Header.tsx
const navbarTitle = appConfig.siteName

This pulls from your configuration. To override:

const navbarTitle = 'My Custom Name'

CTA Button

Header.tsx
const showNavButton = true  // Show or hide the button

The button is defined in NavbarButton.tsx. Customize it there.

Located at /components/Header/NavbarButton.tsx, this is the CTA button in the top-right corner.

Common customizations:

NavbarButton.tsx
// Link to login page
<Link href="/auth/login" className="btn btn-primary">
  Sign In
</Link>
 
// Link to pricing
<Link href="/#pricing" className="btn btn-primary">
  Get Started
</Link>
 
// External link
<a href="https://app.yoursite.com" className="btn btn-primary">
  Launch App
</a>

Styling

Desktop Navigation

<div className="navbar-center hidden lg:flex">
  <ul className="menu menu-horizontal px-1">
    {/* Nav items */}
  </ul>
</div>
  • Hidden on mobile (hidden lg:flex)
  • Horizontal menu layout
  • DaisyUI menu component

Mobile Menu

<details className="dropdown">
  <summary role="button" className="btn btn-ghost lg:hidden">
    {/* Hamburger icon */}
  </summary>
  <ul className="menu menu-sm dropdown-content">
    {/* Nav items */}
  </ul>
</details>
  • Shows on mobile (lg:hidden)
  • Hamburger icon button
  • Dropdown menu

Complete Example

Header.tsx
const Header: React.FC = () => {
  const navbarItems: NavbarItem[] = [
    { name: 'Features', url: '/#features' },
    { name: 'Pricing', url: '/#pricing' },
    {
      name: 'Resources',
      subItems: [
        { name: 'Documentation', url: '/docs' },
        { name: 'Blog', url: '/blog' },
        { name: 'Changelog', url: '/updates' },
      ],
    },
    { name: 'About', url: '/about' },
  ]
 
  const showNavButton = true
  const navbarTitle = 'My SaaS'
 
  return (
    <div className="navbar bg-base-100 max-w-7xl mx-auto md:px-8 py-5">
      {/* ... */}
    </div>
  )
}

For same-page navigation, use hash links:

{ name: 'Pricing', url: '/#pricing' }

Make sure the target section has a matching id:

<section id="pricing">
  {/* Pricing content */}
</section>

To make the header sticky:

<div className="navbar bg-base-100 sticky top-0 z-50">

Add these classes:

  • sticky - Sticky positioning
  • top-0 - Stick to top
  • z-50 - Above other content

Transparent Header

For a transparent header over the hero:

<div className="navbar bg-transparent absolute top-0 left-0 right-0 z-50">

With a transparent header, ensure text color contrasts with the background. You may need to adjust colors or add a subtle background.

To highlight the current page:

<Link 
  href={item.url}
  className={pathname === item.url ? 'active' : ''}
>
  {item.name}
</Link>

Add this to your component:

'use client'
import { usePathname } from 'next/navigation'
 
const Header: React.FC = () => {
  const pathname = usePathname()
  // ...
}

Responsive Behavior

Mobile (< 1024px)

  • Hamburger menu icon
  • Dropdown navigation
  • Full-width menu items
  • Stacked layout

Desktop (≥ 1024px)

  • Horizontal navigation
  • Dropdown for submenus
  • Inline menu items
  • CTA button on right

Best Practices

  • Keep it to 4-6 main items
  • Use clear, concise labels
  • Group related items in dropdowns
  • Put most important items first

Mobile UX

  • Make tap targets large enough (44px minimum)
  • Ensure menu closes after selection
  • Test on actual devices

Accessibility

  • Use semantic HTML (<nav>, <ul>, <li>)
  • Ensure keyboard navigation works
  • Add ARIA labels for screen readers
  • Maintain focus indicators

Common Customizations

<Link className="btn btn-ghost text-xl" href="/">
  <Image src="/logo.png" alt="Logo" width={32} height={32} />
  {navbarTitle}
</Link>

Change Colors

<div className="navbar bg-primary text-primary-content">
<div className="navbar-center">
  <input 
    type="search" 
    placeholder="Search..." 
    className="input input-bordered w-full max-w-xs"
  />
</div>

Add User Menu

{session ? (
  <div className="dropdown dropdown-end">
    <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
      <div className="w-10 rounded-full">
        <img src={session.user.image} alt="User" />
      </div>
    </label>
    <ul className="menu dropdown-content">
      <li><Link href="/dashboard">Dashboard</Link></li>
      <li><Link href="/settings">Settings</Link></li>
      <li><button onClick={signOut}>Logout</button></li>
    </ul>
  </div>
) : (
  <Link href="/auth/login" className="btn btn-primary">
    Sign In
  </Link>
)}

Next Steps

Last updated on
FooterHero Component