# Header

## Overview

<figure><img src="/files/1EiZPq5r7L00kR0Be07e" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

The header component should be used on all pages of the website to provide a consistent navigation experience for users. It serves as a central hub for accessing key sections of the site, ensuring users can easily locate important features or content regardless of their current location within the website.

### How it works

The header component typically includes three key sections: a branding area, navigation tabs, and interactive controls. The branding area prominently features logos for clear organizational identity. Navigation tabs provide quick access to different sections, with a visual indicator for the active tab. Interactive controls include a search bar for content discovery, an accessibility icon for usability features, a language toggle for switching between languages, and a login button for user authentication. The header is designed to adapt fluidly to different screen sizes, ensuring clarity, usability, and accessibility across devices.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-header
    first-logo-href="https://www.dubai.gov.ae"
    first-logo-src="https://www.dof.gov.ae/Style Library/img/gov-logo.svg"
    first-logo-white-src="https://www.dof.gov.ae/Style Library/img/gov-logo-white.svg"
    first-logo-alt="Dubai-Digital-Authority"
    first-logo-target="_blank"
	
    second-logo-href="https://www.dubai.gov.ae"
    second-logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
    second-logo-white-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo-white.svg"
    second-logo-alt="Dubai-Digital-Authority"
	
    search_button_name="search_button_name"
    search_input_name="search_input_name"
    search_input_placeholder="Search"
    searchfunctionality="() => console.log('Search Functionality')"
    search_tooltip="Search"
    mobile-menu-search-id="mobileSearch"
    mobile-menu-search-url="javascript:void(0)"
	
    use-predesigned-accessibility-menu="true"
    accessibility_tooltip="Accessibility"
    toggle_accessibility_button_name="toggle_accessibility_button_name"
    accessibility_button_text="accessibility_button_text"
    accessibility_button_id="accessibility_button_id"
    accessibility_button_icon_family="material-icons  material-symbols-outlined"
    accessibility_button_icon_name="accessible_forward"
    accessibilitymenufunctionality="() => console.log('Accessibility Menu Functionality')"
    close_accessibility_button_name="close_accessibility_button_name"
	
    contrast_title="Contrast"
    contrast_description="Select your preferred contrast setting"
    contrast_noraml_text="Normal"
    contrast_color_blind_text="Colours Blind"
    contrast_red_weakness_text="Red Weakness"
    contrast_green_weakness_text="Green Weakness"
	
    normalcontrast="() => console.log('Normal Text')"
    blindcontrast="() => console.log('Blind Text')"
    redcontrast="() => console.log('Red Text')"
    greencontrast="() => console.log('Green Text')"
	
    screen_reader_title="Screen Reader"
    screen_reader_description="Listen to the content of the page by clicking play or listen"
    read_speaker_link="app-eu.readspeaker.com"
	
    text_size_title="Text Size"
    text_size_description="Use the buttons below to increase or decrease the text size"
    smtextsize="() => console.log('Small Text')"
    basetextsize="() => console.log('Base Text')"
    lgtextsize="() => console.log('Large Text')"
	
    language_tooltip="Language"
    language_text="العربية"
    language_button_name="language_button_name"
    languageswitch="() => console.log('Language Switcher')"
	
    login_tooltip="Login"
    login-text="Login"
    login-link="/Login"
    login-icon="account_circle"
    use-login-popup="true"
    login-popup-links='[
        {"popupItemLabel":"Profile","url":"#"},
        {"popupItemLabel":"Logout","url":"#"} 
    ]'
	
    hamburger_menu_button_name="Menu"
    side-main-menu-title="Main Menu"
    side-menu-items='[{"label":"Home","active":"true","href":"#","subMenu":[]},{"label":"Initiatives","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-1","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-2","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-4","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-3","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-1","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-2","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-4","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-3","href":"#"}]}]},{"label":"Services","href":"#","subMenu":[{"headerLabel":"Service","subLinkClass":"","label":"Service-1","href":"#"},{"headerLabel":"Service","subLinkClass":"","label":"Service-2","href":"#"}]},{"label":"Data","href":"#","subMenu":[]},{"label":"Government Services","href":"#","subMenu":[]},{"label":"Investor Relations","href":"#","subMenu":[]},{"label":"Locations","href":"#","subMenu":[]},{"label":"Newsroom","href":"#","subMenu":[]},{"label":"Contact Us","href":"#","subMenu":[]}]'
    
    hide-other-menu="false"
    side-other-menu-title="Other"
    other-menu-items='[{"label":"Menu 1","active":"true","href":"#"},{"label":"Menu 2","href":"#"},{"label":"Menu 3","href":"#"}]'
    
    close_menu_button_name="close_menu_button_name"
    
    quick-links='[
	{"headerMenuLabel":"Home","active":"true","url":"#"}
	
	//Default Sub Menu
	{"headerMenuLabel":"About Us","url":"javascript:void(0)","type":"dda_default_submenu","children":[
	    {"headerMenuLabel":"Submenu 1","url":"#","defaultSubMenuTitle":"Submenu 1 Title","children":[
		{"headerMenuLabel":"SubSubmenu 1","url":"#"},
		{"headerMenuLabel":"SubSubmenu 1","url":"#"}
	    ]},
	    {"headerMenuLabel":"Submenu 2","url":"#","defaultSubMenuTitle":"Submenu 2 Title","children":[
		{"headerMenuLabel":"SubSubmenu 2","url":"#"},
		{"headerMenuLabel":"SubSubmenu 2","url":"#"}
	    ]},
	    {"headerMenuLabel":"Submenu 3","url":"#"}
	]},
	
	//Mega Menu
	{"headerMenuLabel":"Services","url":"javascript:void(0)","type":"dda_main_megamenu","children":[
	    {"title":"QUICK LINKS 1","items":[
	        {"headerMenuLabel":"Service 1","url":"#","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},
		{"headerMenuLabel":"Service 2","url":"#"},
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 2","items":[
		{"headerMenuLabel":"Service 1","url":"#"},
		{"headerMenuLabel":"Service 2","url":"#"},
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 3","items":[
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 4","items":[
		{"headerMenuLabel":"Service 4","url":"#"}
            ]}
	]},
		
	{"headerMenuLabel":"Contact","url":"#"}
    ]'
