Header

Headers play a crucial role in structuring content, providing clear navigation and enhancing readability by organizing information into distinct, easily digestible sections for users.

Overview

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

<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"
	
    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"
	
    hamburger_menu_button_name="Menu"
    side-main-menu-title="Main Menu"
    side-menu-items='[{"label":"Home","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","href":"#"},{"label":"Menu 2","href":"#"},{"label":"Menu 3","href":"#"}]'
    
    close_menu_button_name="close_menu_button_name"
    
    quick-links='[
	{"headerMenuLabel":"Home","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>

Header Transparent Mode

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

<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

[
  {
    "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.

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

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

Property
Description
Type

hamburger_menu_button_name

Name attribute for the hamburger menu button

string

close_menu_button_name

Name attribute for the sidebar close button

string

side-main-menu-title

Title for the primary sidebar menu

string

sideMenuItems

JSON string representing an array of side menu items, including links and potential submenus.

string

hide-other-menu

Boolean (true/false) to show or hide the "Other" menu.

string

side-other-menu-title

Title label for the secondary or "Other" menu.

string

other-menu-items

JSON array for "Other" menu items and links.

string

quick-links

JSON array for top-level navigation with default dropdown and megamenu dropdown

string

header_default_submenu

Enables or disables the default submenu under the card header. Use "true" or "false" as a string.

boolean

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

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

Text Size Control Functions

Property
Description
Type

smtextsize

Triggered when the user decreases the text size.

EventEmitter

baseTextSize

Triggered when the user selects the default text size.

EventEmitter

lgTextSize

Triggered when the user increases the text size.

EventEmitter

Contrast Mode Functions

Property
Description
Type

normalContrast

Triggered when the user selects the normal contrast setting.

EventEmitter

blindContrast

Triggered when the user selects the contrast setting for color blindness.

EventEmitter

redContrast

Triggered when the user selects the contrast setting for red weakness.

EventEmitter

greenContrast

Triggered when the user selects the contrast setting for green weakness.

EventEmitter

Language and Login Attributes

Property
Description
Type

language_text

Sets the language text for the language button

string

language_button_name

Name attribute for the language button

string

languageSwitch

Triggered when the user selects the language switch option.

EventEmitter<void>

loginLink

URL for the login page, allowing users to navigate to the authentication screen.

string

login-text

Text displayed on the login button.

string

quickLinks

JSON string representing an array of quick link items, used in the mega menu for fast navigation.

string

readSpeakerLink

URL for the ReadSpeaker integration, allowing users to listen to page content.

string

accessibility_button_name

Name attribute for the accessibility button

string

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

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.

PreviousCredit Card Input FieldNextHome Carousel

Last updated