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:

Responsive Navbar with Native Menu

The center region is hidden below 48rem only when .navbar-responsive is present. The native popover owns open state, Escape handling, and light dismissal. popovertarget is the broad native trigger form; outside the supported Popover baseline, use a details disclosure or Drawer containing the same ordinary navigation links.

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

Class Description
.navbar Base navbar styles (required)
.navbar-surface Default surface background
.navbar-surface-container Surface container background
.navbar-surface-container-high Surface container high with subtle shadow
.navbar-surface-container-highest Surface container highest with shadow
.navbar-primary Primary color variant
.navbar-secondary Secondary color variant
.navbar-tertiary Tertiary color variant
.navbar-transparent Transparent background
.navbar-blur Backdrop blur effect (use with transparent)
.navbar-fixed Fixed to top of viewport
.navbar-sticky Sticky positioning
.navbar-static Static positioning (default)
.navbar-compact Compact size with less padding
.navbar-comfortable Comfortable size with more padding
.navbar-borderless Remove bottom border
.navbar-responsive Hide the center region below 48rem and show the mobile trigger

Layout Classes

Class Description
.navbar-start Left section of navbar
.navbar-center Center section of navbar
.navbar-end Right section of navbar
.navbar-brand Brand/logo styles
.navbar-item Navigation item
.navbar-item-active Active navigation item
.navbar-divider Vertical divider
.navbar-hamburger Hamburger menu button
.navbar-menu Mobile menu container

See Also