></dda-header>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaHeader
    first-logo-href="https://www.dubai.gov.ae"
    first-logo-src="https://www.dof.gov.ae/Style Library/img/gov-logo.svg"
    first-logo-white-src="https://www.dof.gov.ae/Style Library/img/gov-logo-white.svg"
    first-logo-alt="Dubai-Digital-Authority"
    first-logo-target="_blank"
	
    second-logo-href="https://www.dubai.gov.ae"
    second-logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
    second-logo-white-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo-white.svg"
    second-logo-alt="Dubai-Digital-Authority"
	
    search_button_name="search_button_name"
    search_input_name="search_input_name"
    search_input_placeholder="Search"
    searchfunctionality="() => console.log('Search Functionality')"
    search_tooltip="Search"
    mobile-menu-search-id="mobileSearch"
    mobile-menu-search-url="javascript:void(0)"
	
    use-predesigned-accessibility-menu="true"
    accessibility_tooltip="Accessibility"
    toggle_accessibility_button_name="toggle_accessibility_button_name"
    accessibility_button_text="accessibility_button_text"
    accessibility_button_id="accessibility_button_id"
    accessibility_button_icon_family="material-icons  material-symbols-outlined"
    accessibility_button_icon_name="accessible_forward"
    accessibilitymenufunctionality="() => console.log('Accessibility Menu Functionality')"
    close_accessibility_button_name="close_accessibility_button_name"
	
    contrast_title="Contrast"
    contrast_description="Select your preferred contrast setting"
    contrast_noraml_text="Normal"
    contrast_color_blind_text="Colours Blind"
    contrast_red_weakness_text="Red Weakness"
    contrast_green_weakness_text="Green Weakness"
	
    normalcontrast="() => console.log('Normal Text')"
    blindcontrast="() => console.log('Blind Text')"
    redcontrast="() => console.log('Red Text')"
    greencontrast="() => console.log('Green Text')"
	
    screen_reader_title="Screen Reader"
    screen_reader_description="Listen to the content of the page by clicking play or listen"
    read_speaker_link="app-eu.readspeaker.com"
	
    text_size_title="Text Size"
    text_size_description="Use the buttons below to increase or decrease the text size"
    smtextsize="() => console.log('Small Text')"
    basetextsize="() => console.log('Base Text')"
    lgtextsize="() => console.log('Large Text')"
	
    language_tooltip="Language"
    language_text="العربية"
    language_button_name="language_button_name"
    languageswitch="() => console.log('Language Switcher')"
	
    login_tooltip="Login"
    login-text="Login"
    login-link="/Login"
    login-icon="account_circle"
    use-login-popup="true"
    login-popup-links='[
        {"popupItemLabel":"Profile","url":"#"},
        {"popupItemLabel":"Logout","url":"#"} 
    ]'
	
    hamburger_menu_button_name="Menu"
    side-main-menu-title="Main Menu"
    side-menu-items='[{"label":"Home","active":"true","href":"#","subMenu":[]},{"label":"Initiatives","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-1","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-2","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-4","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-3","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-1","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-2","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-4","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-3","href":"#"}]}]},{"label":"Services","href":"#","subMenu":[{"headerLabel":"Service","subLinkClass":"","label":"Service-1","href":"#"},{"headerLabel":"Service","subLinkClass":"","label":"Service-2","href":"#"}]},{"label":"Data","href":"#","subMenu":[]},{"label":"Government Services","href":"#","subMenu":[]},{"label":"Investor Relations","href":"#","subMenu":[]},{"label":"Locations","href":"#","subMenu":[]},{"label":"Newsroom","href":"#","subMenu":[]},{"label":"Contact Us","href":"#","subMenu":[]}]'
    
    hide-other-menu="false"
    side-other-menu-title="Other"
    other-menu-items='[{"label":"Menu 1","active":"true","href":"#"},{"label":"Menu 2","href":"#"},{"label":"Menu 3","href":"#"}]'
    
    close_menu_button_name="close_menu_button_name"
    
    quick-links='[
	{"headerMenuLabel":"Home","active":"true","url":"#"}
	
	//Default Sub Menu
	{"headerMenuLabel":"About Us","url":"javascript:void(0)","type":"dda_default_submenu","children":[
	    {"headerMenuLabel":"Submenu 1","url":"#","defaultSubMenuTitle":"Submenu 1 Title","children":[
		{"headerMenuLabel":"SubSubmenu 1","url":"#"},
		{"headerMenuLabel":"SubSubmenu 1","url":"#"}
	    ]},
	    {"headerMenuLabel":"Submenu 2","url":"#","defaultSubMenuTitle":"Submenu 2 Title","children":[
		{"headerMenuLabel":"SubSubmenu 2","url":"#"},
		{"headerMenuLabel":"SubSubmenu 2","url":"#"}
	    ]},
	    {"headerMenuLabel":"Submenu 3","url":"#"}
	]},
	
	//Mega Menu
	{"headerMenuLabel":"Services","url":"javascript:void(0)","type":"dda_main_megamenu","children":[
	    {"title":"QUICK LINKS 1","items":[
	        {"headerMenuLabel":"Service 1","url":"#","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},
		{"headerMenuLabel":"Service 2","url":"#"},
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 2","items":[
		{"headerMenuLabel":"Service 1","url":"#"},
		{"headerMenuLabel":"Service 2","url":"#"},
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 3","items":[
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 4","items":[
		{"headerMenuLabel":"Service 4","url":"#"}
            ]}
	]},
		
	{"headerMenuLabel":"Contact","url":"#"}
    ]'
