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.
| Name | Type | Description | Default |
|---|---|---|---|
| underlined | boolean | Whether a contrast line should appear at the bottom of the header. | false |
| content | React.ReactNode | Content shown 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 | (closeHandler: () => void) => React.ReactNode | Content shown in responsive version. It receives the close menu handler that can be used to add that functionality when a element is clicked. | - |
| onClick | () => void | This function will be called when the user clicks the header logo. | - |
| margin | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Size of the bottom margin to be applied to the header. | - |
| tabIndex | number | Value of the tabindex for all interactive elements, except those inside the custom area. | 0 |
Everything between the 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.