Navigations

A header is a prominent element typically found at the top of a webpage or application, providing navigation and important information to the user. It often includes branding (such as a logo), navigation links, search functionality, user profile access, and other key actions.

Header Desktop 1Header Desktop 2Header Desktop 3Header Desktop 4Header Desktop 5Header Desktop 6Header Desktop 7
Header Mobile Closed 1Header Mobile Closed 2
Header Mobile Open 1Header Mobile Open 2Header Mobile Open 3Header Mobile Open 4Header Mobile Open 5Header Mobile Open 6

Usages

To provide a consistent and accessible way for users to navigate your site or application and display important actions and information, such as the site logo, navigation links, and user-related actions. We made two different cases depending in which screen you were looking: Desktop and mobile.

Best Practices

Green Arrow Right

Do´s:

  • Use clear labels and icons for navigation items.
  • Adapt the header layout for different devices (desktop, tablet, mobile).
  • Keep the header design consistent across all pages.
Good Best Practices Example
Red Cross X

Dont´s:

  • Avoid adding too many elements that can make the header look cluttered and confusing.
  • Ensure the text and icons in the header are easily readable against the background.
  • Don't ignore how the header looks and functions on mobile devices.
Bad Best Practices Example