Header | Abyss

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.

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.Container can still be used on its own (without Header.Root) exactly as before, for headers that don't need any additional rows.
Header.Root isn't specific to Header.Navigation — it stacks whatever children you give it, so it works with Header.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.