Header

Used to create a page header.

Submit feedback

View source code

import { Header } from '@uhg-abyss/web/ui/Header';

Container

Use the Container subcomponent of Header to wrap all other elements in the Header.

Brandmark

Use the Brandmark subcomponent of Header to customize brand mark in page header. Clicking on it will trigger a redirect to the home page. Below are the props for Brandmark subcomponent.

logo - prop to provide the logo that will be displayed on the far left side of the header. By default, it will show either the UHC, UHG or Optum logo, depending on the page theme.

Main content

Use the MainContent subcomponent of Header to wrap the main content of the header. This is useful for adding additional elements like relevant buttons or other interactive components that will be placed on the right of the Brandmark.

Utility bar

Use the UtilityBar subcomponent of Header inside the Provider to show any additional content on the top header. This is an "open" container, where you can place utility dropdowns and links.

The example below showcases its use with our Dropdown and Link components.

Actions

Use the Actions subcomponent of Header to show any additional content on the right side of the header. This is an "open" container that takes any children, such as a search box, buttons, or a set of links that provide secondary actions. The example below showcases its use with our DropdownMenu component.

When using these two components together, the NavMenu needs to be wrapped around the Header.Navigation subcomponent. This ensures that the NavMenu has a responsive design, and "hides" on mobile screens (Note: The content is still rendered into the DOM for SEO purposes).

The Header.Navigation has a prop sticky that can be set to true to make the header navigation container sticky at the top of the viewport, or you can pass your own custom CSS properties.

Additionally, adding the Header.HamburgerMenu in to the Header.Actions component allows you to have an external state trigger to display/hide the mobile version of NavMenu

Here is an example for usage of the Header and NavMenu subcomponents (Note: Resize your browser window to visualize the change):

Full layout

Shows a combination of the Header and the NavMenu in a full page.

Note: the sticky prop in the Header.Navigation is set to true in this example.

Header.Container Props

Name	Type	Default	Required	Description
children	React.ReactNode	-		Header content
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties \| Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.

Below are the link(s) to the relevant GitHub type files:

HeaderContainer.types.ts

Header.Brandmark Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties \| Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
hideLogo	boolean	false	-	If true, the logo will be hidden
logo	React.ReactNode	-	-	The logo component that will be displayed on the left side of the Header. By default, it will show a brand logo based on the current theme
logoRedirect	string	-	-	The link that the logo will redirect to when clicked

Below are the link(s) to the relevant GitHub type files:

HeaderBrandmark.types.ts

Header.MainContent Props

Name	Type	Default	Required	Description
children	React.ReactNode	-		Header content
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties \| Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.

Below are the link(s) to the relevant GitHub type files:

HeaderMainContent.types.ts

Header.UtilityBar Props

Name	Type	Default	Required	Description
children	React.ReactNode	-		Header Utility Bar content
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties \| Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.

Below are the link(s) to the relevant GitHub type files:

HeaderUtilityBar.types.ts

Header.Actions Props

Name	Type	Default	Required	Description
children	React.ReactNode	-		Header Actions children
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties \| Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.

Below are the link(s) to the relevant GitHub type files:

HeaderActions.types.ts

Header.Navigation Props

Name	Type	Default	Required	Description
children	React.ReactNode	-		Header Navigation Wrapper
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties \| Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
menuActive	boolean	false	-	Open Navigation Menu
sticky	boolean \| React.CSSProperties	false	-	Make the header navigation container sticky at the top of the viewport, or pass on your own custom css properties.

Below are the link(s) to the relevant GitHub type files:

HeaderNavigation.types.ts

Header.Drawer Props

Name	Type	Default	Required	Description
bottomMenuItems	HeaderMenuItem[] \| null	-	-	The items that will be formatted and displayed in a NavMenu directly under the Header
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties \| Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
drawerPosition	"left" \| "right"	'left'	-	Whether the hamburger menu should be displayed on the left or right side of the Header
drawerSelection	DrawerSelection	-	-	The selected item in the drawer; typically the state returned from a useState call
extraDrawerContent	React.ReactNode	-	-	Extra content that will be rendered at the top of the Header drawer
model	string	-	-	The model of the drawer
setDrawerSelection	React.Dispatch<React.SetStateAction<DrawerSelection>>	-		Function to set the selected item in the drawer; typically the setter returned from a useState call
topMenuItems	HeaderMenuItem[] \| null	-	-	The items that will be formatted and displayed in a NavMenu at the top right of the Header

