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-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
    first-logo-alt="undefined"
    second-logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
    second-logo-alt="Dubai-Digital-Authority"
    login-link="/login"
    readSpeakerLink=""
    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')">
</dda-header>

 <DdaHeader
 first-logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
    first-logo-alt="undefined"
    second-logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
    second-logo-alt="Dubai-Digital-Authority"
    login-link="/login"
    readspeakerlink="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')"
    quick-links='[{"label":"Home","href":"#","subMenu":[]},{"label":"Services","href":"#","subMenu":[{"title":"Web Development","description":"Build and maintain websites","icon":"sentiment_satisfied","href":"#"},{"title":"SEO Services","description":"Improve your site ranking","icon":"sentiment_satisfied","href":"#"}]},{"label":"About","href":"#","subMenu":[]},{"label":"Contact","href":"#","subMenu":[]}]'
    side-menu-items='[{"label":"Home","href":"#","subMenu":[]},{"label":"Initiatives","href":"#","subMenu":[{"label":"Submenu-1","href":"#"},{"label":"Submenu-2","href":"#"}]},{"label":"Services","href":"#","subMenu":[]},{"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":[]}]'
  />

    <DdaHeader
 first-logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
    first-logo-alt="undefined"
    second-logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
    second-logo-alt="Dubai-Digital-Authority"
    login-link="/login"
    readspeakerlink="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')"
    quick-links='[{"label":"Home","href":"#","subMenu":[]},{"label":"Services","href":"#","subMenu":[{"title":"Web Development","description":"Build and maintain websites","icon":"sentiment_satisfied","href":"#"},{"title":"SEO Services","description":"Improve your site ranking","icon":"sentiment_satisfied","href":"#"}]},{"label":"About","href":"#","subMenu":[]},{"label":"Contact","href":"#","subMenu":[]}]'
    side-menu-items='[{"label":"Home","href":"#","subMenu":[]},{"label":"Initiatives","href":"#","subMenu":[{"label":"Submenu-1","href":"#"},{"label":"Submenu-2","href":"#"}]},{"label":"Services","href":"#","subMenu":[]},{"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":[]}]'

></DdaHeader>

<dda-header
    first-logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
    first-logo-alt="undefined"
    second-logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
    second-logo-alt="Dubai-Digital-Authority"
    login-link="/login"
    readspeakerlink="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')"
    quick-links='[{"label":"Home","href":"#","subMenu":[]},{"label":"Services","href":"#","subMenu":[{"title":"Web Development","description":"Build and maintain websites","icon":"sentiment_satisfied","href":"#"},{"title":"SEO Services","description":"Improve your site ranking","icon":"sentiment_satisfied","href":"#"}]},{"label":"About","href":"#","subMenu":[]},{"label":"Contact","href":"#","subMenu":[]}]'
    side-menu-items='[{"label":"Home","href":"#","subMenu":[]},{"label":"Initiatives","href":"#","subMenu":[{"label":"Submenu-1","href":"#"},{"label":"Submenu-2","href":"#"}]},{"label":"Services","href":"#","subMenu":[]},{"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":[]}]'
></dda-header>

Properties

Property

Description

Type

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.

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 Field NextInteractive Banner

Last updated 18 days ago