Header
The header is an important component in the interface, it is the area dedicated for the navigation across the application and helps users understand what the content of the page is about. They appear at the top of a page, above the main content.
The header is part of the application layout, so it can only be used inside of it. Please check the DxcApplicationLayout documentation.
- Try to avoid to place a large number of items inside the content area.
- Avoid increasing the header height.
- Halstack components placed as a children should follow their respective guidelines.
Following the convention of the variants that can be found in a component, two main variants are defined for the header. Variants: default and underlined.
- Application name: If the application has a specific name, can be placed following the brand image.
- Primary navigation: The links and dropdowns with a navigational purpose.
- Site options: Language selector, settings, or other any option that applies.
- Account: In the case that the application manages accounts, the element for the login and register options should be positioned on the far right except in the tablet and mobile version that will be covered in the following sections.
Due to the applications are accessible from a laptop, tablet and mobile it is necessary to think and design a header version for the corresponding device. The design for smaller devices tries to keep the consistency respect to the other versions, allowing the user experiences a similar interaction although the space available is less.