><DdaHeader/>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaHeader
    first-logo-href="https://www.dubai.gov.ae"
    first-logo-src="https://www.dof.gov.ae/Style Library/img/gov-logo.svg"
    first-logo-white-src="https://www.dof.gov.ae/Style Library/img/gov-logo-white.svg"
    first-logo-alt="Dubai-Digital-Authority"
    first-logo-target="_blank"
	
    second-logo-href="https://www.dubai.gov.ae"
    second-logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
    second-logo-white-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo-white.svg"
    second-logo-alt="Dubai-Digital-Authority"
	
    search_button_name="search_button_name"
    search_input_name="search_input_name"
    search_input_placeholder="Search"
    searchfunctionality="() => console.log('Search Functionality')"
    search_tooltip="Search"
    mobile-menu-search-id="mobileSearch"
    mobile-menu-search-url="javascript:void(0)"
	
    use-predesigned-accessibility-menu="true"
    accessibility_tooltip="Accessibility"
    toggle_accessibility_button_name="toggle_accessibility_button_name"
    accessibility_button_text="accessibility_button_text"
    accessibility_button_id="accessibility_button_id"
    accessibility_button_icon_family="material-icons  material-symbols-outlined"
    accessibility_button_icon_name="accessible_forward"
    accessibilitymenufunctionality="() => console.log('Accessibility Menu Functionality')"
    close_accessibility_button_name="close_accessibility_button_name"
	
    contrast_title="Contrast"
    contrast_description="Select your preferred contrast setting"
    contrast_noraml_text="Normal"
    contrast_color_blind_text="Colours Blind"
    contrast_red_weakness_text="Red Weakness"
    contrast_green_weakness_text="Green Weakness"
	
    normalcontrast="() => console.log('Normal Text')"
    blindcontrast="() => console.log('Blind Text')"
    redcontrast="() => console.log('Red Text')"
    greencontrast="() => console.log('Green Text')"
	
    screen_reader_title="Screen Reader"
    screen_reader_description="Listen to the content of the page by clicking play or listen"
    read_speaker_link="app-eu.readspeaker.com"
	
    text_size_title="Text Size"
    text_size_description="Use the buttons below to increase or decrease the text size"
    smtextsize="() => console.log('Small Text')"
    basetextsize="() => console.log('Base Text')"
    lgtextsize="() => console.log('Large Text')"
	
    language_tooltip="Language"
    language_text="العربية"
    language_button_name="language_button_name"
    languageswitch="() => console.log('Language Switcher')"
	
    login_tooltip="Login"
    login-text="Login"
    login-link="/Login"
    login-icon="account_circle"
    use-login-popup="true"
    login-popup-links='[
        {"popupItemLabel":"Profile","url":"#"},
        {"popupItemLabel":"Logout","url":"#"} 
    ]'
	
    hamburger_menu_button_name="Menu"
    side-main-menu-title="Main Menu"
    side-menu-items='[{"label":"Home","active":"true","href":"#","subMenu":[]},{"label":"Initiatives","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-1","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-2","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-4","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-3","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-1","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-2","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-4","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-3","href":"#"}]}]},{"label":"Services","href":"#","subMenu":[{"headerLabel":"Service","subLinkClass":"","label":"Service-1","href":"#"},{"headerLabel":"Service","subLinkClass":"","label":"Service-2","href":"#"}]},{"label":"Data","href":"#","subMenu":[]},{"label":"Government Services","href":"#","subMenu":[]},{"label":"Investor Relations","href":"#","subMenu":[]},{"label":"Locations","href":"#","subMenu":[]},{"label":"Newsroom","href":"#","subMenu":[]},{"label":"Contact Us","href":"#","subMenu":[]}]'
    
    hide-other-menu="false"
    side-other-menu-title="Other"
    other-menu-items='[{"label":"Menu 1","active":"true","href":"#"},{"label":"Menu 2","href":"#"},{"label":"Menu 3","href":"#"}]'
    
    close_menu_button_name="close_menu_button_name"
    
    quick-links='[
	{"headerMenuLabel":"Home","active":"true","url":"#"}
	
	//Default Sub Menu
	{"headerMenuLabel":"About Us","url":"javascript:void(0)","type":"dda_default_submenu","children":[
	    {"headerMenuLabel":"Submenu 1","url":"#","defaultSubMenuTitle":"Submenu 1 Title","children":[
		{"headerMenuLabel":"SubSubmenu 1","url":"#"},
		{"headerMenuLabel":"SubSubmenu 1","url":"#"}
	    ]},
	    {"headerMenuLabel":"Submenu 2","url":"#","defaultSubMenuTitle":"Submenu 2 Title","children":[
		{"headerMenuLabel":"SubSubmenu 2","url":"#"},
		{"headerMenuLabel":"SubSubmenu 2","url":"#"}
	    ]},
	    {"headerMenuLabel":"Submenu 3","url":"#"}
	]},
	
	//Mega Menu
	{"headerMenuLabel":"Services","url":"javascript:void(0)","type":"dda_main_megamenu","children":[
	    {"title":"QUICK LINKS 1","items":[
	        {"headerMenuLabel":"Service 1","url":"#","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},
		{"headerMenuLabel":"Service 2","url":"#"},
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 2","items":[
		{"headerMenuLabel":"Service 1","url":"#"},
		{"headerMenuLabel":"Service 2","url":"#"},
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 3","items":[
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 4","items":[
		{"headerMenuLabel":"Service 4","url":"#"}
            ]}
	]},
		
	{"headerMenuLabel":"Contact","url":"#"}
    ]'
