Daza Navbar

v1.0.0

A reusable, lightweight navigation component for daza.ar websites

🚀 Easy to integrate • 🎨 Highly customizable • 📱 Fully responsive

👆 The navbar above is a live demo! Try the interactive buttons below:

Quick Start

Get up and running in under 2 minutes:

1. Include Dependencies

<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<!-- Daza Navbar -->
<link rel="stylesheet" href="https://navbar.daza.ar/navbar.css">
<script src="https://navbar.daza.ar/config/navbar-config.js"></script>
<script src="https://navbar.daza.ar/navbar.js"></script>

2. Add HTML Container

<div id="navbar-container"></div>

3. Initialize (Optional)

<script>
  // Auto-initializes on page load, or manually:
  const navbar = new DazaNavbar({
    showPdfButton: true,
    pdfCallback: () => console.log('PDF clicked!')
  });
  navbar.render();
</script>

Features

Responsive Design

Automatically adapts to mobile, tablet, and desktop screens with optimized layouts.

Theme Support

Built-in dark/light theme support with CSS custom properties for easy customization.

Zero Dependencies

Pure JavaScript with no external dependencies (except Font Awesome for icons).

Easy Integration

Drop-in solution that works with any website or framework.

Configurable

Customize contacts, buttons, styling, and behavior through simple configuration.

Accessible

Built with accessibility in mind - proper ARIA labels, keyboard navigation, and focus states.

Advanced Usage

Custom Configuration

const customNavbar = new DazaNavbar({
  showPdfButton: true,
  settings: {
    transparentMode: true,
    fixedPosition: true,
    animateEntrance: true
  },
  pdfCallback: () => {
    // Your PDF generation logic
    generatePDF();
  }
});

customNavbar.render('my-navbar-container');

Dynamic Updates

// Update contacts dynamically
navbar.updateContacts([
  { href: 'mailto:new@email.com', icon: 'fa-solid fa-envelope', label: 'Email' }
]);

// Toggle PDF button
navbar.togglePdfButton(true);

// Update configuration
navbar.updateConfig({ 
  settings: { transparentMode: true } 
});

Event Handling

// Listen for navbar events
document.addEventListener('navbar:rendered', (e) => {
  console.log('Navbar rendered!', e.detail.navbar);
});

document.addEventListener('navbar:contact-clicked', (e) => {
  console.log('Contact clicked:', e.detail.contact);
});

Files & CDN

All files are hosted on GitHub Pages and available via CDN:


https://navbar.daza.ar/navbar.css
https://navbar.daza.ar/navbar.js
https://navbar.daza.ar/config/navbar-config.js


https://navbar.daza.ar/examples/basic.html
https://navbar.daza.ar/examples/with-pdf.html

Browser Support

Compatible with all modern browsers: