Skip to main content

Navigation Component

Horizontal/vertical navigation, dropdowns, breadcrumbs, and responsive mobile menus

Overview

The Navigation component provides comprehensive navigation solutions for websites and applications. It includes horizontal and vertical navigation, multi-level dropdowns, breadcrumbs, filter navigation, and responsive mobile menus. The component maintains the original A.mphibio.us design patterns while adding modern accessibility features and responsive behavior.

🧭 Multiple Layouts

Horizontal, vertical, and modern navigation layouts with full aiab-dropdown support.

📱 Responsive Design

Automatic mobile adaptation with hamburger menus and touch-friendly interactions.

🏗️ Dropdown Menus

Multi-level dropdowns with hover and click interactions for complex navigation structures.

🍞 Breadcrumb Navigation

Multiple aiab-breadcrumb styles with customizable separators for hierarchy display.

♿ Full Accessibility

Keyboard navigation, focus management, ARIA attributes, and screen reader support.

🎨 Flexible Styling

CSS variables for easy theming, transparent navigation, and sticky positioning.

Horizontal Navigation

Basic Horizontal Menu

Simple Horizontal Navigation
<nav>
  <ul class="aiab-horizontal">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#contact" class="aiab-active">Contact</a></li>
  </ul>
</nav>

Horizontal Menu with Dropdowns

Horizontal Navigation with Dropdown Menus (Hover to see dropdowns)
<nav>
  <ul class="aiab-horizontal">
    <li><a href="#home">Home</a></li>
    <li>
      <a href="#services">Services</a>
      <ul>
        <li><a href="#web-design">Web Design</a></li>
        <li><a href="#development">Development</a></li>
        <li><a href="#seo">SEO Services</a></li>
        <li>
          <a href="#marketing">Marketing</a>
          <ul>
            <li><a href="#social-media">Social Media</a></li>
            <li><a href="#email-marketing">Email Marketing</a></li>
            <li><a href="#content-marketing">Content Marketing</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#portfolio">Portfolio</a>
      <ul>
        <li><a href="#websites">Websites</a></li>
        <li><a href="#applications">Applications</a></li>
        <li><a href="#branding">Branding</a></li>
      </ul>
    </li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Vertical Navigation

Vertical Sidebar Navigation (Hover to see dropdowns)
<nav>
  <ul class="vertical">
    <li><a href="#dashboard">Dashboard</a></li>
    <li>
      <a href="#products">Products</a>
      <ul>
        <li><a href="#add-product">Add Product</a></li>
        <li><a href="#manage-products">Manage Products</a></li>
        <li><a href="#categories">Categories</a></li>
      </ul>
    </li>
    <li>
      <a href="#orders">Orders</a>
      <ul>
        <li><a href="#pending-orders">Pending Orders</a></li>
        <li><a href="#completed-orders">Completed Orders</a></li>
        <li><a href="#refunds">Refunds</a></li>
      </ul>
    </li>
    <li><a href="#customers">Customers</a></li>
    <li><a href="#analytics">Analytics</a></li>
    <li><a href="#settings" class="aiab-active">Settings</a></li>
  </ul>
</nav>

Modern Navigation Component

Modern Amphibious Navigation with Search and Actions
<nav class="amp-nav">
  <div class="aiab-container">
    <div class="amp-nav__wrapper">
      <div class="amp-nav__brand">
        <a href="/" class="amp-nav__logo">
          <span class="amp-nav__icon">🐸</span>
          <span>Amphibious</span>
        </a>
      </div>

      <ul class="amp-nav__menu">
        <li class="amp-nav__item">
          <a href="#docs" class="amp-nav__link amp-nav__link--active">Documentation</a>
        </li>
        <li class="amp-nav__item">
          <a href="#components" class="amp-nav__link">Components</a>
          <div class="amp-nav__dropdown">
            <a href="#cards" class="amp-nav__dropdown-link">Cards</a>
            <a href="#buttons" class="amp-nav__dropdown-link">Buttons</a>
            <a href="#forms" class="amp-nav__dropdown-link">Forms</a>
            <a href="#navigation" class="amp-nav__dropdown-link">Navigation</a>
          </div>
        </li>
        <li class="amp-nav__item">
          <a href="#examples" class="amp-nav__link">Examples</a>
        </li>
        <li class="amp-nav__item">
          <a href="#about" class="amp-nav__link">About</a>
        </li>
      </ul>

      <div class="amp-nav__actions">
        <button class="amp-nav__search">🔍</button>
        <button class="amp-nav__theme">🌙</button>
        <a href="#github" class="amp-nav__github">
          <span>GitHub</span>
          <span class="amp-nav__stars">2.1k</span>
        </a>
      </div>

      <button class="amp-nav__toggle">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
  </div>
