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): a rail of bar items, Link vs Mega type cards, destinations through LINK_FIELD, a two-up column builder, and a sticky FloatingNavBlock preview. Advanced CSS column widths stay on the schema so existing rows do not migrate; the kit does not render them.
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 “Goes to”. 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[].customWidth | text | A CSS width: 13rem, 1fr, minmax(0, 1fr) |
panel.columns[].divider | checkbox | Labelled “Draw a line on the left of this column”. Default false. |
panel.columns[].sections | array | |
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 “Goes to”. 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 lumbar, si. |
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 “Goes to”. 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 “Goes to”. 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. |
panel.customWidths | checkbox | Labelled “Type a CSS width for each column instead of choosing a percentage”. Default false. |
panel.customMaxWidth | text | Panel width in rem, e.g. 30. Leave empty to use the preset above. |
* required.