><DdaHeader/> 
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-header
    first-logo-href="https://www.dubai.gov.ae"
    first-logo-src="https://www.dof.gov.ae/Style Library/img/gov-logo.svg"
    first-logo-white-src="https://www.dof.gov.ae/Style Library/img/gov-logo-white.svg"
    first-logo-alt="Dubai-Digital-Authority"
    first-logo-target="_blank"
	
    second-logo-href="https://www.dubai.gov.ae"
    second-logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
    second-logo-white-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo-white.svg"
    second-logo-alt="Dubai-Digital-Authority"
	
    search_button_name="search_button_name"
    search_input_name="search_input_name"
    search_input_placeholder="Search"
    searchfunctionality="() => console.log('Search Functionality')"
    search_tooltip="Search"
    mobile-menu-search-id="mobileSearch"
    mobile-menu-search-url="javascript:void(0)"
	
    use-predesigned-accessibility-menu="true"
    accessibility_tooltip="Accessibility"
    toggle_accessibility_button_name="toggle_accessibility_button_name"
    accessibility_button_text="accessibility_button_text"
    accessibility_button_id="accessibility_button_id"
    accessibility_button_icon_family="material-icons  material-symbols-outlined"
    accessibility_button_icon_name="accessible_forward"
    accessibilitymenufunctionality="() => console.log('Accessibility Menu Functionality')"
    close_accessibility_button_name="close_accessibility_button_name"
	
    contrast_title="Contrast"
    contrast_description="Select your preferred contrast setting"
    contrast_noraml_text="Normal"
    contrast_color_blind_text="Colours Blind"
    contrast_red_weakness_text="Red Weakness"
    contrast_green_weakness_text="Green Weakness"
	
    normalcontrast="() => console.log('Normal Text')"
    blindcontrast="() => console.log('Blind Text')"
    redcontrast="() => console.log('Red Text')"
    greencontrast="() => console.log('Green Text')"
	
    screen_reader_title="Screen Reader"
    screen_reader_description="Listen to the content of the page by clicking play or listen"
    read_speaker_link="app-eu.readspeaker.com"
	
    text_size_title="Text Size"
    text_size_description="Use the buttons below to increase or decrease the text size"
    smtextsize="() => console.log('Small Text')"
    basetextsize="() => console.log('Base Text')"
    lgtextsize="() => console.log('Large Text')"
	
    language_tooltip="Language"
    language_text="العربية"
    language_button_name="language_button_name"
    languageswitch="() => console.log('Language Switcher')"
	
    login_tooltip="Login"
    login-text="Login"
    login-link="/Login"
    login-icon="account_circle"
    use-login-popup="true"
    login-popup-links='[
        {"popupItemLabel":"Profile","url":"#"},
        {"popupItemLabel":"Logout","url":"#"} 
    ]'
	
    hamburger_menu_button_name="Menu"
    side-main-menu-title="Main Menu"
    side-menu-items='[{"label":"Home","active":"true","href":"#","subMenu":[]},{"label":"Initiatives","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-1","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-2","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-4","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-3","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-1","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-2","href":"#","subMenu":[{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-4","href":"#"}]},{"headerLabel":"Initiatives","subLinkClass":"","label":"Submenu-3","href":"#"}]}]},{"label":"Services","href":"#","subMenu":[{"headerLabel":"Service","subLinkClass":"","label":"Service-1","href":"#"},{"headerLabel":"Service","subLinkClass":"","label":"Service-2","href":"#"}]},{"label":"Data","href":"#","subMenu":[]},{"label":"Government Services","href":"#","subMenu":[]},{"label":"Investor Relations","href":"#","subMenu":[]},{"label":"Locations","href":"#","subMenu":[]},{"label":"Newsroom","href":"#","subMenu":[]},{"label":"Contact Us","href":"#","subMenu":[]}]'
    
    hide-other-menu="false"
    side-other-menu-title="Other"
    other-menu-items='[{"label":"Menu 1","active":"true","href":"#"},{"label":"Menu 2","href":"#"},{"label":"Menu 3","href":"#"}]'
    
    close_menu_button_name="close_menu_button_name"
    
    quick-links='[
	{"headerMenuLabel":"Home","active":"true","url":"#"}
	
	//Default Sub Menu
	{"headerMenuLabel":"About Us","url":"javascript:void(0)","type":"dda_default_submenu","children":[
	    {"headerMenuLabel":"Submenu 1","url":"#","defaultSubMenuTitle":"Submenu 1 Title","children":[
		{"headerMenuLabel":"SubSubmenu 1","url":"#"},
		{"headerMenuLabel":"SubSubmenu 1","url":"#"}
	    ]},
	    {"headerMenuLabel":"Submenu 2","url":"#","defaultSubMenuTitle":"Submenu 2 Title","children":[
		{"headerMenuLabel":"SubSubmenu 2","url":"#"},
		{"headerMenuLabel":"SubSubmenu 2","url":"#"}
	    ]},
	    {"headerMenuLabel":"Submenu 3","url":"#"}
	]},
	
	//Mega Menu
	{"headerMenuLabel":"Services","url":"javascript:void(0)","type":"dda_main_megamenu","children":[
	    {"title":"QUICK LINKS 1","items":[
	        {"headerMenuLabel":"Service 1","url":"#","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},
		{"headerMenuLabel":"Service 2","url":"#"},
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 2","items":[
		{"headerMenuLabel":"Service 1","url":"#"},
		{"headerMenuLabel":"Service 2","url":"#"},
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 3","items":[
		{"headerMenuLabel":"Service 3","url":"#"}
	    ]},
	    {"title":"QUICK LINKS 4","items":[
		{"headerMenuLabel":"Service 4","url":"#"}
            ]}
	]},
		
	{"headerMenuLabel":"Contact","url":"#"}
    ]'