</nav>

Breadcrumb Navigation

Different Breadcrumb Styles

Default Breadcrumb (Arrow separator)

Slash Separator

Arrow Separator

Dot Separator

<!-- Default Breadcrumb -->
<ul class="aiab-breadcrumb">
  <li><a href="#home">Home</a></li>
  <li><a href="#docs">Documentation</a></li>
  <li><a href="#components">Components</a></li>
  <li class="aiab-active"><a href="#navigation">Navigation</a></li>
</ul>

<!-- Slash Separator -->
<ul class="aiab-breadcrumb aiab-breadcrumb-slash">
  <li><a href="#home">Home</a></li>
  <li><a href="#products">Products</a></li>
  <li class="aiab-active"><a href="#electronics">Electronics</a></li>
</ul>

<!-- Arrow Separator -->
<ul class="aiab-breadcrumb aiab-breadcrumb-arrow">
  <li><a href="#home">Home</a></li>
  <li><a href="#blog">Blog</a></li>
  <li class="aiab-active"><a href="#2024">2024</a></li>
</ul>

<!-- Dot Separator -->
<ul class="aiab-breadcrumb aiab-breadcrumb-dot">
  <li><a href="#home">Home</a></li>
  <li><a href="#services">Services</a></li>
  <li class="aiab-active"><a href="#web-design">Web Design</a></li>
</ul>

Filter Navigation

Button Group Filter Navigation
Filter by:
All
Websites
Applications
Branding
Photography
<dl class="filter-nav">
  <dt>Filter by:</dt>
  <dd><a href="#all" class="aiab-active">All</a></dd>
  <dd><a href="#websites">Websites</a></dd>
  <dd><a href="#applications">Applications</a></dd>
  <dd><a href="#branding">Branding</a></dd>
  <dd><a href="#photography">Photography</a></dd>
</dl>

Mobile Navigation

Responsive Mobile Navigation with Toggle

The navigation automatically adapts to mobile devices. Try resizing your browser window to see the mobile hamburger menu appear.

<nav>
  <div>
    <div>Your Brand</div>
    <button class="aiab-nav-toggle" aria-expanded="false" aria-label="Toggle navigation">
      <span class="aiab-nav-toggle-icon"></span>
    </button>
  </div>
  <div class="aiab-nav-mobile-hide" id="mobile-nav">
    <ul class="aiab-horizontal">
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</nav>

Navigation States

Different Navigation States

Sticky Navigation

Transparent Navigation

Hero Section Content

Transparent navigation overlays aiab-hero sections beautifully

<!-- Sticky Navigation -->
<nav class="aiab-nav-sticky">
  <ul class="aiab-horizontal">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<!-- Fixed Navigation -->
<nav class="aiab-nav-fixed">...</nav>

<!-- Transparent Navigation -->
<nav class="aiab-nav-transparent">...</nav>

CSS Classes Reference

Base Navigation Classes

Class Description
.horizontal / .aiab-nav-horizontal Horizontal navigation layout
.vertical / .aiab-nav-vertical Vertical navigation layout
.aiab-nav Generic navigation aiab-container
.aiab-active Active/current navigation item

Modern Navigation Classes

Class Description
.amp-nav Modern navigation aiab-container
.amp-nav__wrapper Navigation content wrapper
.amp-nav__brand Brand/logo aiab-container
.amp-nav__logo Logo link
.amp-nav__menu Main navigation menu
.amp-nav__item Navigation menu item
.amp-nav__link Navigation link
.amp-nav__link--active Active navigation link
.amp-nav__dropdown Dropdown menu aiab-container
.amp-nav__dropdown-link Dropdown menu link
.amp-nav__actions Action buttons aiab-container
.amp-nav__toggle Mobile menu toggle

Navigation State Classes

Class Description
.aiab-nav-sticky Sticky positioned navigation
.aiab-nav-fixed Fixed positioned navigation
.aiab-nav-transparent Transparent navigation
.aiab-nav-mobile-hide Hidden on mobile by default
.aiab-is-open Mobile menu open state

Breadcrumb Classes

Class Description
.aiab-breadcrumb Base aiab-breadcrumb aiab-container
.aiab-breadcrumb-slash Slash separator style
.aiab-breadcrumb-arrow Arrow separator style
.aiab-breadcrumb-dot Dot separator style

Mobile Navigation Classes

Class Description
.aiab-nav-toggle Mobile menu toggle button
.aiab-nav-toggle-icon Hamburger icon
.filter-nav Filter button group navigation

JavaScript Integration

// Mobile navigation toggle
function toggleMobileNav() {
  const toggle = document.querySelector('.aiab-nav-toggle');
  const nav = document.querySelector('.aiab-nav-mobile-hide');
  const isOpen = toggle.getAttribute('aria-expanded') === 'true';

  toggle.setAttribute('aria-expanded', !isOpen);
  nav.classList.toggle('aiab-is-open');
}

