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"
hamburger_menu_button_name="Menu"
search_button_name="search_button_name"
search_input_name="search_input_name"
search_input_placeholder="Search"
searchfunctionality="() => console.log('Search Functionality')"
use-predesigned-accessibility-menu="true"
accessibility_button_text="accessibility_button_text"
accessibility_button_id="accessibility_button_id"
toggle_accessibility_button_name="toggle_accessibility_button_name"
close_accessibility_button_name="close_accessibility_button_name"
accessibilitymenufunctionality="() => console.log('Accessibility Menu Functionality')"
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"
screen_reader_title="Screen Reader"
screen_reader_description="Listen to the content of the page by clicking play or listen"
text_size_title="Text Size"
text_size_description="Use the buttons below to increase or decrease the text size"
close_sidebar_button_name="close_sidebar_button_name"
language_text="العربية"
language_button_name="language_button_name"
login-text="Login"
login-link="/Login"
read_speaker_link="app-eu.readspeaker.com"
languageswitch="() => console.log('Language Switcher')"
smtextsize="() => console.log('Small Text')"
basetextsize="() => console.log('Base Text')"
lgtextsize="() => console.log('Large Text')"
normalcontrast="() => console.log('Normal Text')"
blindcontrast="() => console.log('Blind Text')"
redcontrast="() => console.log('Red Text')"
greencontrast="() => console.log('Green Text')"
close_menu_button_name="close_menu_button_name"
header_default_submenu="true"
quick-links='[{"label":"Home","active":"true","href":"#","subMenu":[]},{"label":"Services","menuLabel":"Services","href":"#","subMenu":[{"title":"Submenu Item 1","description":"Improve your site ranking","icon":"sentiment_satisfied","href":"#"},{"title":"Submenu Item 2","description":"Improve your site ranking","icon":"sentiment_satisfied","href":"#"},{"title":"Submenu Item 3","description":"Improve your site ranking","icon":"sentiment_satisfied","href":"#"},{"title":"Submenu Item 4","description":"Improve your site ranking","icon":"sentiment_satisfied","href":"#"},{"title":"Submenu Item 5","description":"Improve your site ranking","icon":"sentiment_satisfied","href":"#"}]},{"label":"About","href":"#","subMenu":[]},{"label":"Contact","href":"#","subMenu":[]}]'
side-main-menu-title="Main Menu"
side-menu-items='[{"label":"Home","href":"#","subMenu":[]},{"label":"Initiatives","href":"#","subMenu":[{"headerLabel":"Initiatives","label":"Submenu-1","href":"#","subMenu":[{"headerLabel":"Initiatives","label":"Submenu-2","href":"#","subMenu":[{"headerLabel":"Initiatives","label":"Submenu-4","href":"#"}]},{"headerLabel":"Initiatives","label":"Submenu-3","href":"#"}]},{"headerLabel":"Initiatives","label":"Submenu-1","href":"#","subMenu":[{"headerLabel":"Initiatives","label":"Submenu-2","href":"#","subMenu":[{"headerLabel":"Initiatives","label":"Submenu-4","href":"#"}]},{"headerLabel":"Initiatives","label":"Submenu-3","href":"#"}]}]},{"label":"Services","href":"#","subMenu":[{"headerLabel":"Service","label":"Service-1","href":"#"},{"headerLabel":"Service","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":"#"}]'
></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>
Properties
Logo Attributes
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
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(mega menu) links with optional submenus.
string
header_default_submenu
Enables or disables the default submenu under the card header. Use "true" or "false" as a string.
boolean
Search Attributes
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
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
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
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
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
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
readSpeakerLink
URL for the ReadSpeaker integration, allowing users to listen to page content.
string
Sidebar Control
close_sidebar_button_name
Label for closing the sidebar.
string
Quick Links
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
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.
Last updated