Navigation

Semantic navigation components for organizing site navigation: horizontal menus, breadcrumbs, and tab navigation. All fully accessible with keyboard support.

Basic Navigation

<nav role="navigation" aria-label="Main navigation">
				<ul>
				<li><a href="/" data-active="true">Home</a></li>
				<li><a href="/products">Products</a></li>
				<li><a href="/docs">Documentation</a></li>
				<li><a href="/contact">Contact</a></li>
				</ul>
				</nav>

Navigation with Icons

<nav role="navigation" aria-label="Navigation with icons">
				<ul>
				<li>
				<a href="/" data-active="true">
				<span class="axicon render" data-name="Home"></span>
				Home
				</a>
				</li>
				</ul>
				</nav>

Tab Navigation

<div role="tablist" aria-label="Content tabs">
				<button role="tab" aria-selected="true" aria-controls="tab-panel-1" id="tab-1" class="button primary">
				Overview
				</button>
				<button role="tab" aria-selected="false" aria-controls="tab-panel-2" id="tab-2" class="button secondary">
				Features
				</button>
				</div>

				<article id="tab-panel-1" role="tabpanel" aria-labelledby="tab-1">
				<h3>Overview</h3>
				<p>Content here</p>
				</article>

				<article id="tab-panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
				<h3>Features</h3>
				<p>Content here</p>
				</article>

Navigation Types

  • Horizontal Navigation - Menu bar with links in a row
  • Navigation with Icons - Icon + text combination for visual clarity
  • Tab Navigation - Switch between related content sections
  • Breadcrumb Navigation - Shows current location in hierarchy
  • Vertical Navigation - Sidebar menu with nested items

Markup Structure

Semantic Navigation

<nav role="navigation" aria-label="Main navigation">
				<ul>
				<li><a href="/">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>

Tab Navigation

<div role="tablist" aria-label="Tabs">
				<button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" class="button">
				Tab 1
				</button>
				<button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" class="button">
				Tab 2
				</button>
				</div>

				<article id="panel-1" role="tabpanel" aria-labelledby="tab-1">
				Content for tab 1
				</article>

				<article id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
				Content for tab 2
				</article>

Key Features

Use Cases

  • Main Site Navigation - Top menu bar with primary links
  • Section Navigation - Tab interface for related content
  • Breadcrumb Trail - Show current page location
  • Sidebar Menu - Vertical navigation in apps
  • Footer Navigation - Links grouped by category
  • Mobile Menu - Hamburger toggle for responsive

Accessibility Guidelines

  • Navigation Region - Use `
  • Semantic Lists - Use `
      `, `
        `, `
      1. ` for grouping
      2. Tab Roles - `role="tab"` on buttons, `role="tabpanel"` on content
      3. Active Indicators - Use `aria-selected="true"` for tabs, `data-active="true"` for links
      4. Keyboard Support - Tab key, Arrow keys, Enter to activate
      5. Screen Readers - Full support for navigation announcement
      6. Skip Links - Provide skip to main content option

Responsive Behavior

This component automatically adapts to different screen sizes:

Mobile (< 768px)

On mobile devices:

  • Optimized for small screens
  • Touch-friendly spacing maintained (44px minimum)
  • Text wraps naturally without overflow
  • Content density optimized for readability

Desktop (1024px+)

On desktop displays:

  • Enhanced visual features
  • Hover states and transitions
  • Full keyboard navigation support
  • Optimal spacing and sizing

Framework Integration

Responsive behavior is automatic:

  • Framework handles media queries
  • No custom CSS required
  • Mobile-first approach applied
  • Accessibility maintained at all sizes

Best Practices

  • Use semantic `
  • Keep navigation labels short and descriptive
  • Always mark current page/tab with active state
  • Provide visual feedback for hover and active states
  • Use button component with `data-variant` for tabs
  • Implement full keyboard navigation support
  • Test with screen readers for proper announcements
  • Ensure sufficient color contrast on all states
  • Use consistent separator characters (/, →, etc.)
  • Match navigation structure to actual site hierarchy

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Accessibility

Axiom01 ensures that the Navigation component meets strict WCAG standards out of the box:

  • Keyboard Navigation - Fully navigable using standard Tab and Arrow key workflows.
  • Screen Reader Support - Requires minimal manual ARIA labeling due to semantic HTML roots.
  • Focus Management - Visible, high-contrast focus indicators without layout shifting.
  • Color Contrast - OKLCH math guarantees perfect WCAG AAA contrast ratios in both light and dark modes.
  • Reduced Motion - Respects system-level prefers-reduced-motion settings for any internal animations.