# Header Menu Examples - Implementation Guide ## Overview This document provides instructions for creating HTML examples for the simplified header menu CSS components. The new system uses utility classes and direct element selectors with minimal BEM notation. ## Simplified Structure ### Core Files: - `header-tokens.css` - Shared design tokens - `header.css` - All horizontal header layouts with dropdowns and megamenus - `sidebar.css` - Vertical sidebar navigation - `off-canvas.css` - Off-canvas sliding menus - `breadcrumbs.css` - Hierarchical navigation breadcrumbs - `topbar.css` - Utility bar above header (language, login, status) - `mobile-nav.css` - Advanced mobile navigation overlay/flyout - `menu.js` - JavaScript functionality for all menu types ### Basic HTML Structure: ```html ``` ## Layout Types & Required Examples ### 1. Header Standard **Classes:** `.header .header-standard` **Structure:** Logo left, nav right ```html ``` ### 2. Header Center **Classes:** `.header .header-center` **Structure:** Logo left, nav center, actions right ```html ``` ### 3. Header Split **Classes:** `.header .header-split` **Structure:** Nav left, logo center, nav right ```html ``` ### 4. Header Stacked **Classes:** `.header .header-stacked` or `.header .header-stacked .inline` **Structure:** Logo above nav (centered) or inline ```html ``` ### 5. Header Left **Classes:** `.header .header-left` **Structure:** Logo and nav left-aligned ```html ``` ### 6. Header Bottom Bar **Classes:** `.header .header-bottom-bar` **Structure:** Two-tier layout ```html ``` ### 7. Sidebar Navigation **Classes:** `.sidebar` **Structure:** Vertical sidebar ```html ``` ### 8. Off-Canvas Menu **Classes:** `.off-canvas` with direction modifiers **Structure:** Sliding menu from any direction ```html

``` ### 9. Breadcrumbs Navigation **Classes:** `.breadcrumbs` with style modifiers **Structure:** Hierarchical page navigation ```html ``` ### 10. Topbar / Utility Bar **Classes:** `.topbar` with layout modifiers **Structure:** Utility navigation above header ```html ``` ### 11. Mobile Navigation Overlay **Classes:** `.mobile-nav` with layout modifiers **Structure:** Advanced mobile navigation ```html

Max Mustermann

max@example.com

Hauptmenü

``` **Direction modifiers:** - `.left` - Slide from left (default) - `.right` - Slide from right - `.top` - Slide from top - `.bottom` - Slide from bottom **Size modifiers:** - `.narrow` - 280px width - `.wide` - 400px width - `.full-height` - Full viewport height **Modifier Classes (apply to any layout):** - `.sticky` - Sticky positioning - `.transparent` - Transparent background - `.compact` - Reduced height - `.large` - Increased height ## Key Features by Layout ### Header Standard - Logo left, navigation right - Most common pattern - Clean separation of branding and navigation - **NEW:** Dropdown and megamenu support ### Header Center - Logo left, navigation centered, actions right - Balanced visual weight - Good for prominent navigation - **NEW:** Dropdown and megamenu support ### Header Split - Navigation split on both sides of centered logo - Symmetrical design - Logo as focal point - **NEW:** Dropdown support on both sides ### Header Stacked - Logo above navigation (both centered) - Vertical layout option - Can switch to inline with `.inline` modifier - **NEW:** Dropdown and megamenu support ### Header Left - Logo and navigation both left-aligned - Maximizes right space for actions - Compact, efficient layout - **NEW:** Dropdown support ### Header Bottom Bar - Two-tier layout - Top: logo + actions, Bottom: navigation - Maximum navigation space - **NEW:** Megamenu support in bottom bar ### Sidebar - Vertical navigation layout - Fixed positioning - Collapsible on mobile with overlay - **NEW:** Nested navigation support ### Off-Canvas - Sliding menu from any direction (left, right, top, bottom) - Overlay backdrop - **NEW:** Full nested navigation support - **NEW:** Animated hamburger icon - **NEW:** Multiple size options ## Implementation Requirements ### HTML Structure - Use semantic HTML5 elements (`

`, `

`) - Include proper ARIA labels and attributes - Implement mobile toggle functionality - Add proper focus management ### JavaScript Functionality Simplified JavaScript for mobile menu functionality: ```javascript // Header mobile menu toggle const headerToggle = document.querySelector('.header-toggle'); const headerMobile = document.querySelector('.header-mobile'); const header = document.querySelector('.header'); if (headerToggle && headerMobile) { headerToggle.addEventListener('click', () => { const isExpanded = headerToggle.getAttribute('aria-expanded') === 'true'; headerToggle.setAttribute('aria-expanded', !isExpanded); headerMobile.classList.toggle('visible'); }); // Close menu on outside click document.addEventListener('click', (e) => { if (!header.contains(e.target)) { headerMobile.classList.remove('visible'); headerToggle.setAttribute('aria-expanded', 'false'); } }); } // Sidebar toggle const sidebarToggle = document.querySelector('.sidebar-toggle'); const sidebar = document.querySelector('.sidebar'); const sidebarOverlay = document.querySelector('.sidebar-overlay'); if (sidebarToggle && sidebar) { sidebarToggle.addEventListener('click', () => { sidebar.classList.toggle('visible'); sidebarOverlay?.classList.toggle('visible'); }); // Close sidebar on overlay click sidebarOverlay?.addEventListener('click', () => { sidebar.classList.remove('visible'); sidebarOverlay.classList.remove('visible'); }); } // Keyboard navigation (Escape key) document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { headerMobile?.classList.remove('visible'); headerToggle?.setAttribute('aria-expanded', 'false'); sidebar?.classList.remove('visible'); sidebarOverlay?.classList.remove('visible'); } }); ``` ### Responsive Testing - Test at breakpoints: 320px, 768px, 1024px, 1440px - Verify container query support with fallback media queries - Test mobile menu functionality - Verify touch interactions ### Content Variations Create examples with: - Short navigation (3-4 items) - Long navigation (8-10 items) - Navigation with icons - Different logo sizes and types - Various action button combinations ### Accessibility Testing - Screen reader compatibility - Keyboard navigation - Focus indicators - Color contrast compliance - ARIA attributes validation ## File Organization ``` examples/ ├── header-standard/ │ ├── index.html (basic example) │ ├── variants.html (all variants) │ ├── with-actions.html │ └── mobile-demo.html ├── header-center-menu/ │ └── [similar structure] └── [other layouts]/ ``` ## Styling Notes - Import the main CSS library - Include header tokens - Add demo-specific styles in separate files - Use CSS custom properties for easy theming - Demonstrate dark/light theme variants ## Browser Support - Modern browsers with CSS Grid and Flexbox - Container query support (with media query fallbacks) - CSS custom properties support - Modern JavaScript (ES6+) ## Performance Considerations - Optimize images and SVGs - Minimize JavaScript for mobile menu - Use efficient CSS selectors - Consider lazy loading for complex examples --- **Next Steps:** 1. Create basic HTML structure for each layout 2. Implement JavaScript functionality 3. Add responsive testing 4. Create variant demonstrations 5. Test accessibility compliance 6. Document usage patterns and best practices