Proximus design systemDev
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Header

Container attached to the top of a page helping user navigate through a hierarchy of content.

last modified: 01/01/1601 01:00:00

Overview

Header is a consistently available user interface element that contains global actions and navigation providing users access to key sections and functionalities within the website.It contains global actions and navigation elements, ensuring seamless navigation and interaction throughout the platform.

Mobile
Desktop

The header's layout is adjusted for mobile and desktop devices to match their unique usability needs, ensuring users can navigate easily on their chosen device.

Types

There are different types of header depending on its environment.

Default

This is the regular header on Proximus website.

Mobile
Desktop

MyProximus

This header is on the MyProximus web pages, once user is logged in.

Mobile
Desktop

  1. CBU (Private individuals, self-employed and medium enterprises)

  2. EBU (Large companies)

Negative

For some cases like Pickx TV pages, negative version is available:

Mobile
Desktop

Anatomy

Mobile
Desktop

  1. Top navigation
    Contains segments and language switches, facilitating easy access to different segments of the website and language preferences.

  2. Main Navigation
    Contains primary navigational elements, guiding users to important sections of the website.

  3. Logo area
    Space of brand logos for visibility and recognition within the header. Logo is clickable and, by default, an entry point to the Homepage.

  4. Right navigation
    Featuring quick actions and direct links, the right navigation offers convenient access to frequently used features and important destinations.

  5. Tabs
    Serve as the primary level of navigation, guiding users through various pages or categories of the website.

Behaviors

Hambuger menu

On mobile, the majority of navigation functionalities are accessible through the hamburger menu.

  1. Top navigation
    Allows users to navigate through different levels of the menu and to close the menu.

  2. Menu title
    Indicates the type of menu being accessed.

  3. Navigation level 1
    First level of navigation, which goes further on the menu.

  4. Navigation level 2
    Second level of navigation leading users directly to specific pages.

  5. Direct navigation
    Offers quick actions and direct links for immediate access to relevant content or features.

  6. Category title
    Provides context for the category of links within the menu.

  7. Bottom navigation
    Sticky area featuring segments and a language switch for convenient access and navigation.

Mega Dropdown

The mega dropdown feature enhances navigation efficiency on desktop devices, offering users access to the second level of navigation by clicking on the navigation tab.

Default

  1. MDD navigation area
    Divided until 6 blocks (3 per line maximum), including a block dedicated to existing customers containing entry points for high-visited pages or user needs.

  2. Category title
    Provides context for the category of links, helping users understand the content within.

  3. Navigation level 2
    Direct access to secondary navigation options, allowing users to navigate to specific pages efficiently.

  4. Direct navigation
    Offers quick actions and direct links for immediate access to relevant content or features.

  5. Close
    Allows users to close the Mega Dropdown by clicking on this button, the associated tab, or anywhere else outside the dropdown area.

With subnav

Developped for MyEnterprise (EBU) navigation, this MDD provides an additional level of navigation for complex structures.

  1. Sub navigation area
    Side nav contains the sub level of navigation.

  2. Sub navigation
    Considered as level 2 of navigation, it allows users to navigate deeper to specific categories. There is always one sub nav selected by default.

  3. Navigation level 3
    Offers direct access to third navigation options, allowing users to navigate to specific pages efficiently.

  4. Close
    Allows users to close the Mega Dropdown by clicking on this button, the associated tab, or anywhere else outside the dropdown area.

Segments and language switch

The segment and language menus open upon clicking, enabling users to switch between different business units or language seamlessly.

Segment switch

Mobile
Desktop

Language switch

Mobile
Desktop

MyProximus button

The MyProximus button serves as a pivotal element within the header component, offering distinct states to accommodate various user interactions:

  1. Logged Off
    This is the default state of the button, visible when the user is either not logged in or does not possess an active account.

  2. Logged In
    When user is successfully logged into their account, the MyProximus button dynamically displays their initials, providing visual confirmation of their logged-in status.

  3. Active
    When user is logged-in, the button transforms into an active state upon clicking, providing direct access to the MyProximus menu for easier navigation.

Shopping basket

When an item is added to the shopping basket, an icon with a notification dot appears on the header. Clicking on this icon opens the basket menu, which provides a summary of the items added to the cart.

Company selector (EBU)

To select the appropriate company on MyProximus EBU, a dropdown menu appears containing all available companies for selection.

last modified: 01/01/1601 01:00:00

Sizes and colors

last modified: 01/01/1601 01:00:00
Razor

