Navigation

• The Navigation Bar is separated into 3 sections:
  1. Logo
  2. Main Menu
  3. Action Buttons
• Depending on the content of the navigation (buttons, cart etc) and the length of the text you may use up to 6 links in the Main Menu. (Suggested: Our Tests, Locations, Blog, For Doctors, About Us, Contact)
• Always leave some white space to account for smaller screens as the layout might break otherwise.
• The navigation bar should feel easy and intuitive to use. Use short and clear text for the links and actions.
• Do not overwhelm the users with too many options as they might avoid interacting with the navigation.
• The colour for all text and elements in the menu should be Blue-700.

When having a larger number of links, you may join the Main Menu with the Action Buttons and consider having a separate sticky button for the cart (or other actions) instead.

Once the user scrolls past the menu, it should become sticky with a gradient blue background

Clicking on the menu magnifying glass icon opens a search bar

The simple dropdown is used to display a small number of child pages and when no subcategories are needed. You can further divide the links into columns to avoid long and narrow lists but avoid having less than 5 links in each column. Always aim to have the space below the logo empty when the simple dropdown menu is open and open the submenu below its parent element

The megamenu should be used when having a larger number of subpages. The subpages can be further divided into categories within the menu.

• No menu items are displayed unless the menu is open
• Clicking on the burger icon opens a dropdown with an accordion-style menu.
• The language switcher is moved to the bottom of the screen, along with a search bar.
• Menu items have a font size of 19px and 36px of space between them.

• When the menu is closed only the cart icon is displayed.
• Clicking on the burger icon opens a dropdown with an drilldown-style menu.
• The current selection stays highlighted at the top with a back button, and any subpages are displayed below.
• Third-level pages are displayed as normal text (large paragraph size).
• The language switcher is moved to the bottom of the screen, along with the buttons and a searchbar.

This method is used when expecting a large number of results. It can give the user more context of the size and current position.

Load More

This method uses a single page for all content but can’t handle very lage numbers of results as this would increase load times and burden the browser.

Contrary to the Infinite scroll method it requires a click from the user to load more results.