Navbar

The Navbar component provides a primary navigation bar/header with responsive design. It includes slots for branding, navigation items, and actions, plus a mobile-friendly hamburger menu.

Installation

npm install @duskmoon-dev/el-navbar

Usage

import '@duskmoon-dev/el-navbar/register';
<el-dm-navbar>
  <a slot="start" href="/">My App</a>
  <a href="/features">Features</a>
  <a href="/pricing">Pricing</a>
  <a href="/about">About</a>
  <el-dm-button slot="end" variant="primary">Sign Up</el-dm-button>
</el-dm-navbar>

Live Demo

Navbar Demo

BrandHomeProductsAboutContact

Properties

PropertyTypeDefaultDescription
fixedbooleanfalseFixes the navbar to the top of the viewport
elevatedbooleanfalseAdds shadow elevation
color'surface' | 'primary' | 'secondary' | 'tertiary''surface'Navbar color variant

Methods

MethodDescription
openMobileMenu()Opens the mobile menu
closeMobileMenu()Closes the mobile menu

Events

EventDetailDescription
menu-toggle{ open: boolean }Fired when mobile menu is toggled

Event Handling

const navbar = document.querySelector('el-dm-navbar');
navbar.addEventListener('menu-toggle', (e) => {
  console.log('Mobile menu open:', e.detail.open);
});

Color Variants

<el-dm-navbar color="surface">Default surface color</el-dm-navbar>
<el-dm-navbar color="primary">Primary color</el-dm-navbar>
<el-dm-navbar color="secondary">Secondary color</el-dm-navbar>
<el-dm-navbar color="tertiary">Tertiary color</el-dm-navbar>

Color Variants

PrimaryLinkSecondaryLink

Fixed Navbar

When fixed is set, the navbar sticks to the top of the viewport and automatically adds elevation on scroll:

<el-dm-navbar fixed>
  <a slot="start" href="/">Brand</a>
  <!-- Navigation items -->
</el-dm-navbar>

Mobile Menu

The navbar includes a hamburger button that appears on smaller screens. Use the mobile slot to provide content for the mobile menu:

<el-dm-navbar>
  <a slot="start" href="/">Brand</a>
  <a href="/features">Features</a>
  <a href="/pricing">Pricing</a>

  <!-- Mobile menu content -->
  <div slot="mobile">
    <a href="/features">Features</a>
    <a href="/pricing">Pricing</a>
    <a href="/about">About</a>
  </div>
</el-dm-navbar>

Slots

SlotDescription
startLogo or brand content (left side)
defaultNavigation items (center)
endActions or icons (right side)
mobileContent for the mobile dropdown menu

CSS Parts

PartDescription
navbarThe navbar container
contentThe content wrapper
startThe start slot wrapper
centerThe center/default slot wrapper
endThe end slot wrapper
hamburgerThe mobile hamburger button
mobile-menuThe mobile menu container

Styling Example

el-dm-navbar::part(navbar) {
  background: linear-gradient(to right, #667eea, #764ba2);
  color: white;
}

el-dm-navbar::part(hamburger) {
  color: white;
}

el-dm-navbar::part(mobile-menu) {
  background: #667eea;
}

Responsive Behavior

  • Desktop (above 768px): Shows center navigation items, hamburger is hidden
  • Mobile (768px and below): Hides center navigation items, shows hamburger button

Accessibility

  • Uses <nav> element with role="navigation"
  • Hamburger button has aria-label and aria-expanded attributes
  • Mobile menu has aria-hidden when closed
  • Animated hamburger icon provides visual feedback
  • All interactive elements are keyboard accessible