Megamenu
The Megamenu component provides a reusable pattern for megamenu in the interface.
No component examples available.
API
| Parameter | Default | Description |
|---|---|---|
|
menuItems
|
[] | List of arrays containing at least 'label' and 'href' option 'icon' name as string. |
|
parentType
|
default | Select the type of menu parents. |
|
parentStyle
|
false | Select the style of menu parents (only applies when type equals button). |
|
parentStyleColor
|
primary | Select the color of the parent style. (only applies when type equals button). |
|
childType
|
default | Select the type of menu children. |
|
childStyle
|
false | Select the style of menu children. (only applies when type equals button). |
|
childStyleColor
|
primary | Select the color of the child style. (only applies when type equals button). |
|
mobile
|
false | If true, the mega menu will be visible on mobile as well. |
CSS API
| Variable | Default | Type | Values | Description |
|---|---|---|---|---|
|
--c-megamenu--base
|
var(--base) | range | - | Main unit that drives radius and spacing scales. |
|
--c-megamenu--color--primary
|
var(--color--primary) | color | - | Primary |
|
--c-megamenu--color--secondary
|
var(--color--secondary) | color | - | Secondary |
|
--c-megamenu--color--surface
|
var(--color--surface) | color | - | Surface |
|
--c-megamenu--font-family-base
|
var(--font-family-base) | font | - | Body Font |
|
--c-megamenu--font-family-heading
|
var(--font-family-heading) | font | - | Falls back to body font if not set. |
|
--c-megamenu--font-size-300
|
var(--font-size-300) | range | - | Two steps above base in the type scale. Equivalent to h5. |
|
--c-megamenu--color--secondary-contrast
|
var(--color--secondary-contrast) | color | - | Secondary Contrast |
|
--c-megamenu--color--primary-contrast
|
var(--color--primary-contrast) | color | - | Primary Contrast |