To choose the version of the header, you have to change the parameter Page.HeaderVersion at the beginning of your document.

You can add class to body with Page.bodyClass and change the theme with Page.theme parameter.

Default, regular header on Proximus website

Unidentified user

With Mega Dropdown (MDD)

Simple navigation

Negative like Pickx TV pages

MyProximus, once user is logged in

CBU (Private individuals, self-employed and medium enterprises)

Negative

EBU (Large companies) with SubNavigation

Negative

Extended layout

No login button

One login

Co-branding

With logo

Written name

Branded component

Scarlet website

White label theme

Skip main content

Accessibility

Just before header tag, there is a "Skip to main content" link visible in focus. This must be translate to current page language.

Hamburger menu

Warning

If language selector visible on mobile (outside burger), don't add burger menu ( .rs-burger ) and burger title ( .rs-mobile-nav-tit ) HTML to the page.

Javascript needs

On burger button tag, aria-controls value must be the id of header tag.

Javascript of header manage for you the value of aria-expanded attribute. By default, you need to set it to "false".

If you want to close MDD and hamburger menu at the same time, use header24.close(); function.

Navigation (1 level)

Accessibility

Add aria-current="page" attribute on highlight level 1 button when the displayed page is the pointed page.
If current page is a subpage, you can highlight level 1 by adding this class rs-nav-current to the button tag.

data-text="copy" on button value must be the same value as visible copy (CSS need this attribute to avoid visual bug on hover).

Mega Dropdown (2 levels) (MDD)

How to trigger the js

Each button is linked to its own panel div.rs-mdd :

  • button.rs-nav-item[aria-controls] need same value as for div.rs-mdd[id]
  • div.rs-mdd[aria-labelledby] need same value as for button.rs-nav-item[id]

If you want to close MDD and hamburger menu at the same time, use header24.close(); function.

Header MDD got dispatch event that you can trigger:

  • Open: NAV.addEventListener('header24.mdd.open', FUNCTION);
    Your FUNCTION will be triggered when MDD inside NAV is opened.
  • Close: NAV.addEventListener('header24.mdd.close', FUNCTION);
    Your FUNCTION will be triggered when MDD inside NAV is closed.

Inside your FUNCTION, event.target.getAttribute('aria-labelledby') give you ID of MDD opened/closed.

NAV refers to html element nav[data-mdd] .

FUNCTION refers to function of your choice.

Accessibility

div.rs-nav-list[aria-label] is navigation purpose. This must be translate to current page language.

Add aria-current="page" attribute on highlight level 1 button when the displayed page is the pointed page.
If current page is a subpage, you can highlight level 1 by adding this class rs-nav-current to the button tag.

Add tabindex="-1" on other button level 1. Attention: always one mdd button must be without this attribute.

data-text="copy" on button value must be the same value as visible copy (CSS need this attribute to avoid visual bug on hover).

Warning

Don't forget to add one <div class="rs-mdd-backdrop"></div> after all contents.

Panel

Accessibility

All panel need attribute tabindex="0" . Never change this value to another.

Copy "Back" must be translate to current page language:

  • EN: Back to menu
  • FR: Retour au menu
  • NL: Terug naar menu
  • DE: Zurück zum Menü

title value and copy "Close" must be translate to current page language:

  • EN: Close
  • FR: Fermer
  • NL: Sluit
  • DE: Schließen

Content is divided into 3 zones/columns. Each zone div.rs-mdd-zone can contain as many topics as you want.

Topics

Accessibility

p.rs-mdd-topic-title[id] and ul.rs-mdd-topic-list[aria-labelledby] values must be the same.

For links with target="_blank" please follow this documentation.

MDD panel contains topics. Each topic is composed of a title/list description, a list of links, a spotlight button (toaster for example) and/or a spotlight link.

Dynamic content

Loading state

How to trigger the js

Remove rs-mdd-content class from div content.

aria-busy must be set to "true" and aria-label must be filed.

Accessibility

Content div doesn't have class rs-mdd-content (remove it). It have all those attributes role="alert" aria-live="polite" aria-busy="true" aria-label="Please wait... Your content is loading" .

For spinner please follow this documentation.

Loaded state

How to trigger the js

Add rs-mdd-content class to div content.

aria-busy must be set to "false" and aria-label must be empty.

Replace div.rs-spinner by the MDD content (zones and topics or error message).

After content is loaded, you have to use this javascript function: header24.mdd.init(CONTEXT);

CONTEXT refers to document or html element parent.

Accessibility