></dda-header>
```

{% endtab %}
{% endtabs %}

### Header Transparent Mode

To make the header area transparent, apply the following class to the body tag of the landing page:

```html
<body class="transparent"></body>        
```

### **Header Level Menu Configuration (Quick Links)**

The `quick-links` property defines the structure of the header navigation menu. It accepts a JSON array of menu items, each of which can represent:

* A **Simple Menu Link**
* A **Default Submenu** (with optional nested sub-submenus)
* A **Mega Menu** (with grouped links and optional descriptions)

### Structure Overview

```json
[
  {
    "headerMenuLabel": "Home",
    "url": "#"
  },
  {
    "headerMenuLabel": "About Us",
    "url": "javascript:void(0)",
    "type": "dda_default_submenu",
    "children": [
      {
        "headerMenuLabel": "Submenu 1",
        "url": "#",
        "defaultSubMenuTitle": "Submenu 1 Title",
        "children": [
          {
            "headerMenuLabel": "SubSubmenu 1",
            "url": "#"
          }
        ]
      }
    ]
  },
  {
    "headerMenuLabel": "Services",
    "url": "javascript:void(0)",
    "type": "dda_main_megamenu",
    "children": [
      {
        "title": "QUICK LINKS 1",
        "items": [
          {
            "headerMenuLabel": "Service 1",
            "url": "#",
            "description": "Optional description here"
          }
        ]
      }
    ]
  }
]

