Header
The header is a structural component placed at the top of the interface. It provides global access to navigation, branding, and user actions, ensuring consistency and orientation across products and applications.
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 |
|---|---|---|---|
New appTitle | string | String used to configure the header application title. | - |
New navItems | (GroupItem | Item)[] | Array of navigation items to be displayed in the header navigation menu. Each item can be a single/simple item or a group item. Being {
badge?: ReactElement;
icon?: string | SVG;
label: string;
onSelect?: () => void;
selected?: boolean;
}and {
badge?: ReactElement;
icon?: string | SVG;
label: string;
items: (Item)[];
} | - |
New responsiveBottomContent | React.ReactNode | The content rendered in the bottom part of the header menu under the navigation items when in responsive mode. | - |
New searchBar | {
onBlur: (value: string) => void;
onCancel: () => void;
onChange: (value: string) => void;
onEnter: (value: string) => void;
placeholder?: string;
} | When provided, a search bar trigger is shown at the start of the side content. Activating the trigger expands the search bar, enabling search interactions. In responsive mode, the search bar is displayed directly (without a trigger), and the | - |
New sideContent | React.ReactNode | (isResponsive: boolean) => React.ReactNode | Content to be displayed on the right side of the header. It can be a ReactNode or a function that receives a boolean indicating if the header is in responsive mode and returns a ReactNode. | - |