Header Navigation component

set up the main component of the Header Navigation Configuration page

  • add a logo
  • add areas
  • add a search bar
  • add a login option

The Header Navigation component is the main component of the Header Navigation Configuration page. This component needs to be set up in order to have access to the other Header components. It contains the logo, login, search bar, areas and access the Navigation Tabs.

on this page:
Component settings , Opens In New Window
Step by step , Opens In New Window

Introduction

The Header Navigation is the first and main component of the Header Navigation Configuration page. Besides hosting a logo for your website it will grant access to the Navigation Tabs, a login option, different areas and a search bar. Only once this component is set up, are the other header components available.

Glossary:

Example

Component settings

tab: General

In the General tab, a style, navigation pattern and menu pattern can be chosen.

Header Style: Standard

If the Header Style Standard is choosen, you can select the Navigation Pattern and Menu Pattern.

Front-End Examples

Standard Truncated - On click

Standard Truncated - On mouseover

Switch to mobile - not visible

Switch to mobile - visible

Mobile only 

Hidden Navigation

Header Style: Microsite

If the Header Style Microsite is choosen, you can olny select the Header Behaviour, Theme and Transperancy in the General tab

Front-End Examples

Microsite normal

Microsite transparent

Microsite normal sticky

Microsite transparent sticky

tab: Logo

In the Logo tab, a logo can be added to the Header Navigation.

Logo:

Display Second Logo:

tab: Area

In the Area tab, an Area prefix and different Areas can be added to the Header Navigation.

This can be used to seperate different areas of the website. If a viewer is only interested in options for businesses, for example, they can select the buisness area.

Area Prefix:

Areas:

tab: Login

In the Login tab, a Login option (e.g. Netbanking, George) can be added to the Header Navigation.

type: Single button

A Button only provides one login option.

Login Single Button:

type: Dropdown link list

A Dropdown link list provides multiple login options.

Login Dropdown link list:

tab: Search

In the Search tab, a Search bar can be added to the Header Navigation.

Search Provider: Elasticsearch

Elasticsearch is the recommended Search Provider.

Search Bar:

For further information see: Search Component 

Step by step

1

2

3

4

5

Related topics

Used recurring elements