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;
href?: string;
renderItem?:
(props: { children: ReactNode })
=> ReactNode;
}The 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 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. |