Header

import { Header } from '@enmovil/ui-design-system';

The application's top bar, with app and customer logos, a side-navigation toggle, a user menu and a theme toggle. It can also show page search and a notifications dropdown.

Properties

Property	Type	Required	Default	Allowed values	Description
className	string	No	—	—	Extra CSS class added to the header bar.
appLogo	string	No	—	—	Image source of the app logo on the left. Nothing is shown when it is absent.
customerLogo	string	No	—	—	Image source of the customer logo on the right, before the user menu. Nothing is shown when it is absent.
userDetails	userProfile	No	—	—	The signed-in user, shown as an avatar and name that open the user menu. Without it the header shows "Welcome User" and the default avatar.
menuItems	menuItem[]	No	—	—	Entries of the user menu, listed below the theme toggle.
showThemeToggler	boolean	No	false	—	Adds a Light / Dark theme toggle at the top of the user menu.
theme	string	No	'light'	'light', 'dark'	Colour scheme of the header bar. Also the theme selected in the theme toggle when the header first renders.
showSearch	boolean	No	false	—	Shows a Search button that opens a page search over pages.
pages	PageItem[]	No	—	—	Pages offered by the page search. Requires showSearch.
headerActions	headerAction[]	No	[]	—	Icon buttons shown on the right of the header, before the customer logo.
appLogoHeight	number	No	—	—	Height of the app logo in pixels. Without it the logo keeps its default height.
customerLogoHeight	number	No	—	—	Height of the customer logo in pixels. Without it the logo keeps its default height.
hideToggleSideNav	boolean	No	false	—	Hides the side-navigation toggle (the menu icon on the left).
showNotifications	boolean	No	false	—	Shows the notifications bell. The bell only appears when headerActions has at least one item.
notifications	HeaderNotificationItem[]	No	[]	—	Notifications listed in the notifications dropdown. Requires showNotifications.

userDetails

An object (userProfile) with these fields:

Field	Type	Required	Description
username	string	Yes	Shown next to the avatar. Falls back to "Welcome User" when userDetails is absent or has no name.
email	string	Yes	Declared, but not rendered by the component.
profilePicture	string	No	Avatar image source. Falls back to the bundled user icon.

menuItems

An array of objects (menuItem). Each object has these fields:

Field	Type	Required	Description
label	string	Yes	Text of the menu entry; also its key, so labels must be unique.
icon	React.ReactNode	No	Icon shown before the label.
actionFunction	() => void	No	Called when the entry is clicked.

pages

An array of objects (PageItem). Each object has these fields:

Field	Type	Required	Description
name	string	Yes	Page title shown in the search results and matched against the search text (case-insensitive).
path	string	Yes	Route the search navigates to when the page is picked. The header must be inside a React Router router.
icon	React.ReactNode	No	Icon shown before the page name in the search results.

headerActions

An array of objects (headerAction). Each object has these fields:

Field	Type	Required	Description
icon	React.ReactNode	No	Icon of the action button.
onClick	() => void	No	Called when the action button is clicked.
tooltip	string	No	Tooltip and accessible name of the action button.
render	React.ReactNode	No	Custom content shown in place of the icon button. When set, icon, onClick and tooltip are ignored.

notifications

An array of objects (HeaderNotificationItem). Each object has these fields:

Field	Type	Required	Description
key	string	Yes	Unique identifier, passed to the notification callbacks.
subject	string	Yes	Title of the notification. Its first two letters, upper-cased, form the notification's badge.
message	string	Yes	Body text of the notification.
isRead	boolean	No	Marks the notification as read. Unread notifications are counted on the bell.
time	Dayjs	No	When the notification arrived, a Day.js date, shown as relative time (for example "5 mins ago").

Other attributes

Header passes 272 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.

Events

Name	Signature	When it fires
onClickAppLogo	((e: MouseEvent<HTMLImageElement, MouseEvent>) => void)	Fires when the app logo is clicked. When set, the logo can also be activated with Enter or Space.
onClickCustomerLogo	((e: MouseEvent<HTMLImageElement, MouseEvent>) => void)	Fires when the customer logo is clicked. When set, the logo can also be activated with Enter or Space.
onClickUserProfile	((e: MouseEvent<HTMLDivElement, MouseEvent>) => void)	Fires when the user avatar / name is clicked, alongside opening the user menu.
onToggleTheme	((theme: "light" | "dark") => void)	Fires with the chosen theme when the user picks Light or Dark in the theme toggle. The header also sets data-theme on the page's <body>.
onToggleSideNav	(() => void)	Fires when the side-navigation toggle is clicked.
onClickMarkAsRead	((key: string) => void)	Fires with a notification's key when its read indicator is clicked.
onClickDeleteNotification	((key: string) => void)	Fires with a notification's key when its close icon is clicked.
onPageSearch	((text: string) => void)	Fires as the page-search text changes. Requires showSearch.
onPageSelect	((page: PageItem) => void)	Fires when a page is picked in page search (Enter or click), before navigation. Requires showSearch.
onNotificationClick	((key: string) => void)	Fires when a notification row is clicked, but not its mark-as-read or delete icon. Requires showNotifications.
onNotificationsOpenChange	((open: boolean) => void)	Fires when the notifications dropdown opens or closes. Requires showNotifications.
onMouseEnter	MouseEventHandler<HTMLElement>	Fires when the pointer enters the header bar.
onMouseLeave	MouseEventHandler<HTMLElement>	Fires when the pointer leaves the header bar.

Children

Header does not accept children.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.

Loading playground…

Storybook

Open Header in Storybook to try every story with the full set of controls.