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.


underlined: booleanfalseWether a contrast line should appear at the bottom of the header.
content: nodeContent showed in the header. Take into account that the component applies styles for the first child in the content, so we recommend the use of React.Fragment to be applied correctly. Otherwise, the styles can be modified.
responsiveContent: functionContent showed in responsive version. It receives the close menu handler that can be used to add that functionality when a element is clicked.
onClick: functionThis function will be called when the user clicks the header logo.
margin: stringSize of the bottom margin to be applied to the header ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
padding: string | objectSize of the padding to be applied to the custom area of the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
tabIndex: number0Value of the tabindex for all interactuable elements, except those inside the custom area.



Everything between this tags will be displayed as a dropdown. If you want to show a DxcDropdown, as a shortcut, you can also use it as a direct child of the DxcHeader without the tags, but we recommend to use it with the tags since some styles will be applied for a better fit in the header.


Header in application layout