Header Nav

Responsive header navigation with hamburger menu and sticky option.

← Back to components GitHub Repo Playground

Tip: Resize your browser window to see the responsive hamburger menu.

Basic Usage

Responsive header with navigation links.

Home About Services Contact

<header-nav logo="logo.svg">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</header-nav>

Text Logo

Using a text-based logo with the slot.

MyBrand Products Pricing Docs

<header-nav>
  <span slot="logo-text" style="font-size:1.5rem;font-weight:bold;color:#3b82f6;">MyBrand</span>
  <a href="#">Products</a>
  <a href="#">Pricing</a>
  <a href="#">Docs</a>
</header-nav>

Custom Styling

Use CSS custom properties for theming.

Home Features Pricing Blog

<header-nav
  logo="logo.svg"
  style="
    --header-bg: #1e293b;
    --header-link-color: #e2e8f0;
    --header-link-hover: #3b82f6;
  "
>
  <a href="#">Home</a>
  <a href="#">Features</a>
  <a href="#">Pricing</a>
  <a href="#">Blog</a>
</header-nav>

Taller Header

Customize header height.

Section 1 Section 2 Section 3

<header-nav logo="logo.svg" style="--header-height: 80px;">
  <a href="#">Section 1</a>
  <a href="#">Section 2</a>
  <a href="#">Section 3</a>
</header-nav>

Custom Breakpoint

Change when the hamburger menu appears.

Home About Services Portfolio Blog Contact

<header-nav logo="logo.svg" mobile-breakpoint="1000">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Portfolio</a>
  <a href="#">Blog</a>
  <a href="#">Contact</a>
</header-nav>

Event Handling

Listen for menu toggle events.

Link 1 Link 2 Link 3

        Menu state: closed
      

<header-nav id="eventDemo" logo="logo.svg">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</header-nav>

<script>
  const headerNav = document.querySelector('#eventDemo');
  headerNav.addEventListener('menu-toggle', (e) => {
    console.log('Menu open:', e.detail.open);
  });
</script>