Below are the link(s) to the relevant GitHub type files:

HeaderDrawer.types.ts

Header.DrawerLink Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties \| Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
href	string	-	-	The URL to navigate to when the link is clicked. Note that this takes precedence over the {@link pathpath} prop.
onClick	() => void	-	-	The function to call when the link is clicked
path	string	-	-	The path to navigate to when the link is clicked. This is used on conjunction with a StateRouter.
routerComponent	React.ComponentType<any>	-	-	Custom router component to use for client-side navigation (e.g., Next.js Link, Gatsby Link, etc.)
title	string	-		The text to display in the link

Below are the link(s) to the relevant GitHub type files:

HeaderDrawerLink.types.ts

Header.Container Classes

Class Name	Description
.abyss-header-root	Root element
.abyss-header-container	Container element

Header.Brandmark Classes

Class Name	Description
.abyss-header-logo-container	Logo container element
.abyss-header-logo-tooltip	Logo tooltip element
.abyss-header-logo	Logo element

Header.MainContent Classes

Class Name	Description
.abyss-header-main-content	Header main content element

Header.UtilityBar Classes

Class Name	Description
.abyss-header-utility-bar-root	Root element
.abyss-header-utility-bar-container	Utility Bar element

Header.Actions Classes

Class Name	Description
.abyss-header-actions	Root element

Header.Hamburger Classes

Class Name	Description
.abyss-

Header.Navigation Classes

Class Name	Description
.abyss-header-navigation-root	Root element

Header.Drawer Classes

Class Name	Description
.abyss-header-drawer-menu-main	Main menu container
.abyss-header-drawer-horizontal-rule	Horizontal rule between menus
.abyss-header-drawer-menu-sub	Sub menu container
.abyss-header-drawer-header	Header container
.abyss-header-drawer-back-button-container	Back button container
.abyss-header-horizontal-rule	Horizontal rule in header
.abyss-header-drawer-selected-menu-name	Selected menu name text
.abyss-header-drawer-selection-content	Selected menu content container
.abyss-header-expand-button	Expand button container
.abyss-header-drawer-menu-item	Menu item container
.abyss-header-drawer-menu-item-button	Menu item button

Header.DrawerLink Classes

Class Name	Description
.abyss-header-drawer-menu-item-button	Menu item button

Keyboard Interactions

Key	Description
Tab	Moves focus to the next focusable element
Enter	If the logo is selected, redirects to the specified link. If focus is inside the navigation menu, redirects to the link if the menu bar item is a redirect, or opens the relevant dropdown menu if the item has one
Space	If focus on a menu bar item with a dropdown, opens the relevant dropdown menu
Left Arrow	When focus is inside one of the navigation menus, focuses the previous menu bar item
Up Arrow	When focus is inside one of the navigation menus, focuses the previous menu bar item
Right Arrow	When focus is inside one of the navigation menus, focuses the next menu bar item
Down Arrow	When focus is inside one of the navigation menus, focuses the next menu bar item. If focus is on an open menu bar item, moves focus into its dropdown menu
Escape	Closes open dropdown menu and moves focus to its menu bar item
Home	If inside a navigation menu, moves focus to the first item in the menu
End	If inside a navigation menu, moves focus to the last item in the menu

Component Tokens

Note: Click on the token row to copy the token to your clipboard.

Search tokens

Header Tokens

Token Name	Value
header.color.surface.header-container	#FFFFFF
header.color.surface.utility-bar	#F3F3F3
header.color.icon.utility.rest	#196ECF
header.color.icon.utility.hover	#004BA0
header.color.icon.utility.active	#002677
header.spacing.gap.horizontal.actions	16px
header.spacing.gap.horizontal.main-content	16px
header.spacing.padding.horizontal.header-container.rest	24px
header.spacing.padding.horizontal.header-container.mobile	16px
header.spacing.padding.horizontal.main-content.rest	16px
header.spacing.padding.horizontal.main-content.mobile	16px
header.spacing.padding.horizontal.utility-bar.rest	40px
header.spacing.padding.horizontal.utility-bar.mobile	12px
header.spacing.padding.vertical.header-container.rest	24px
header.spacing.padding.vertical.header-container.mobile	16px
header.spacing.padding.vertical.utility-bar	8px

Table of Contents

Container
Brandmark
Main content
Utility bar
Actions
Header + NavMenu
Full layout