Mega menu
The panel alone, as MegaMenuBlockRenderer shows it during live preview. In a header it opens under its bar item; see Header blocks for the global and the one call that builds the bar.
An editor sees the kit on Header items (NAV_ITEMS_FIELD) inside the admin workspace: a rail of bar items, Link vs Mega type cards, destinations through LINK_FIELD, a two-up column builder, and a preview of the bar. When the Header has an admin.livePreview URL, that preview is the site’s real header in a frame (desktop width, scaled to the canvas), with menu=<item index> holding the mega being edited open; it reloads after each autosave, so it matches the Live Preview pane and the published header exactly. Without a live preview URL it falls back to a kit sketch of the bar, which cannot show the site’s looks or icons. Column widths are percent tokens that must total 100%. Each section has a name for the editor fold, independent of the optional public eyebrow. Adding a link leaves the display name empty, with placeholder “Link Display Name”.
The column widths, read as fractions, must add up to 100%. The rule is the array’s own validate, so the editor sees “The columns add up to 75%. They need to add up to 100%.” as they build, and the global’s publish refuses the same. Custom widths skip it.
Every destination (the trigger landing page, a section’s links, the overview link, the call to action) is picked from published pages or pasted as a URL, and resolves through the site’s resolveLink. A link whose page is missing or unpublished is dropped from the panel rather than rendered pointing nowhere. An unpublished trigger landing page omits the bar href and keeps the panel.
A row with no columns, or whose columns hold no complete links, renders nothing, and headerItemsFromBlocks drops it.
import { megaMenuBlock } from "@bison-lab/payload-blocks";
// In the navigation global's `items` blocks array:megaMenuBlock({ variants, icons })import { MegaMenuBlockRenderer } from "@bison-lab/payload-blocks/react";
// In the site's registry:megaMenu: MegaMenuBlockRenderer,Fields
Section titled “Fields”The table below is generated from megaMenuBlock(megaMenuSampleOptions), the options the sample was written against. A site’s own variants and icons replace the two selects’ options.
| Field | Type | Notes |
|---|---|---|
label * | text | |
type | radio | Labelled “Link”. One of page, external. Default "page". |
page | relationship | Relationship to pages. |
href | text | Labelled “URL”. A full URL ("https://example.com"), "mailto:" or "tel:", or a site path ("/contact"). |
newTab | checkbox | Labelled “Open in a new tab”. Default false. |
panel | group | |
panel.maxWidth | select | One of narrow, standard, wide. Default "standard". |
panel.columns * | array | 1 to 4 rows. Opens with 1 empty row; the admin field will not remove below that. |
panel.columns[].width | select | One of 25, 33, 50, 66, 75, 100. Default "100". |
panel.columns[].divider | checkbox | Labelled “Draw a line on the left of this column”. Default false. |
panel.columns[].sections | array | |
panel.columns[].sections[].name | text | Labelled “Section name”. Editor label for this fold. Independent of the optional eyebrow on the public panel. |
panel.columns[].sections[].eyebrow | text | Small heading above this group; leave empty for none |
panel.columns[].sections[].display | select | One of featured, list. Default "list". |
panel.columns[].sections[].hideDescriptionsOnMobile | checkbox | Labelled “Hide descriptions on mobile”. Default true. |
panel.columns[].sections[].links | array | |
panel.columns[].sections[].links[].type | radio | Labelled “Link”. One of page, external. Default "page". |
panel.columns[].sections[].links[].page * | relationship | Relationship to pages. |
panel.columns[].sections[].links[].href * | text | Labelled “URL”. A full URL ("https://example.com"), "mailto:" or "tel:", or a site path ("/contact"). |
panel.columns[].sections[].links[].label * | text | Labelled “Label”. |
panel.columns[].sections[].links[].newTab | checkbox | Labelled “Open in a new tab”. Default false. |
panel.columns[].sections[].links[].description | textarea | Supporting line under the label. Optional. |
panel.columns[].sections[].links[].variant | select | The look of this featured link. One of primary, secondary. |
panel.columns[].sections[].links[].icon | select | Glyph shown before a list link. Optional. One of help, mail. |
panel.footer | group | The strip under the columns. Leave both empty for no footer. |
panel.footer.overview | group | Labelled “Overview link”. The section's own landing page, so it stays reachable from the bar. |
panel.footer.overview.type | radio | Labelled “Link”. One of page, external. Default "page". |
panel.footer.overview.page | relationship | Relationship to pages. |
panel.footer.overview.href | text | Labelled “URL”. A full URL ("https://example.com"), "mailto:" or "tel:", or a site path ("/contact"). |
panel.footer.overview.label | text | Labelled “Label”. |
panel.footer.overview.newTab | checkbox | Labelled “Open in a new tab”. Default false. |
panel.footer.cta | group | Labelled “Call to action”. |
panel.footer.cta.type | radio | Labelled “Link”. One of page, external. Default "page". |
panel.footer.cta.page | relationship | Relationship to pages. |
panel.footer.cta.href | text | Labelled “URL”. A full URL ("https://example.com"), "mailto:" or "tel:", or a site path ("/contact"). |
panel.footer.cta.label | text | Labelled “Label”. |
panel.footer.cta.newTab | checkbox | Labelled “Open in a new tab”. Default false. |
* required.