```

### Menu Item Types

* **Simple Menu Item**
  * A top-level navigation link.
  * **Properties**:
    * `headerMenuLabel`: Text to display.
    * `url`: Link to navigate to.
* **Default Submenu (`dda_default_submenu`)**
  * Allows nested submenus and sub-submenus.
  * **Properties**:
    * `type`: `"dda_default_submenu"`
    * `children`: Array of submenu items.
    * Each child can also contain a `children` array for sub-submenus.
* **Mega Menu (`dda_main_megamenu`)**
  * Displays grouped menu links in columns.
  * **Properties**:
    * `type`: `"dda_main_megamenu"`
    * `children`: Array of groups.
    * Each group includes a `title` and an `items` array.

## Login Button - Popup Usage

The Login Button component supports both direct link navigation and an optional popup menu for additional user actions.

Use `use-login-popup="true"` when the login button is intended to handle **multiple authenticated actions**, not just login.

```json
use-login-popup="true"
login-popup-links='[
        {"popupItemLabel":"Profile","url":"/Profile"},
        {"popupItemLabel":"Logout","url":"/Logout"} 
]'
```

## Properties

Logo Attributes

| Property                | Description                                                                                                | Type     |
| ----------------------- | ---------------------------------------------------------------------------------------------------------- | -------- |
| `first-logo-href`       | Link URL for the first logo (usually a government entity)                                                  | `string` |
| `firstLogoSrc`          | URL of the primary logo displayed in the header.                                                           | `string` |
| `first-logo-white-src`  | White/dark-mode version of the first logo.                                                                 | `string` |
| `firstLogoAlt`          | Alternative text for the primary logo for accessibility purposes.                                          | `string` |
| first-logo-target       | Specifies where to open the first logo link. Use `_blank` to open the link in a new browser tab or window. | `string` |
| `second-logo-href`      | Link URL for the second logo (e.g., Digital Dubai).                                                        | `string` |
| `secondLogoSrc`         | URL of the secondary logo, typically displayed in a different theme or color variation.                    | `string` |
| `second-logo-white-src` | White/dark-mode version of the second logo.                                                                | `string` |
| `secondLogoAlt`         | Alternative text for the secondary logo for accessibility purposes.                                        | `string` |

### Navigation & Menu Attributes

<table><thead><tr><th>Property</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td><code>hamburger_menu_button_name</code></td><td>Name attribute for the hamburger menu button</td><td><code>string</code></td></tr><tr><td><code>close_menu_button_name</code></td><td>Name attribute for the sidebar  close button</td><td><code>string</code></td></tr><tr><td><code>side-main-menu-title</code></td><td>Title for the primary sidebar menu</td><td><code>string</code></td></tr><tr><td><code>sideMenuItems</code></td><td>JSON string representing an array of side menu items, including links and potential submenus.</td><td><code>string</code></td></tr><tr><td><code>hide-other-menu</code></td><td>Boolean (<code>true</code>/<code>false</code>) to show or hide the "Other" menu.</td><td><code>string</code></td></tr><tr><td><code>side-other-menu-title</code></td><td>Title label for the secondary or "Other" menu.</td><td><code>string</code></td></tr><tr><td><code>other-menu-items</code></td><td>JSON array for "Other" menu items and links.</td><td><code>string</code></td></tr><tr><td><code>quick-links</code></td><td>JSON array for top-level navigation with default dropdown and megamenu dropdown<br><strong>Format:</strong><br><em>[ { "headerMenuLabel": "Services", "url": "javascript:void(0)", "type": "dda_main_megamenu", "children": [ { "title": "QUICK LINKS 2", "items": [ { "headerMenuLabel": "Service 1", "url": "#", "quickLinksIcon": "home" }, { "headerMenuLabel": "Service 2", "url": "#", "quickLinksIcon": "star" } ] } ] } ]</em></td><td><code>string</code><br><br><br><br></td></tr><tr><td><code>header_default_submenu</code></td><td>Enables or disables the default submenu under the card header. Use "true" or "false" as a string.</td><td><code>boolean</code></td></tr><tr><td><code>useNavigator</code></td><td>Enables/Disables the use of event listener instead of href attribute on links </td><td>string ("true" | "false")</td></tr><tr><td><code>navigatorClick</code></td><td>Use it to capture the on click event after useNavigator is set to true</td><td>EventListener</td></tr><tr><td><p></p><pre class="language-typescriptreact"><code class="lang-typescriptreact">showQuickLinksIcon
</code></pre></td><td>Set to "false" to hide Icons in Mega Menus for Quick Links Sub Menus.<br>Default to "true"</td><td><p></p><pre class="language-typescriptreact"><code class="lang-typescriptreact">boolean
</code></pre></td></tr></tbody></table>

For description and example about handling routers in Single Page Applications (SPA) refer to [Navigation/Router](/developers/navigation-routers.md) page

### Search Attributes

| Property                   | Description                                                     | Type     |
| -------------------------- | --------------------------------------------------------------- | -------- |
| `search_button_name`       | Name attribute for the search button                            | `string` |
| `search_input_name`        | Name attribute for the search input field                       | `string` |
| `search_input_placeholder` | Placeholder text for the search input.                          | `string` |
| `searchfunctionality`      | JavaScript function to trigger on search (e.g., search action). | `string` |
| `onInputChanged`           | onevent property for search box                                 |          |

### Accessibility Attributes

| Property                             | Description                                                    | Type                                                           |
| ------------------------------------ | -------------------------------------------------------------- | -------------------------------------------------------------- |
| `use-predesigned-accessibility-menu` | Use predesigned accessibility menu                             | `string`                                                       |
| `accessibility_button_text`          | Text shown on the accessibility button                         | `string`                                                       |
| `toggle_accessibility_button_name`   | Label/name for toggling the accessibility panel.               | `string`                                                       |
| `close_accessibility_button_name`    | Name attribute for the close button for the accessibility menu | `string`                                                       |
| `accessibilitymenufunctionality`     | JavaScript function triggered when accessibility menu is used. | JavaScript function triggered when accessibility menu is used. |
| `accessibility_button_id`            | Managable accessibility button ID                              | `string`                                                       |

### Accessibility Menu Options

| Property                       | Description                                           | Type                                                         |
| ------------------------------ | ----------------------------------------------------- | ------------------------------------------------------------ |
| `contrast_title`               | Title for the contrast settings section.              | `string`                                                     |
| `contrast_description`         | Description for contrast selection instructions.      | `string`                                                     |
| `contrast_noraml_text`         | Label for normal contrast option.                     | `string`                                                     |
| `contrast_color_blind_text`    | Label for color-blind-friendly contrast.              | `string`                                                     |
| `contrast_red_weakness_text`   | Label for red weakness color mode.                    | `string`                                                     |
| `contrast_green_weakness_text` | Label for green weakness color mode.                  | `string`                                                     |
| `screen_reader_title`          | Title for screen reader feature.                      | `string`                                                     |
| `screen_reader_description`    | Description of how the screen reader works.           | `string`                                                     |
| `text_size_title`              | Title for text size settings.                         | `string`                                                     |
| `text_size_description`        | Description of how to use text size controls.         | `string`                                                     |
| `selected_contrast`            | string to set the selected value for contrast option  | "normal" \| "colorblind" \| "redweakness" \| "greenweakness" |
| `selected_text_size`           | string to set the selected value for text size option | "normal" \| "large" \| "small"                               |

### Text Size Control Functions

<table><thead><tr><th>Property</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td><code>smtextsize</code></td><td>Triggered when the user decreases the text size.</td><td><pre><code>EventEmitter
</code></pre></td></tr><tr><td><code>baseTextSize</code></td><td>Triggered when the user selects the default text size.</td><td><pre><code>EventEmitter
</code></pre></td></tr><tr><td><code>lgTextSize</code></td><td>Triggered when the user increases the text size.</td><td><pre><code>EventEmitter
</code></pre></td></tr></tbody></table>

### Contrast Mode Functions

<table><thead><tr><th>Property</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td><code>normalContrast</code></td><td>Triggered when the user selects the normal contrast setting.</td><td><pre><code>EventEmitter
</code></pre></td></tr><tr><td><code>blindContrast</code></td><td>Triggered when the user selects the contrast setting for color blindness.</td><td><pre><code>EventEmitter
</code></pre></td></tr><tr><td><code>redContrast</code></td><td>Triggered when the user selects the contrast setting for red weakness.</td><td><pre><code>EventEmitter
</code></pre></td></tr><tr><td><code>greenContrast</code></td><td>Triggered when the user selects the contrast setting for green weakness.</td><td><pre><code>EventEmitter
</code></pre></td></tr></tbody></table>

### Language and Login Attributes

<table><thead><tr><th>Property</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td><code>language_text</code></td><td>Sets the language text for the language button</td><td><code>string</code></td></tr><tr><td><code>language_button_name</code></td><td>Name attribute for the language button</td><td><code>string</code></td></tr><tr><td><code>languageSwitch</code></td><td>Triggered when the user selects the language switch option.</td><td><p></p><pre class="language-typescriptreact"><code class="lang-typescriptreact">EventEmitter&#x3C;void>
</code></pre></td></tr><tr><td><code>loginLink</code></td><td>URL for the login page, allowing users to navigate to the authentication screen.</td><td><code>string</code></td></tr><tr><td><code>login-text</code></td><td>Text displayed on the login button.</td><td><code>string</code></td></tr><tr><td><code>quickLinks</code></td><td>JSON string representing an array of quick link items, used in the mega menu for fast navigation.</td><td><code>string</code></td></tr><tr><td><code>readSpeakerLink</code></td><td>URL for the ReadSpeaker integration, allowing users to listen to page content.</td><td><code>string</code></td></tr><tr><td><code>accessibility_button_name</code></td><td>Name attribute for the accessibility button</td><td><code>string</code></td></tr><tr><td><p></p><pre class="language-typescriptreact"><code class="lang-typescriptreact">useLoginPopup
</code></pre></td><td>to trigger login dropdown instead of using href link.</td><td>boolean</td></tr><tr><td><p></p><pre class="language-typescriptreact"><code class="lang-typescriptreact">loginPopupLinks
</code></pre></td><td>string array for items in the dropdown used in conjunction with useLoginPopup</td><td>["popupItemLabel":"Profile"","url": "/profile"]</td></tr></tbody></table>

### ReadSpeaker Attribute

| Property          | Description                                                                    | Type     |
| ----------------- | ------------------------------------------------------------------------------ | -------- |
| `readSpeakerLink` | URL for the ReadSpeaker integration, allowing users to listen to page content. | `string` |

### **Sidebar Control**

| Property                    | Description                    | Type     |
| --------------------------- | ------------------------------ | -------- |
| `close_sidebar_button_name` | Label for closing the sidebar. | `string` |

## Anatomy

<figure><img src="/files/Zos9pCNs6TumLDMC3Z1W" alt=""><figcaption></figcaption></figure>

**Logo Bar:** Logos are placed on both ends of the header. The **Government of Dubai logo** is positioned on the left, while the **Digital Dubai logo** is on the right, ensuring prominent branding and organizational representation.

**Navigation Tabs:** A horizontal row of tabs located in the center, providing quick access to different sections of the platform. The **active tab** is visually highlighted to indicate the user’s current location.

**Search:** A magnifying glass icon located in the interactive controls area, accompanied by placeholder text ("Search...") to enable quick content discovery.

**Accessibility Icon:** An icon representing accessibility options, allowing users to adjust settings for better usability, such as increased font size or contrast.

**Language Toggle:** A button labeled "العربية" to enable language switching between Arabic and English for bilingual support.

**Login Button:** A circular icon with "Login" text, allowing users to authenticate and access personalized features or accounts.

**Hamburger Icon:** A collapsible menu icon located on the far left, offering a compact navigation solution for smaller screens or alternative layouts.

## Responsive Behavior

The header component turns to mobile view @ the 1024 breakpoint

***

## Dos and Don'ts

| Dos                                                                                       | Don'ts                                                                                            |
| ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| The top center area is reserved for initiatives logos/banners.                            | Don't add any links to the logo bar center area.                                                  |
| Always use a black shadow overlay on high-quality hero images for the transparent header. | Don't use bright, crowded, or low-quality hero images for the transparent header.                 |
| Use high-quality logos in the logo bar.                                                   | Don't use low-quality logos, make sure to maintain the logo ratio, don't change the brand colors. |
| All logos, links, and Icons should be in white color if a transparent header is used.     | Don't Use colored logos, text, or icons on the transparent header.                                |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://designsystem.dubai.ae/components/header.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.