☰ Navbar Component

A responsive navigation bar with hamburger menu following Framework7's panel pattern. Features a left-sliding panel menu with smooth animations and backdrop overlay.

Features

  • Hamburger button that opens a left-sliding panel
  • Scrollable panel menu for any number of navigation items
  • Active state highlighting with blue accent
  • Smooth staggered animations for menu items
  • Backdrop overlay when panel is open
  • Keyboard accessible (Escape to close)
  • Sticky positioning with backdrop blur
  • Zero external dependencies

Interactive Demo

Click the hamburger menu (☰) in the top-left corner of the page to see the navbar in action. The current navbar you're using is the component itself!

Usage

<script lang="ts">
  import Navbar from '$lib/components/Navbar.svelte';
  import type { MenuItem } from '$lib/types';

  const menuItems: MenuItem[] = [
    {
      label: 'Home',
      href: '/',
      icon: '🏠',
      active: true
    },
    {
      label: 'About',
      href: '/about',
      icon: 'ℹī¸',
      active: false
    }
  ];
</script>

<Navbar {menuItems} />

Props

PropTypeDefaultDescription
menuItemsMenuItem[]requiredArray of navigation menu items
currentPageTitlestring'Home'Title of the current page (not displayed, for accessibility)
logoIconstring'⚡'Logo icon or emoji
logoTextstring'Svelte Templates'Logo text displayed next to icon
logoHrefstring'/'URL the logo links to

MenuItem Interface

interface MenuItem {
  label: string;    // Display text
  href: string;     // Link URL
  icon?: string;    // Optional icon/emoji
  active?: boolean; // Whether this is the active page
}

Implementation Notes

  • Panel Scrolling: The panel automatically becomes scrollable if menu items exceed viewport height
  • Body Scroll Lock: When panel is open, body scrolling is prevented to improve UX
  • Close Triggers: Panel closes when clicking a menu item, clicking overlay, or pressing Escape
  • Responsive: Panel width adapts based on screen size (280px mobile, 320px tablet+)
  • Accessibility: Includes proper ARIA labels, focus management, and reduced motion support

Copy the Component

This component is self-contained and can be copied directly into your project. You'll need:

  • src/lib/components/Navbar.svelte - The component file
  • src/lib/types.ts - MenuItem and NavbarProps interfaces