Mobile Navbar

Usage Guidelines

• 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. Use a native Axiom icon like <span class="axicon render" data-name="Menu" aria-hidden="true"></span> inside the button.
• The navigation links should be wrapped in a <nav><ul class="links"> structure.

JavaScript Integration

• 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

• 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.

Markup Pattern

<header class="main" data-component="mobile-navbar">
				<nav role="navigation" aria-label="Main Navigation">
				<a href="#" class="brand">ax[10]m</a>
				<ul class="links">
				<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>
				<div class="actions">
				<button class="menu toggle" aria-label="Toggle navigation" aria-expanded="false">
				<span class="axicon render" data-name="Menu" aria-hidden="true"></span>
				</button>
				</div>
				</nav>
				</header>