Halstack
Design System
v9.1.0
Overview
Introduction
Utilities
Halstack Provider
Components
Accordion
Alert
Application layout
Bleed
Box
Bulleted List
Button
Card
Checkbox
Chip
Date Input
Dialog
Dropdown
File Input
Flex
Footer
Grid
Experimental
Header
Heading
Inset
Link
Nav Tabs
Number Input
Paginator
Paragraph
Password Input
Progress Bar
Quick Nav
Radio Group
Resultset Table
Select
Sidenav
Slider
Spinner
Switch
Table
Tabs
Tag
Text Input
Textarea
Toggle Group
Typography
Wizard
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.
warning
The
padding prop has been deprecated. Consider using layout components like the Inset for the same purpose.| Name | Default | Description |
|---|---|---|
| underlined: boolean | false | Wether a contrast line should appear at the bottom of the header. |
| content: node | Content 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: function | Content showed in responsive version. It receives the close menu handler that can be used to add that functionality when a element is clicked. | |
| onClick: function | This function will be called when the user clicks the header logo. | |
| margin: string | Size of the bottom margin to be applied to the header ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). | |
| padding: string | object | Deprecated Size 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: number | 0 | Value 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.