<st-mega-menu>
JSON type: MegaMenu
The rich layout of a mega-menu panel, after okta.com: an optional intro column on the left (a
large heading, a description and, under a divider, quick links in slot="intro"), then the
link columns side by side (st-mega-menu-columns in the default slot), then an optional
featured column on the right (featured-heading over the st-mega-menu-feature cards in
slot="featured"). Slot it into an st-dropdown with mega set.
The layout follows the width it is given, not the viewport (a container query): side by side
when there is room; intro and featured column above/below two link columns on a medium panel;
everything stacked in the narrow drill-down panel st-header shows on a phone (where the intro
heading is left out — the drill-down already shows the section's name).
cta-label + cta-href add a call-to-action pill pinned to the foot of the intro column, so the
column ends level with the featured cards instead of leaving an empty gap under the text.
Usage
import '@sankhyatronics/sankhya-cms/mega-menu'; // registers <st-mega-menu>
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
heading | heading | string | '' | Large title of the intro column. |
description | description | string | '' | Text under the intro title. |
featuredHeading | featured-heading | string | '' | Heading over the featured cards. |
columns | columns | number | 0 | Number of link columns side by side at full width. 0 (the default) uses one per slotted column. |
ctaLabel | cta-label | string | '' | Label of the call-to-action pill at the foot of the intro column. Needs cta-href. |
ctaHref | cta-href | string | '' | Target of the intro column's call to action. |
visible | visible | boolean | true | Whether the menu panel is shown. Set to false to hide it entirely (it keeps its slotted content). |
Slots
| Slot | Description |
|---|---|
| (default) | The link columns (st-mega-menu-columns, or any blocks). |
intro | Quick links under the intro text, e.g. st-menu-items with an icon. |
featured | Promo cards (st-mega-menu-features), stacked. |
Events
| Event | Detail | Description |
|---|---|---|
MEGA_MENU_LAYOUT_EVENT | CustomEvent |
See the live examples in Storybook.