Mobile Navbar Component

Live Example

Usage Guidelines

To implement the Mobile Navbar, use the following semantic HTML structure within your main site header:

• The main header element should have the class .main and the attribute data-component="mobile-navbar". This attribute is crucial for Axiom01's JavaScript to initialize the mobile toggle functionality.
• Include a logo or site title (e.g., <a href="#" class="brand">).
• A <button class="menu toggle"> is required to trigger the mobile menu. It should include aria-label and aria-expanded="false" for accessibility. An icon (e.g., Font Awesome's <i class="fas fa-bars"></i>) is recommended.
• The navigation links should be wrapped in a <nav><ul class="links"> structure.

JavaScript Integration

The mobile navbar's interactive behavior (toggling the menu open/closed) is handled by js/components/mobile-navbar.js. This script:

• Listens for clicks on the .menu toggle button.
• Toggles the .menu-open class on the main <header class="main"> element.
• Updates the aria-expanded attribute on the .menu toggle button and aria-hidden on the navigation links.
• Automatically assigns unique IDs to the toggle button and navigation links for accessibility.

Additionally, the component now returns a destroy() method. This method cleans up event listeners and resets ARIA attributes, preventing memory leaks when the mobile navbar is dynamically removed from the DOM or when a page transition occurs in a Single Page Application (SPA).

Accessibility

Axiom01's Mobile Navbar is built with accessibility in mind:

• Semantic HTML: Uses native <button> for toggling and standard <nav> and <ul> for navigation.
• ARIA Attributes:
  • aria-label="Toggle navigation" on the button provides a clear description for screen readers.
  • aria-expanded="true|false" on the button indicates the current state of the menu.
  • aria-controls="[auto-generated-id]" links the toggle button to its controlled navigation links.
  • aria-hidden="true|false" on the navigation links indicates their visibility state to assistive technologies.
  • Unique IDs are dynamically assigned to the toggle button and navigation links to ensure proper ARIA linking.
• Keyboard Navigation: The toggle button is keyboard focusable, and navigation links are accessible via Tab key when the menu is open.

Customization

You can customize the Mobile Navbar's appearance by overriding the following CSS variables in your site.css or a custom theme file. Most of the styling is applied directly to header.main and its descendants in css/axiom.css.

• --a-color-surface-variant: Background color of the header.
• --a-color-on-surface-variant: Text/icon color in the header.
• --a-color-primary, --a-color-primary-variant: For link hover states.
• --a-space-s, --a-space-m, --a-space-l, --a-space-xl: For padding and spacing.
• --a-shadow-medium: For the header's shadow.
• --header-height: (If defined) for consistent header height.

Code Example

<header class="main" data-component="mobile-navbar">
<a href="#" class="brand">Your Logo</a>
<div class="actions">
    <button class="menu toggle" aria-label="Toggle navigation" aria-expanded="false" aria-controls="[auto-generated-id]">
        <i class="fas fa-bars" aria-hidden="true"></i>
    </button>
</div>
<nav>
    <ul class="links" aria-hidden="true" aria-labelledby="[auto-generated-id]">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
</header>