Header

The Header is the topmost section of a website and serves as the primary point of orientation and navigation for users. It typically features the entity logo, main navigation links, secondary actions (such as user tools), and utility controls like search and language options. A well-designed header helps users understand where they are and how to access key areas of the site with ease.

For a consistent and modular user experience, the Sharjah Design System defines both desktop and mobile header variants to ensure optimal presentation and usability across devices.

Must use in this context:

The Sharjah government entities must place the Sharjah government text logo on the right section of the header in English and on the left in Arabic case.
Your entity logo must not exceed the Sharjah logo in general size proportions.
The search element will move to an icon on the mobile view header.
The navigation elements, colours, hover colours and other aspects of the header will adapt to the custom colour swatch an authority may add to to the configuration. For more information on this.

The primary navigation must follow the format listed below:
- There cannot be more than 7 elements added to a navigation.
- The first element must be a link to the homepage.
- The second element must be the link to the service catalogue with a dropdown for services.

Header

Purpose

Must use in this context: