Navigation Components

Axiom01 offers a suite of navigation components designed to provide clear, accessible, and intuitive ways for users to move through your application. From primary site navigation to breadcrumbs and pagination, these components are built with semantic HTML and flexible styling.

Main Navigation (Navbar)

The main navigation, often referred to as a Navbar, is crucial for site-wide accessibility and user experience. Axiom01 provides a responsive main navigation that adapts to different screen sizes.

<header class="main">
			<nav role="navigation" aria-label="Main Navigation">
					<a href="/" class="brand">[Ax<span class="primary">01</span>]</a>
					<ul class="links">
							<li><a href="#">Home</a></li>
							<li><a href="#">Products</a></li>
							<li><a href="#">About</a></li>
							<li><a href="#">Contact</a></li>
					</ul>
					<div class="actions">
							<button class="button primary">Sign Up</button>
					</div>
			</nav>
	</header>

For detailed documentation on the responsive behavior and JavaScript integration, refer to the Mobile Navbar Component.

Breadcrumbs

Breadcrumbs provide a secondary navigation aid that helps users understand their location within a website's hierarchy.

<nav class="breadcrumb" aria-label="Breadcrumb navigation">
			<ol>
					<li><a href="#">Home</a></li>
					<li><a href="#">Category</a></li>
					<li aria-current="page">Current Page</li>
			</ol>
	</nav>

For more details, including breadcrumbs with icons, see the Breadcrumb Component documentation.

Pagination

Pagination allows users to navigate through large sets of content, breaking it down into manageable pages.

<nav aria-label="Pagination">
			<ul class="pagination">
					<li><a href="#" class="button small">Previous</a></li>
					<li><a href="#" class="button small">1</a></li>
					<li><a href="#" class="button small primary">2</a></li>
					<li><a href="#" class="button small">3</a></li>
					<li><a href="#" class="button small">Next</a></li>
			</ul>
	</nav>

Accessibility Considerations

  • Always use semantic HTML elements like <nav>, <ul>, <li>, and <a> for navigation.
  • Provide meaningful aria-label attributes on <nav> elements to describe the purpose of the navigation to screen reader users.
  • For pagination, use aria-current="page" on the active page link.
  • Ensure all navigation items are keyboard focusable and operable.