MegaMenuDrillDown

The main navigation on mobile, for a Sheet: one level at a time, sliding to an item's children and back. Each level opens with "All "; its Back button names the level it returns to. Opening a level focuses Back; going back focuses the item that opened it. A top-level item's promo shows under its level.

import { MegaMenuDrillDown } from "@evolve-storefront/layout/mega-menu-drill-down";

Preview

DefaultOpen in Storybook ↗

Usage

Mobile: one level at a time, sliding to an item's children and back. Each level opens with "All ", and Back names the level it returns to. Opening a level focuses Back; going back focuses the item that opened it.

<Sheet>
  <MegaMenuDrillDown
    label={t("main")}
    items={items}
    renderLink={renderLink}
    renderPromo={renderPromo}
  />
</Sheet>;

Props

Prop	Type	Description
items	readonly MegaMenuItem<unknown>[]
label	string	Accessible name of the navigation, such as "Main".
renderLink?	MegaMenuLinkRenderer
renderPromo?	MegaMenuPromoRenderer<unknown>
icons?	Readonly<Record<string, ComponentType<SVGProps<SVGSVGElement>>>>	The site's icons by name; without it, no item shows an icon.
renderLevel?	((parent: MegaMenuItem<unknown>) => ReactNode)	A level's own content in place of its list, such as MegaMenuBrandsLevel for the brands. Return null for the default list.

Any other props go to the root element, like on a plain HTML element.

Change the layout

Pass children to MegaMenuDrillDown to arrange its parts yourself. Every part is exported from @evolve-storefront/layout/mega-menu-drill-down.

MegaMenuBrandsLevelThe brands as a drill-down level, for renderLevel: the same content as the desktop MegaMenuBrands panel, sized for a phone.

Prop	Type	Description
item	MegaMenuBrandsItem
total?	number
renderLink?	MegaMenuLinkRenderer

Examples

BrandsThe brands as a level of their own, with the same content as the desktop panel.

<MegaMenuDrillDown
  label={t("main")}
  items={[...items, brands]}
  renderLink={renderLink}
  renderLevel={(parent) =>
    parent.id === brands.id ? <MegaMenuBrandsLevel item={brands} total={brandCount} renderLink={renderLink} /> : null
  }
/>;

Open in Storybook ↗

With IconsThe same icon names on each row, before the label; an unknown name shows none.

<MegaMenuDrillDown label={t("main")} items={items} renderLink={renderLink} icons={icons} />;

Open in Storybook ↗