Content div have class rs-mdd-content (put it back). It have all those attributes role="alert" aria-live="polite" aria-label="" aria-busy="false" . Keep aria-label="" empty.

For spinner please follow this documentation.

Error state

How to trigger the js

Add rs-mdd-content class to div content.

aria-busy must be set to "false" and aria-label must be empty.

Replace div.rs-spinner by the MDD content (zones and topics or error message).

After content is loaded, you have to use this javascript function: header24.mdd.init(CONTEXT);

CONTEXT refers to document or html element parent.

Accessibility

Content div have class rs-mdd-content (put it back). It have all those attributes role="alert" aria-live="polite" aria-label="" aria-busy="false" . Keep aria-label="" empty.

For spinner please follow this documentation.

Empty states

For empty state HTML please follow this documentation.

Subnavigation (level 3) (inside MDD)

How to trigger the js

Each button is linked to its own panel div.rs-subnav-mdd :

  • button.rs-subnav-item[aria-controls] need same value as for div.rs-subnav-mdd[id]
  • div.rs-subnav-mdd[aria-labelledby] need same value as for button.rs-subnav-item[id]
Accessibility

div.rs-subnav-list[aria-label] is navigation purpose. This must be translate to current page language.

Add tabindex="-1" on other button level 1. Attention: always one subnav button must be without this attribute.

All panel need attribute tabindex="0" . Never change this value to another.

Copy "Back" must be translate to current page language:

  • EN: Back to menu
  • FR: Retour au menu
  • NL: Terug naar menu
  • DE: Zurück zum Menü

This HTML replace any content of default MDD to add a third level navigation.

Topics

Accessibility

For links with target="_blank" please follow this documentation.

ul.rs-subnav-topic got by default rs-subnav-8topics class. You can replace it by one of this list depend of your need:

  • rs-subnav-6topics
  • rs-subnav-8topics
  • rs-subnav-10topics

6, 8, 10 correspond to maximum items inside list.

No access message

Message box

For message box please follow this documentation.

Topics list could be replace by a message box.

Language switch

Warning

If language selector visible on mobile (outside burger), don't add burger menu ( .rs-burger ) and burger title ( .rs-mobile-nav-tit ) HTML to the page.

Javascript needs
  • button[aria-controls] need same value as for linked ul[id] tag.
  • ul[aria-labelledby] need same value as for linked button[id] tag.

Javascript of header manage for you the value of aria-expanded attribute. By default, you need to set it to "false".

On mobile view, language selector could be inside or outside the hamburger menu. Choose the right class to put on div.rs-lang tag to get the desired result:

  • rs-burger-outside : on mobile view, we directly see this element
  • rs-burger-inside : on mobile view, element is inside burger menu

Don't put rs-burger-outside and rs-burger-inside together.

Accessibility

Attributes lang and hreflang are abbrevation (lowercase).

span.rs-lang-content copy is abbrevation (uppercase).

Attributes aria-label and title copies are full language name, no translation : for exemple "Français" stay like this for all language.

button[aria-label] is followed by ": Select a language" copy, this must be translate to current page language:

  • EN: Select a language
  • FR: Sélectionner une langue
  • NL: Selecteer een taal
  • DE: Wählen Sie eine Sprache

Segment switch

Javascript needs
  • button[aria-controls] need same value as for linked ul[id] tag.
  • ul[aria-labelledby] need same value as for linked button[id] tag.

Javascript of header manage for you the value of aria-expanded attribute. By default, you need to set it to "false".

Accessibility

button[aria-label] is followed by ": Select a segment" copy, this must be translate to current page language:

  • EN: Select a segment
  • FR: Sélectionner un segment
  • NL: Selecteer een segment
  • DE: Wählen Sie ein Segment

MyProximus button

Accessibility

title value and copy "Close" must be translate to current page language:

  • EN: Close
  • FR: Fermer
  • NL: Sluit
  • DE: Schließen
Javascript needs
  • button[aria-controls] need same value as for linked div[id] tag.
  • div[aria-labelledby] need same value as for linked button[id] tag.

Javascript of header manage for you the value of aria-expanded attribute. By default, you need to set it to "false".

Accessibility

Attributes aria-label and title copies are description with full name of user.

Quick links (Icons Area)

On mobile view, each quick link could be inside or outside the hamburger menu. Choose the right class to put on li tag to get the desired result:

  • rs-burger-outside : on mobile view, we directly see this element
  • rs-burger-inside : on mobile view, element is inside burger menu

Don't put rs-burger-outside and rs-burger-inside together.

Search icon

Javascript needs

