Skip to content
EvolveEvolveEvolve

layout

@evolve-storefront/layout · v1.0.0 · Storybook ↗

Page-level building blocks above the @evolve-storefront/ui primitives, such as breadcrumbs with their structured data for search engines. They fetch nothing: your app maps its own data onto a small contract, and the component renders it and emits the SEO metadata.

Get started

  1. Install the package with the peer dependencies it needs. It comes from the Evolve registry, which needs a one-time sign-in.

    pnpm add @evolve-storefront/layout graphql next next-intl react
    Requirements4
    graphql>=16
    next>=16.2.11 <17
    next-intl>=4
    react>=19

  2. Import its styles in the stylesheet where you load Tailwind. Without them the components render unstyled.

    @import "@evolve-storefront/layout/styles.css";

  3. Add its translations to your message files with evolve messages.

Then render it on a page:

import { Breadcrumbs } from "@evolve-storefront/layout/breadcrumbs";
import Link from "next/link";


type Crumb = { name: string; href: string };


export function ProductBreadcrumbs({ trail }: { trail: Crumb[] }) {
  return (
    <Breadcrumbs
      // Ancestors first, the current page last; a Home item is prepended.
      items={trail}
      // Makes the structured data's URLs absolute, which search engines require.
      origin="https://shop.example"
      renderLink={({ href, children, className }) => (
        <Link href={href} className={className}>
          {children}
        </Link>
      )}
    />
  );
}

Components

What you place on your pages. Each one has a preview, its props, and how to change its layout.

AccountMenuSheetThe account menu on a phone: a sheet from the right, where a dropdown's items would be too small to hit.
ErrorPageWhat a shopper sees when a page failed to render: a title, a line of reassurance, the error's digest to quote to support, and a retry.
CountryLanguagePickerThe country and language picker: a compact trigger reading "Nederland · NL", and a dialog asking for the country first and then a language it is read in, each country with its delivery terms.
HeaderSearchThe header search: a form in a landmark whose field suggests terms, categories and products, and recent and popular searches while it is empty.
LocaleSwitcherSwitches the language the storefront is read in, never the market.
LocaleSwitcherListLocaleSwitcher as a plain list, for a drill-down panel in a mobile menu.
AccountOverviewA signed-in visitor's account overview above the body of a page, such as the signed-in home page: a heading over the site's dashboard parts.
BreadcrumbsComposed breadcrumbs (LAYOUT): renders the ui Breadcrumb primitive, adds a Home item, and emits schema.org BreadcrumbList JSON-LD for SEO.
MegaMenuThe site's main navigation on desktop: disclosure buttons that open panels of links, never a menu, so it is announced and operated as links.
MegaMenuIconThe icon for a menu item's icon key, decorative beside its label.
MegaMenuDrillDownThe main navigation on mobile, for a Sheet: one level at a time, sliding to an item's children and back.
NotFoundA page that does not exist: a title, a line saying so, and the ways on the app passes.
FooterThe page footer: a frame for its rows, in the order given.
StickyHeaderThe site header, pinned to the top of the viewport.
UspBarThe selling points in the bar above the header.

More in this package