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.
Last updated
Headers play a crucial role in structuring content, providing clear navigation and enhancing readability by organizing information into distinct, easily digestible sections for users.
Last updated
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.
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.
firstLogoAlt
Alternative text for the primary logo for accessibility purposes.
string
firstLogoSrc
URL of the primary logo displayed in the header.
string
loginLink
URL for the login page, allowing users to navigate to the authentication screen.
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
secondLogoAlt
Alternative text for the secondary logo for accessibility purposes.
string
secondLogoSrc
URL of the secondary logo, typically displayed in a different theme or color variation.
string
sideMenuItems
JSON string representing an array of side menu items, including links and potential submenus.
string
languageSwitch
Triggered when the user selects the language switch option.
smTextSize
Triggered when the user decreases the text size.
baseTextSize
Triggered when the user selects the default text size.
lgTextSize
Triggered when the user increases the text size.
normalContrast
Triggered when the user selects the normal contrast setting.
blindContrast
Triggered when the user selects the contrast setting for color blindness.
redContrast
Triggered when the user selects the contrast setting for red weakness.
greenContrast
Triggered when the user selects the contrast setting for green weakness.
language_text
Sets the language text for the language button
string
hamburger_menu_button_name
Name attribute for the hamburger menu button
string
accessibility_button_name
Name attribute for the accessibility button
string
search_button_name
Name attribute for the search button
string
search_input_name
Name attribute for the search input field
string
language_button_name
Name attribute for the language button
string
close_menu_button_name
Name attribute for the sidebar close button
string
close_accessibility_button_name
Name attribute for the close button for the accessibility menu
string
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.
The header component turns to mobile view @ the 1024 breakpoint
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.
