<st-mega-menu-column>
JSON type: MegaMenuColumn
One column (or one group within a column) of an st-mega-menu: a heading, an optional line of
description, then its links stacked — usually st-menu-items with variant="link". Nest
columns to stack several headed groups in one column, as okta.com does.
variant="card" puts the column on a tinted rounded tile and variant="accent" on a solid
accent tile with light text; both suit a row of equal columns without intro or featured area.
variant="product" makes a product card for a row of products: an icon tile and a tag pill on a
top row, the heading and description, the links as rows
with a → arrow (a new-tab link keeps its ↗ icon), and a full-width cta-label + cta-href
button pinned to the bottom. The icon tile shows icon (an iconify name), or, when icon-src is set,
that image at 28px on the same tinted tile (icon-src-dark, if set, replaces it on the dark theme). The
card lifts and gets an accent border on hover or focus. Set
accent (any CSS colour) to tint it; it defaults to the theme accent. A card whose link is the
page being shown (see st-header's current-path) becomes the "You are here" card: a 2px accent
border, a faint accent wash, a currentLabel pill and a solid button. Inside an inline
(hamburger) header panel the card does not lift.
decoration (none default, flow, orbit, waves or ribbon) draws faint curvy line art in
the card's accent behind its top-right corner. It is product-only and sits under the content;
it drifts on hover or focus, but not in the inline panel or with reduced motion.
cta-label + cta-href add a pill button at the bottom of any variant's column.
The heading (when href is set) and the button fire a cancelable mega-menu-select event
(detail: { href }) before navigating; a host doing client-side routing calls
event.preventDefault() on it. A link whose href is the page being shown (see st-header's
current-path) gets aria-current="page".
Usage
import '@sankhyatronics/sankhya-cms/mega-menu-column'; // registers <st-mega-menu-column>
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
heading | heading | string | '' | |
href | href | string | '' | Makes the heading a link (e.g. to the section's overview page). |
description | description | string | '' | |
variant | variant | 'plain' | 'card' | 'accent' | 'product' | 'plain' | plain (default), card (tinted tile), accent (solid accent tile, light text) or product (a product card). |
ctaLabel | cta-label | string | '' | Text of a pill button at the bottom of the column; needs cta-href. |
ctaHref | cta-href | string | '' | |
currentVariant | current-variant | '' | 'plain' | 'card' | 'accent' | '' | Variant the column takes while its heading or button links to the page being shown, e.g. a card that turns accent on its own product page. Empty (default) keeps variant at all times. |
icon | icon | string | '' | Small icon tile on a product card: an iconify icon name, e.g. heroicons:book-open. |
iconSrc | icon-src | string | '' | Image icon of a product card (28px inside the 44px tile), e.g. a product logo. Replaces the iconify icon when set. |
iconSrcDark | icon-src-dark | string | '' | Dark-theme variant of icon-src, shown on the site's dark theme (:root.dark) in place of it. Needs icon-src. |
tag | tag | string | '' | Short label pill on the top row of a product card, e.g. Open source. |
accent | accent | string | '' | Accent of a product card, any CSS colour (sets --st-mega-menu-column-accent). |
decoration | decoration | 'none' | 'flow' | 'orbit' | 'waves' | 'ribbon' | 'none' | Decorative curvy line art behind a product card's top-right corner: flow (lines fanning down-left), orbit (concentric arcs), waves (parallel waves across the top) or ribbon (crossing loops). none (default) draws nothing. Other variants ignore it. |
currentLabel | current-label | string | 'Current' | "You are here" marker on the product card of the page being shown. |
currentPath | — | string | '' | Page path the header is showing; set by st-header. A link whose href matches gets aria-current="page". |
current | current | boolean | false | True while the column is the page being shown: while current-variant applies, or always for a product card. Set by the column, never from outside. |
Slots
| Slot | Description |
|---|---|
| (default) | The column's links, or nested st-mega-menu-column groups. |
Events
| Event | Detail | Description |
|---|---|---|
mega-menu-select | The heading link or the button was clicked (cancelable; detail { href }). |
See the live examples in Storybook.