Navbar

Material Design 3 navigation bar component for creating responsive headers

Navbar

A navigation bar provides primary navigation for your application. @duskmoon-dev/core provides a flexible navbar component with multiple variants and layouts.

Basic Usage

Basic Navbar

Variants

Surface Variants

Different surface levels for visual hierarchy:

Surface Variants

Color Variants

Use theme colors for your navbar:

Color Variants

Transparent Navbar

For overlay designs:

Transparent Navbar

Transparent with Blur

Transparent navbar with backdrop blur effect:

Transparent with Blur

Positioning

Fixed Position

Fixed to the top of the viewport:

Fixed Position

Sticky Position

Stays at the top when scrolling:

Sticky Position

Static Position

Default static positioning:

Static Position

Layout Sections

Three-Section Layout

Use navbar-start, navbar-center, and navbar-end for flexible layouts:

Three-Section Layout

Start and End Only

Start and End Only

Active Items

Highlight the current page:

Active Items

Size Variants

Compact

Smaller padding for dense interfaces:

Compact

Comfortable

Larger padding for better touch targets:

Comfortable

With Dividers

Add visual separation between sections:

With Dividers

Borderless

Remove the bottom border:

Borderless

Mobile Menu

Responsive navbar with hamburger menu:

Mobile Menu

With Icons

Add icons to navbar items:

With Icons

Best Practices

Organize navigation items by importance:

  1. Brand: Always on the left in navbar-start
  2. Primary navigation: Center or right side
  3. User actions: Far right in navbar-end

Navigation Hierarchy

Accessibility

  • Use semantic <nav> element
  • Provide aria-label for hamburger buttons
  • Ensure sufficient color contrast
  • Support keyboard navigation

Accessibility

Fixed Navbar Spacing

When using navbar-fixed, add top padding to your content:

Fixed Navbar Spacing

Framework Examples

React

interface NavbarProps {
  variant?: 'surface' | 'primary' | 'secondary' | 'tertiary' | 'transparent';
  position?: 'static' | 'fixed' | 'sticky';
  children: React.ReactNode;
}

export function Navbar({ variant = 'surface', position = 'static', children }: NavbarProps) {
  return (
    <nav className={`navbar navbar-${variant} navbar-${position}`}>
      {children}
    </nav>
  );
}

// Usage
<Navbar variant="primary" position="fixed">
  <div className="navbar-start">
    <a href="/" className="navbar-brand">Brand</a>
  </div>
  <div className="navbar-end">
    <a href="#" className="navbar-item">Home</a>
    <a href="#" className="navbar-item">About</a>
  </div>
</Navbar>

Vue

<template>
  <nav :class="`navbar navbar-${variant} navbar-${position}`">
    <slot />
  </nav>
</template>

<script setup>
defineProps({
  variant: {
    type: String,
    default: 'surface'
  },
  position: {
    type: String,
    default: 'static'
  }
})
</script>

<!-- Usage -->
<Navbar variant="primary" position="fixed">
  <div class="navbar-start">
    <a href="/" class="navbar-brand">Brand</a>
  </div>
  <div class="navbar-end">
    <a href="#" class="navbar-item">Home</a>
    <a href="#" class="navbar-item">About</a>
  </div>
</Navbar>

API Reference

ClassDescription
.navbarBase navbar styles (required)
.navbar-surfaceDefault surface background
.navbar-surface-containerSurface container background
.navbar-surface-container-highSurface container high with subtle shadow
.navbar-surface-container-highestSurface container highest with shadow
.navbar-primaryPrimary color variant
.navbar-secondarySecondary color variant
.navbar-tertiaryTertiary color variant
.navbar-transparentTransparent background
.navbar-blurBackdrop blur effect (use with transparent)
.navbar-fixedFixed to top of viewport
.navbar-stickySticky positioning
.navbar-staticStatic positioning (default)
.navbar-compactCompact size with less padding
.navbar-comfortableComfortable size with more padding
.navbar-borderlessRemove bottom border

Layout Classes

ClassDescription
.navbar-startLeft section of navbar
.navbar-centerCenter section of navbar
.navbar-endRight section of navbar
.navbar-brandBrand/logo styles
.navbar-itemNavigation item
.navbar-item-activeActive navigation item
.navbar-dividerVertical divider
.navbar-hamburgerHamburger menu button
.navbar-menuMobile menu container

See Also