button[aria-controls] need same value as for linked div[id] tag.

Javascript of header manage for you the value of aria-expanded attribute. By default, you need to set it to "false".

Search pop-up is after the header html.

Shopping basket

Accessibility

title value and copy "Close" must be translate to current page language:

  • EN: Close
  • FR: Fermer
  • NL: Sluit
  • DE: Schließen
Javascript needs
  • button[aria-controls] need same value as for linked div[id] tag.
  • div[aria-labelledby] need same value as for linked button[id] tag.

Javascript of header manage for you the value of aria-expanded attribute. By default, you need to set it to "false".

Subaccount selector

Or Compagny selector or Role selector or Customer selector or Whatever name...

Javascript needs
  • button[aria-controls] need same value as for linked div[id] tag.
  • div[aria-labelledby] need same value as for linked button[id] tag.

Javascript of header manage for you the value of aria-expanded attribute. By default, you need to set it to "false".

JavaScript

Here are files needed for the header:

  • header2024.min.js : Basics, focustrap, expandable and burger
  • header2024MDD.min.js : To add if MDD needed
  • header2024TLC.min.js : To add if TLC needed
  • header2024external.min.js : all in one file with basics, focustrap, expandable, burger and MDD
How to trigger the js

If you add header html to the page after page loaded, you have to use this JS function header24.init(CONTEXT);

If you want to close MDD and hamburger menu at the same time, use header24.close(); function.

CONTEXT refers to document or html element parent.

Hamburger menu

Warning

If language selector visible on mobile (outside burger), don't add burger menu ( .rs-burger ) and burger title ( .rs-mobile-nav-tit ) HTML to the page.

Javascript needs

On burger button tag, aria-controls value must be the id of header tag.

Javascript of header manage for you the value of aria-expanded attribute. By default, you need to set it to "false".

If you want to close MDD and hamburger menu at the same time, use header24.close(); function.

Mega Dropdown (2 levels) (MDD)

How to trigger the js

Each button is linked to its own panel div.rs-mdd :

  • button.rs-nav-item[aria-controls] need same value as for div.rs-mdd[id]
  • div.rs-mdd[aria-labelledby] need same value as for button.rs-nav-item[id]

If you want to close MDD and hamburger menu at the same time, use header24.close(); function.

Header MDD got dispatch event that you can trigger:

  • Open: NAV.addEventListener('header24.mdd.open', FUNCTION);
    Your FUNCTION will be triggered when MDD inside NAV is opened.
  • Close: NAV.addEventListener('header24.mdd.close', FUNCTION);
    Your FUNCTION will be triggered when MDD inside NAV is closed.

Inside your FUNCTION, event.target.getAttribute('aria-labelledby') give you ID of MDD opened/closed.

NAV refers to html element nav[data-mdd] .

FUNCTION refers to function of your choice.

Loading state

How to trigger the js

Remove rs-mdd-content class from div content.

aria-busy must be set to "true" and aria-label must be filed.

Loaded state

How to trigger the js

Add rs-mdd-content class to div content.

aria-busy must be set to "false" and aria-label must be empty.

Replace div.rs-spinner by the MDD content (zones and topics or error message).

After content is loaded, you have to use this javascript function: header24.mdd.init(CONTEXT);

CONTEXT refers to document or html element parent.

Subnavigation (level 3) (inside MDD)

How to trigger the js

Each button is linked to its own panel div.rs-subnav-mdd :

  • button.rs-subnav-item[aria-controls] need same value as for div.rs-subnav-mdd[id]
  • div.rs-subnav-mdd[aria-labelledby] need same value as for button.rs-subnav-item[id]

Language switch and Segment switch

Javascript needs
  • button[aria-controls] need same value as for linked ul[id] tag.
  • ul[aria-labelledby] need same value as for linked button[id] tag.

Javascript of header manage for you the value of aria-expanded attribute. By default, you need to set it to "false".

MyProximus button, Shopping basket and Subaccount selector

Javascript needs
  • button[aria-controls] need same value as for linked div[id] tag.
  • div[aria-labelledby] need same value as for linked button[id] tag.

Javascript of header manage for you the value of aria-expanded attribute. By default, you need to set it to "false".

Deprecated

EXPIRY DATE: 09/2024

The element below are not usefull anymore and should no longer be used.
This element will no longer be available from the expiry date meaning the related css will be removed and the element design will be broken if it's not adapted to the new html.

Old header with rs-header2020-wrapper around are deprecated. All the HTML inside must be replace by the new one. To find all, look for rs-header2020 class.