Menu Bar

The MenuBar is a navigation component that contains up to one CTA Button and an array of links. The links are shown inline in larger viewports and in a dropdown in smaller viewports.

A Menu Bar can be added anywhere on a page, but it is also intended to replace the site navigation on content pages with no header.

Example

Preview

Code

tip

If using this component in a NextJS app, replace the <a/> element used in this code example with the NextJS Link component.

import {
  MenuBar,
  MenuBarContent,
  MenuBarLinks,
  MenuBarCTAs,
} from '@hv/ui/menu-bar';
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
} from '@hv/ui/dropdown-menu';
import { ChevronDown } from 'lucide-react';
import { Button } from '@hv/ui/button';

export default function MenuBarExample({
  cta,
  links,
  linkDirection,
  dropdownSelectText = 'Select Page',
  paddingTop = 'regular',
  paddingBottom = 'regular',
  variant,
  backgroundColor = 'muted',
}) {
  return (
    <MenuBar
      paddingTop={paddingTop}
      paddingBottom={paddingBottom}
      backgroundColor={backgroundColor}
    >
      <MenuBarContent>
        <div className='flex-grow lg:hidden'>
          <DropdownMenu>
            <DropdownMenuTrigger asChild className='group'>
              <Button variant='link'>
                <span className='max-w-48 overflow-hidden text-ellipsis whitespace-nowrap md:max-w-fit'>
                  {dropdownSelectText}
                </span>
                <ChevronDown
                  className='relative top-[1px] ml-1 inline h-3 w-3 transition duration-200 focus:rotate-180 group-data-[state=open]:rotate-180'
                  aria-hidden='true'
                />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent
              align='end'
              sideOffset={5}
              className={`bg-${backgroundColor} px-4 pb-4`}
            >
              <div className='flex flex-col gap-3'>
                {links?.map((link, idx) => (
                  <Button asChild key={idx} variant='link'>
                    <a href={link.href} className='w-fit'>
                      {link.label}
                    </a>
                  </Button>
                ))}
              </div>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
        <MenuBarLinks
          direction={linkDirection}
          className={`hidden lg:flex ${!cta && 'lg:pe-12'}`}
        >
          {links?.map((link, idx) => (
            <Button asChild key={idx} variant='link'>
              <a href={link.href}>{link.label}</a>
            </Button>
          ))}
        </MenuBarLinks>
        {cta && (
          <MenuBarCTAs className='w-fit'>
            <Button asChild variant={variant}>
              <a href={cta.href}>{cta.label}</a>
            </Button>
          </MenuBarCTAs>
        )}
      </MenuBarContent>
    </MenuBar>
  );
}

Variants

Use theicon above to preview

Variant	Description	Values
links	Array of storefront links
CTA	Optional CTA button
dropdownText	Select label displayed when there is no current page	Default is "Select Page"
backgroundColor	Enum of theme background colors	background primary secondary accent muted destructive
linkDirection	Alignment of the links in desktop	rowStart rowEnd rowCenter
paddingTop	Option to control spacing above the menu bar	regular extra
paddingBottom	Option to control spacing below the menu bar	regular extra

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides. Class overrides can be applied to all sub-components.