import { Header } from '@uhg-abyss/web/ui/Header';Container
Use the Container subcomponent of Header to wrap the main header row — the brandmark, actions, and other content that sit in the primary bar.
If your header also needs other rows alongside it, like a Header.UtilityBar or a Header.Navigation, don't nest them inside Container — that breaks its layout, since Container lays its children out in a single flex row. Wrap Container and those other rows together in Header.Root instead. Header.Root stacks full rows correctly and keeps everything inside one <header> landmark. See Header + NavMenu below.
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 Header.Root 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.
Header + NavMenu
When using these two components together, wrap Header.Container and Header.Navigation as siblings inside Header.Root. Header.Root stacks its children in the order given, so Header.Navigation renders as its own row below the main header row — and Header.Root alone renders the header's landmark element, keeping a single, correct landmark rather than a nested one.
Wrap the NavMenu around the Header.Navigation subcomponent. This gives the NavMenu a responsive design that "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
Note
Header.Containercan still be used on its own (withoutHeader.Root) exactly as before, for headers that don't need any additional rows.Header.Rootisn't specific toHeader.Navigation— it stacks whatever children you give it, so it works withHeader.UtilityBar, a custom navigation component, or any other row that needs to sit inside the same<header>landmark.
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 | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined | Header content | ||
className | string | undefined | CSS class name to apply to each element within the component | ||
css | CSSProperties | Partial<Record<"abyss-header-root" | "abyss-header-container", CSSProperties>> | undefined | 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 | undefined | Suffix used to create a unique ID used for automated testing See Component Testing for more information | ||
disableDefaultProviderProps | boolean | undefined | 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. | |
hiddenFrom | Breakpoint | undefined | When defined, the component is hidden once the screen width reaches the specified breakpoint. | ||
slotProps | Partial<Record<ToSlotKey<{ root: LeafSlotDef<"header", "header-root">; container: LeafSlotDef<"div", "header-container">; }, "header">, SlotPropsLeafValue>> | undefined | Props to pass to individual internal slots of the component. See slotProps for more information | ||
visibleFrom | Breakpoint | undefined | When defined, the component is hidden until the screen width reaches the specified breakpoint. |
Header.Brandmark Props
| Name | Type | Default | Description |
|---|---|---|---|
className | string | undefined | CSS class name to apply to each element within the component | |
css | CSSProperties | Partial<Record<"abyss-header-logo-container" | "abyss-header-logo", CSSProperties>> | undefined | 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 | undefined | Suffix used to create a unique ID used for automated testing See Component Testing for more information | |
disableDefaultProviderProps | boolean | undefined | 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. |
hiddenFrom | Breakpoint | undefined | When defined, the component is hidden once the screen width reaches the specified breakpoint. | |
hideLogo | boolean | undefined | false | If true, the logo will be hidden |
logo | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined | 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 | undefined | The link that the logo will redirect to when clicked | |
slotProps | Partial<Record<ToSlotKey<{ logoContainer: LeafSlotDef<"div", "header-logo-container">; logo: LeafSlotDef<("a" | "div")[], "header-logo">; }, "header">, SlotPropsLeafValue>> | undefined | Props to pass to individual internal slots of the component. See slotProps for more information | |
visibleFrom | Breakpoint | undefined | When defined, the component is hidden until the screen width reaches the specified breakpoint. |
Header.MainContent Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined | Header content | ||
className | string | undefined | CSS class name to apply to each element within the component | ||
css | CSSProperties | Partial<Record<"abyss-header-main-content", CSSProperties>> | undefined | 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 | undefined | Suffix used to create a unique ID used for automated testing See Component Testing for more information | ||
disableDefaultProviderProps | boolean | undefined | 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. | |
hiddenFrom | Breakpoint | undefined | When defined, the component is hidden once the screen width reaches the specified breakpoint. | ||
slotProps | Partial<Record<"header-main-content", SlotPropsLeafValue>> | undefined | Props to pass to individual internal slots of the component. See slotProps for more information | ||
visibleFrom | Breakpoint | undefined | When defined, the component is hidden until the screen width reaches the specified breakpoint. |
Header.UtilityBar Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined | Header Utility Bar content | ||
className | string | undefined | CSS class name to apply to each element within the component | ||
css | CSSProperties | Partial<Record<"abyss-header-utility-bar-root" | "abyss-header-utility-bar-container", CSSProperties>> | undefined | 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 | undefined | Suffix used to create a unique ID used for automated testing See Component Testing for more information | ||
disableDefaultProviderProps | boolean | undefined | 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. | |
hiddenFrom | Breakpoint | undefined | When defined, the component is hidden once the screen width reaches the specified breakpoint. | ||
slotProps | Partial<Record<ToSlotKey<{ root: LeafSlotDef<"div", "header-utility-bar-root">; container: LeafSlotDef<"div", "header-utility-bar-container">; }, "header">, SlotPropsLeafValue>> | undefined | Props to pass to individual internal slots of the component. See slotProps for more information | ||
visibleFrom | Breakpoint | undefined | When defined, the component is hidden until the screen width reaches the specified breakpoint. |
Header.Actions Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined | Header Actions children | ||
className | string | undefined | CSS class name to apply to each element within the component | ||
css | CSSProperties | Partial<Record<"abyss-header-actions", CSSProperties>> | undefined | 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 | undefined | Suffix used to create a unique ID used for automated testing See Component Testing for more information | ||
disableDefaultProviderProps | boolean | undefined | 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. | |
hiddenFrom | Breakpoint | undefined | When defined, the component is hidden once the screen width reaches the specified breakpoint. | ||
slotProps | Partial<Record<"header-actions", SlotPropsLeafValue>> | undefined | Props to pass to individual internal slots of the component. See slotProps for more information | ||
visibleFrom | Breakpoint | undefined | When defined, the component is hidden until the screen width reaches the specified breakpoint. |
Header.Navigation Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined | Header Navigation Wrapper | ||
className | string | undefined | CSS class name to apply to each element within the component | ||
css | CSSProperties | Partial<Record<"abyss-header-navigation-root", CSSProperties>> | undefined | 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 | undefined | Suffix used to create a unique ID used for automated testing See Component Testing for more information | ||
disableDefaultProviderProps | boolean | undefined | 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. | |
hiddenFrom | Breakpoint | undefined | When defined, the component is hidden once the screen width reaches the specified breakpoint. | ||
menuActive | boolean | undefined | false | Open Navigation Menu | |
slotProps | Partial<Record<"header-navigation-root", SlotPropsLeafValue>> | undefined | Props to pass to individual internal slots of the component. See slotProps for more information | ||
sticky | boolean | CSSProperties | undefined | false | Make the header navigation container sticky at the top of the viewport, or pass on your own custom css properties. | |
visibleFrom | Breakpoint | undefined | When defined, the component is hidden until the screen width reaches the specified breakpoint. |
Header.Root Props
| Name | Type | Default | Required | A11y | Description |
|---|---|---|---|---|---|
children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined | Header content. Typically a Header.Container followed by a Header.Navigation (or a consumer-provided navigation element), rendered in the order given. | |||
className | string | undefined | CSS class name to apply to each element within the component | |||
css | CSSProperties | Partial<Record<"abyss-header-root-root", CSSProperties>> | undefined | 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 | undefined | Suffix used to create a unique ID used for automated testing See Component Testing for more information | |||
disableDefaultProviderProps | boolean | undefined | 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. | ||
hiddenFrom | Breakpoint | undefined | When defined, the component is hidden once the screen width reaches the specified breakpoint. | |||
slotProps | Partial<Record<"header-root-root", SlotPropsLeafValue>> | undefined | Props to pass to individual internal slots of the component. See slotProps for more information | |||
visibleFrom | Breakpoint | undefined | When defined, the component is hidden until the screen width reaches the specified breakpoint. |
Header.Drawer Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
bottomMenuItems | HeaderMenuItem[] | null | undefined | The items that will be formatted and displayed in a NavMenu directly under the Header | ||
className | string | undefined | CSS class name to apply to each element within the component | ||
css | CSSProperties | Partial<Record<"abyss-header-expand-button" | "abyss-header-drawer-menu-main" | "abyss-header-drawer-horizontal-rule" | "abyss-header-drawer-menu-sub" | ... 6 more ... | "abyss-header-drawer-menu-item-button", CSSProperties>> | undefined | 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 | undefined | Suffix used to create a unique ID used for automated testing See Component Testing for more information | ||
disableDefaultProviderProps | boolean | undefined | 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" | undefined | 'left' | Whether the hamburger menu should be displayed on the left or right side of the Header | |
drawerSelection | DrawerSelection | undefined | The selected item in the drawer; typically the state returned from a useState call | ||
extraDrawerContent | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined | Extra content that will be rendered at the top of the Header drawer | ||
hiddenFrom | Breakpoint | undefined | When defined, the component is hidden once the screen width reaches the specified breakpoint. | ||
model | string | undefined | The model of the drawer | ||
setDrawerSelection | (value: SetStateAction<DrawerSelection>) => void | Function to set the selected item in the drawer; typically the setter returned from a useState call | ||
slotProps | Partial<Record<ToSlotKey<{ menuItem: LeafSlotDef<"div", "header-drawer-menu-item">; menuItemButton: LeafSlotDef<"button", "header-drawer-menu-item-button">; menuMain: LeafSlotDef<...>; ... 7 more ...; expandButton: LeafSlotDef<...>; }, "header">, SlotPropsLeafValue>> | undefined | Props to pass to individual internal slots of the component. See slotProps for more information | ||
topMenuItems | HeaderMenuItem[] | null | undefined | The items that will be formatted and displayed in a NavMenu at the top right of the Header | ||
visibleFrom | Breakpoint | undefined | When defined, the component is hidden until the screen width reaches the specified breakpoint. |
Header.DrawerLink Props
| Name | Type | Default | Required | A11y | Description |
|---|---|---|---|---|---|
className | string | undefined | CSS class name to apply to each element within the component | |||
css | CSSProperties | Partial<Record<"abyss-header-drawer-menu-item-button", CSSProperties>> | undefined | 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 | undefined | Suffix used to create a unique ID used for automated testing See Component Testing for more information | |||
disableDefaultProviderProps | boolean | undefined | 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. | ||
hiddenFrom | Breakpoint | undefined | When defined, the component is hidden once the screen width reaches the specified breakpoint. | |||
href | string | undefined | The URL to navigate to when the link is clicked. Note that this takes precedence over the pathpath prop. | |||
onClick | (() => void) | undefined | The function to call when the link is clicked | |||
path | string | undefined | The path to navigate to when the link is clicked. This is used on conjunction with a StateRouter. | |||
routerComponent | ComponentType<any> | undefined | Custom router component to use for client-side navigation (e.g., Next.js Link, Gatsby Link, etc.) | |||
slotProps | Partial<Record<"header-drawer-menu-item-button", SlotPropsLeafValue>> | undefined | Props to pass to individual internal slots of the component. See slotProps for more information | |||
title | string | The text to display in the link; serves as its accessible name for screen readers. | |||
visibleFrom | Breakpoint | undefined | When defined, the component is hidden until the screen width reaches the specified breakpoint. |
Header.Container Classes
| Class Name | Description |
|---|---|
| .abyss-header-container | Container element |
| .abyss-header-root | Root element |
Header.Brandmark Classes
| Class Name | Description |
|---|---|
| .abyss-header-logo | Logo link/div element |
| .abyss-header-logo-container | Logo container 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-container | Utility Bar element |
| .abyss-header-utility-bar-root | Root element |
Header.Actions Classes
| Class Name | Description |
|---|---|
| .abyss-header-actions | Root element |
Header.HamburgerMenu Classes
| Class Name | Description |
|---|---|
| .abyss-header-expand-button | Hamburger menu button element |
Header.Navigation Classes
| Class Name | Description |
|---|---|
| .abyss-header-navigation-root | Root element |
Header.Root Classes
| Class Name | Description |
|---|---|
| .abyss-header-root-root | Root element |
Header.Drawer Classes
| Class Name | Description |
|---|---|
| .abyss-header-drawer-back-button-container | Back button container |
| .abyss-header-drawer-header | Header container |
| .abyss-header-drawer-horizontal-rule | Horizontal rule between menus |
| .abyss-header-drawer-menu-item | Menu item container |
| .abyss-header-drawer-menu-item-button | Menu item button |
| .abyss-header-drawer-menu-main | Main menu container |
| .abyss-header-drawer-menu-sub | Sub menu container |
| .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-horizontal-rule | Horizontal rule in header |
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
Tip
Click on the token row to copy the token to your clipboard.
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 |