// Modern navigation with aiab-dropdown management
class AmpNavigation {
  constructor(element) {
    this.nav = element;
    this.toggle = this.nav.querySelector('.amp-nav__toggle');
    this.menu = this.nav.querySelector('.amp-nav__menu');
    this.dropdowns = this.nav.querySelectorAll('.amp-nav__dropdown');
    this.searchButton = this.nav.querySelector('.amp-nav__search');

    this.init();
  }

  init() {
    // Mobile toggle
    if (this.toggle) {
      this.toggle.addEventListener('click', () => this.toggleMobile());
    }

    // Search functionality
    if (this.searchButton) {
      this.searchButton.addEventListener('click', () => this.toggleSearch());
    }

    // Close mobile menu on outside click
    document.addEventListener('click', (e) => {
      if (!this.nav.contains(e.target) && this.menu.classList.contains('amp-nav__menu--open')) {
        this.closeMobile();
      }
    });

    // Keyboard navigation
    this.nav.addEventListener('keydown', (e) => this.handleKeyboard(e));

    // Sticky navigation on scroll
    this.handleScroll();
    window.addEventListener('scroll', () => this.handleScroll());
  }

  toggleMobile() {
    const isOpen = this.menu.classList.contains('amp-nav__menu--open');

    if (isOpen) {
      this.closeMobile();
    } else {
      this.openMobile();
    }
  }

  openMobile() {
    this.menu.classList.add('amp-nav__menu--open');
    this.toggle.classList.add('amp-nav__toggle--open');
    document.body.style.overflow = 'hidden';

    // Create overlay
    const overlay = document.createElement('div');
    overlay.className = 'amp-nav__overlay amp-nav__overlay--visible';
    overlay.addEventListener('click', () => this.closeMobile());
    document.body.appendChild(overlay);
  }

  closeMobile() {
    this.menu.classList.remove('amp-nav__menu--open');
    this.toggle.classList.remove('amp-nav__toggle--open');
    document.body.style.overflow = '';

    // Remove overlay
    const overlay = document.querySelector('.amp-nav__overlay');
    if (overlay) overlay.remove();
  }

  toggleSearch() {
    // Create search aiab-modal
    const searchModal = document.createElement('div');
    searchModal.className = 'amp-nav__search-modal amp-nav__search-modal--open';

    searchModal.innerHTML = `
      <div class="amp-nav__search-content">
        <input type="search" class="amp-nav__search-input" placeholder="Search documentation..." autofocus>
        <button class="amp-nav__search-close">×</button>
        <div class="amp-nav__search-results">
          <div class="amp-nav__search-empty">Start typing to search...</div>
        </div>
      </div>
    `;

    document.body.appendChild(searchModal);

    // Close on outside click or close button
    const closeButton = searchModal.querySelector('.amp-nav__search-close');
    closeButton.addEventListener('click', () => searchModal.remove());

    searchModal.addEventListener('click', (e) => {
      if (e.target === searchModal) searchModal.remove();
    });

    // Search functionality
    const searchInput = searchModal.querySelector('.amp-nav__search-input');
    searchInput.addEventListener('input', (e) => this.performSearch(e.target.value));
  }

  performSearch(query) {
    // Implement your search logic here
    console.log('Searching for:', query);
  }

  handleKeyboard(e) {
    // Implement keyboard navigation for dropdowns
    if (e.key === 'Escape') {
      // Close any open dropdowns
      this.dropdowns.forEach(dropdown => {
        dropdown.classList.remove('amp-nav__dropdown--open');
      });
    }
  }

  handleScroll() {
    const scrollY = window.scrollY;

    if (scrollY > 100) {
      this.nav.classList.add('amp-nav--sticky');
    } else {
      this.nav.classList.remove('amp-nav--sticky');
    }

    // Hide/show navigation based on scroll direction
    if (scrollY > this.lastScrollY && scrollY > 500) {
      this.nav.classList.add('amp-nav--hidden');
    } else {
      this.nav.classList.remove('amp-nav--hidden');
    }

    this.lastScrollY = scrollY;
  }
}

// Initialize navigation
document.addEventListener('DOMContentLoaded', () => {
  const navElement = document.querySelector('.amp-nav');
  if (navElement) {
    new AmpNavigation(navElement);
  }

  // Legacy navigation toggle
  const navToggle = document.querySelector('.aiab-nav-toggle');
  if (navToggle) {
    navToggle.addEventListener('click', toggleMobileNav);
  }
});

Best Practices

Structure Guidelines

Responsive Design

Accessibility

Performance