Website Header
Website Header components are used to display the header of the website. They are commonly used in websites like Hubtel Web to provide a navigation menu and a logo used to identify the website.
Loading Code Block...Loading Code Block...| Props | Default | Type | Description |
|---|---|---|---|
| logo | null | ReactNode | The logo to display in the header. |
| logoHref | null | string | The href of the logo. |
| navLinks | null | array | The navigation links to display in the header. This is an array of objects with label, dropdownOptions [value, label, href]. |
| isAuthenticated | false | boolean | Whether the user is authenticated or not. |
| notificationCount | 0 | number | The number of notifications to display in the header. |
| cartCount | 0 | number | The number of items in the cart. |
| slotContent | null | ReactNode | Slot area for the default type (can be used to add the search bar) |
| profileDrawerContent | null | ReactNode | Slot area for the profile drawer content |
| cartDrawerContent | null | ReactNode | Slot area for the cart drawer content |
| onMenuClick | null | function | Function to handle the menu click |
| onNotificationClick | null | function | Function to handle the notification click |
| onCartClick | null | function | Function to handle the cart click |
| activeAccount | null | string | The active account to display in the header. |
| availableAccounts | null | array | The available accounts to display in the header. |
| onAccountSwitch | null | function | Function to handle the account switch |
| customMenuItems | null | array | The custom menu items to display in the header. |
| showNotifications | true | boolean | Whether to show the notifications in the header. |
| showCart | false | boolean | Whether to show the cart in the header. |
| pageTitle | null | string | Page title for subpages type |