Header Menu

The Header Menu component provides a responsive navigation solution for your application's main menu structure, supporting both desktop and mobile views.

Live Example

View the live example in a new tab.

Requirements

To use the Header Menu component, you'll need to include the following resources:

JavaScript

Include the menu interaction script:

<script src="https://cdn.jsdelivr.net/gh/wdalhaj/uo-nds-html-assets@master/js/uo-nds-nav.js"></script>

Examples

Basic Example

<header class="header">
    <!-- Branding -->
    <div class="header-nav__branding">
        <a href="#" class="header__logo">
            <img src="img/logo.svg" alt="Logo" />
        </a>
    </div>

    <!-- Mobile menu button -->
    <button type="button" class="header-menu__btn mobile-menu__btn">
        <span class="material-icons btn-icon header-menu__btn-icon">menu</span>
    </button>

    <!-- Mobile close button -->
    <button type="button" class="header-menu__btn close_btn">
        <span class="material-icons btn-icon header-menu__btn-icon">close</span>
    </button>

    <nav class="header-nav--full">      
        <div class="header-nav__main">
            <!-- Menu items -->
            <ul class="header-nav__menu">
                <li>
                    <a href="#" class="header-menu__item has-submenu">
                        <span class="header-menu__item-label">Products</span>
                        <span class="material-icons btn-icon">keyboard_arrow_down</span>
                    </a>
                    <!-- submenu -->
                    <div class="header__sub-menu header__sub-menu--full">
                        <div class="sub-menu__container">
                            <div class="sub-menu__column">
                                <a href="#" class="sub-menu__link">
                                    <div class="flex-column">
                                        <span class="sub-menu__link-label">Product Item</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <!-- Action items -->
        <ul class="header-nav__actions">
            <li>
                <a href="#" class="header-menu__item">
                    <span class="material-icons btn-icon">how_to_reg</span>
                    <span class="header-menu__item-label">Sign up</span>
                </a>
            </li>
        </ul>
    </nav>
</header>

<!-- Include the JavaScript file -->
<script src="https://cdn.jsdelivr.net/gh/wdalhaj/uo-nds-html-assets@master/js/uo-nds-nav.js"></script>

Main Structure

Basic Header Setup

<header class="header">
    <div class="header-nav__branding">
        <a href="#" class="header__logo">
            <img src="logo.svg" alt="Logo" />
        </a>
    </div>

    <button type="button" class="header-menu__btn mobile-menu__btn">
        <span class="material-icons btn-icon header-menu__btn-icon">menu</span>
    </button>

    <nav class="header-nav--full">
        <div class="header-nav__main">
            <ul class="header-nav__menu">
                <!-- Menu items will be added here -->
            </ul>
        </div>
    </nav>
</header>

<!-- Include menu JavaScript -->
<script src="js/uo-nds-menu.js"></script>

Adding Menu Items

1. Basic Menu Item

<li>
    <a href="#" class="header-menu__item">
        <span class="header-menu__item-label">Home</span>
    </a>
</li>

2. Menu Item with Submenu

<li>
    <a href="#" class="header-menu__item has-submenu">
        <span class="header-menu__item-label">Products</span>
        <span class="material-icons btn-icon">keyboard_arrow_down</span>
    </a>

    <div class="header__sub-menu header__sub-menu--full">
        <div class="sub-menu__container">
            <div class="sub-menu__column">
                <a href="#" class="sub-menu__link">
                    <div class="flex-column">
                        <span class="sub-menu__link-label">Product 1</span>
                    </div>
                </a>
                <a href="#" class="sub-menu__link">
                    <div class="flex-column">
                        <span class="sub-menu__link-label">Product 2</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</li>

Features

• Responsive Design: Adapts to both desktop and mobile views
• Mobile Menu Toggle: Hamburger menu for mobile view
• Submenu Support: Dropdown menus for nested navigation
• RTL Support: Built-in Right-to-Left language support
• Material Icons: Integrated icon support for menu items and actions

CSS Classes

Class Name	Description
header	Main container for the header
header-nav--full	Container for the full navigation menu
header-menu__btn	Menu button styles
mobile-menu__btn	Mobile-specific menu button
close_btn	Close button for mobile menu
header-nav__main	Main navigation container
header-nav__menu	Container for menu items
header-menu__item	Individual menu item
has-submenu	Indicates menu item has a submenu
header__sub-menu	Submenu container
header-nav__actions	Container for action items

JavaScript Features

The menu functionality is handled by uo-nds-menu.js, which provides:

• Mobile menu toggle
• Submenu toggle
• Click outside handling
• Active state management

Mobile Responsiveness

The menu automatically switches to a mobile-friendly view on screens smaller than 56.25em (900px), featuring:

• Hamburger menu toggle
• Full-screen overlay navigation
• Vertical menu layout
• Close button for easy navigation