# Header

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FwJ7SrzaAKMbNrkCOXBGX%2FHeader%20-%20Overview.png?alt=media&#x26;token=a8d45770-18d5-4da5-aaa4-3c7d8c2b048f" 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](https://designsystem.dubai.ae/developers/navigation-routers) 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="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F7FzYYxKBY3lmjM0AfmTP%2FHeader%20-%20Anatomy.png?alt=media&#x26;token=a6831339-bae2-41d8-a87d-8f96ac2e2ce4" 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.                                |