Skip to content
EvolveEvolveEvolve

StickyHeader

The site header, pinned to the top of the viewport. A StickyHeaderServiceBar as its first child scrolls away while the rest stays. Below lg the whole header slides out while scrolling down and back on the first scroll up, but never while focus is inside it or one of its menus is open. Rules in styles.css.

import { StickyHeader } from "@evolve-storefront/layout/sticky-header";

Preview

DefaultOpen in Storybook ↗

Usage

On a desktop the service bar scrolls away and the rest of the header stays pinned.

<StickyHeader className="bg-background">
  <StickyHeaderServiceBar className="max-lg:hidden">
    <ServicePromises />
  </StickyHeaderServiceBar>
  <HeaderMain />
  <MegaMenu label={t("main")} renderLink={renderLink}>
    <MegaMenuBar items={items} renderPanel={(item) => <MegaMenuFlyout item={item} />} />
  </MegaMenu>
</StickyHeader>;

Props

No props of its own.

Change the layout

Pass children to StickyHeader to arrange its parts yourself. Every part is exported from @evolve-storefront/layout/sticky-header.

StickyHeaderServiceBarThe row above the header, such as service promises and links, that scrolls away.

No props of its own.