The Amphibious navigation system provides flexible, responsive navigation components that work across all devices. Choose from horizontal, vertical, tabbed, or mobile-first patterns.

Key Features: Responsive design, dropdown support, mobile menu, sticky behavior, search integration, theme toggle, keyboard navigation, and ARIA compliance.

Horizontal Navigation

The most common navigation pattern for websites and applications.

Basic Horizontal Nav

Basic Navigation
<nav>
  <ul class="horizontal">
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Horizontal Nav with Dropdowns

Navigation with Dropdown Menus

Modern Navigation Component

The new Amphibious 2.0 navigation component with advanced features.

Full Featured Navigation

// Create a modern navigation component
const nav = amp.createNavigation('#nav-container', {
  sticky: true,
  transparent: false,
  searchEnabled: true,
  themeToggle: true,
  githubUrl: 'https://github.com/your-org/amphibious',
  githubStars: '1.2k',
  currentPath: '/docs/'
});

Navigation Styles

Style 1: Gradient Navigation

Style 2: Minimal with Accent

Style 3: Dark Navigation

Vertical Navigation

Ideal for sidebars, admin panels, and documentation sites.

Main Content Area

The vertical navigation works great for admin interfaces and documentation sites where you need to display many navigation items in a hierarchical structure.

<nav>
  <ul class="vertical">
    <li><a href="#" class="active">Dashboard</a></li>
    <li>
      <a href="#">Products</a>
      <ul>
        <li><a href="#">All Products</a></li>
        <li><a href="#">Add New</a></li>
      </ul>
    </li>
  </ul>
</nav>

Help users understand their location within the site hierarchy.

Default Breadcrumbs

Alternative Separators

<nav>
  <ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#" class="active">Current Page</a></li>
  </ul>
</nav>

<!-- Alternative separators -->
<ul class="breadcrumb breadcrumb-slash">...</ul>
<ul class="breadcrumb breadcrumb-arrow">...</ul>
<ul class="breadcrumb breadcrumb-dot">...</ul>

Tab Navigation

Organize content into switchable panes.

Overview Tab

This is the overview content. Tab navigation is perfect for organizing related content into logical sections.

Features Tab

Detailed feature information would go here. Users can switch between tabs without page reload.

Documentation Tab

Technical documentation and API references would be displayed in this section.

Support Tab

Contact information and support resources are available in this tab.

Mobile Navigation

Responsive navigation patterns optimized for mobile devices.

Mobile Menu Demo

Mobile Device Preview

Mobile navigation collapses into a hamburger menu on small screens. Tap the menu icon to toggle.

Responsive Behavior: The navigation automatically adapts to screen size. Horizontal menus become vertical, dropdowns become accordions, and complex navigation collapses into a mobile-friendly hamburger menu.

Mega Menu

Large dropdown menus for complex site structures.

Mega Menu Navigation

Navigation that stays visible when scrolling.

Scroll this area

The navigation above will stick to the top when you scroll.

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Keep scrolling to see the sticky navigation in action...

More content here...

Even more content...

<nav class="nav-sticky">
  <ul class="horizontal">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
  </ul>
</nav>

Filter Navigation

Button group style navigation for filtering content.

<nav>
  <dl class="filter-nav">
    <dt>Filter:</dt>
    <dd><a href="#" class="active">All</a></dd>
    <dd><a href="#">Popular</a></dd>
    <dd><a href="#">Recent</a></dd>
  </dl>
</nav>

Best Practices

Accessibility

Performance

Mobile Considerations

SEO