Navigation Bar
The navigation bar component is used to display the primary navigation located in the upper part of the website. It includes a collection of links that users utilize to move between different sections of the website.
Structure
First level
In the first level, or default state of the navigation bar, the user is able to see the major blocks of information.
Next to the content, the BASF logo is placed in the left corner of the logo bar. On the right side, the user is able to start the website search or log into a personal account in selected countries.
Second level
If the user clicks on one of the main links on the first level, the second level opens up. On the left side, the user is able to navigate to the overview-page of the chosen topic. Then, beneath, there are all subpages of the selected menu item listed.
On the right side, countries have the possibility to include two teasers to subpages which they want to highlight. They attract attention as they also contain images.
In the upper right section of the navigation menu, the user is always able to see the current weather forecast of his location and navigate to the weather page by clicking on it.
Third level
Some points contain a third level of navigation. The third level of navigation works the same way as the second one. Only exception is: The quicklinks dissolve, when the third level opens up.
Best practice
The navigation component should:
Contain primary navigation items that perform an action on click. Each action should navigate to a URL or trigger another action, such as a modal overlay.
Only use concise wordings. Use as few words as possible to describe each item label.