HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
MegamenuView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA section of a navigation with a trigger that opens a panel of links.StableSince 0.1.0NavigationUsageimport'@fusion.dev/helix/megamenu'import'@fusion.dev/helix-headless/megamenu'Preview
API ReferenceRoothelix-megamenuA section of a navigation with a trigger that opens a panel of links.
PropTypeDescriptionbandBelownumberDefault640The page width, in pixels, below which a card panel is shown as a band. At
zero, it never is.closeDelaynumberDefault220How long a pointer leaving the trigger and the panel waits before the panel
closes, in milliseconds. The pointer needs the time to cross from the
trigger to the panel. The attribute also takes a CSS time, such as 0.2s.defaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.labelstringDefault""The section's name, used for the default trigger and the panel.openbooleanWhether the element is open.openDelaynumberDefault120How long a pointer rests on the trigger before the panel opens, in
milliseconds, under open-on="hover". A pointer crossing the bar on its
way somewhere else opens nothing. The attribute also takes a CSS time, such
as 0.1s.openOn"click"|"hover"Default"hover"Whether hovering over the trigger opens the panel (hover), or only a press
does (click).placement"bottom"|"bottom-end"|"bottom-start"|"left"|"left-end"|"left-start"|"right"|"right-end"|"right-start"|"top"|"top-end"|"top-start"Default"bottom-start"The side of the trigger a card panel opens on, when there is room. It
moves if that side does not fit. A band ignores it, since a band spans the
page under its bar.variant"band"Whether the panel is a card under the trigger or a band across the page.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The panel's contents, such as your own lists of links and their headings.indicatorA mark for the open trigger, shown while the panel is open, such as a bar or an arrow pointing at the panel.triggerThe control that opens the panel. When it is empty, a button named by label is shown.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventThe panel is about to close. Cancelable.helix-before-openHelixBeforeOpenEventThe panel is about to open. Cancelable.toggleToggleEventThe panel opened or closed. Carries newState and oldState.
MethodTypeDescriptionrequestOpen(next: boolean) => booleanRequests that the element open or close, and returns whether the change
was applied.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptioncolumnsThe panel's default slot. It draws no box until a sheet gives it a display.indicatorThe indicator slot, rendered while the panel is open.surfaceThe floating panel that opens.triggerThe default trigger button, shown when the trigger slot is empty.
CSS PropertyDescription--megamenu-backdropThe filter behind the panel, none by default. This family has no material property, so this and --megamenu-background-color set the panel's material.--megamenu-background-colorThe panel's fill.--megamenu-border-widthThe width of the panel's edge. Follows --helix-border-floating, which is 0 unless a theme changes it, so the panel stands out by its shadow.--megamenu-column-sizeThe minimum width of a column before the grid wraps.--megamenu-durationHow long the panel takes to open and close.--megamenu-from-block-sizeThe height of the panel this one took over from, written on the surface while it is open.--megamenu-from-inline-sizeThe width of the panel this one took over from, written on the surface while it is open.--megamenu-full-sizeThe maximum width of the band's contents, which are centered in it.--megamenu-gapThe space between the panel's columns.--megamenu-paddingThe space inside the card's edge.--megamenu-shadowThe shadow under the panel. Follows --helix-shadow-floating, so the panel has a shadow by default, because it sits over content you cannot predict.--megamenu-sizeThe maximum width of the panel.--megamenu-surface-block-sizeThe panel's own height, written on the surface while it is open.--megamenu-surface-inline-sizeThe panel's own width, written on the surface while it is open.--megamenu-topWhere the panel starts, measured from the bar above it.--megamenu-trigger-colorThe trigger's text color at rest.--megamenu-trigger-font-sizeThe size of the trigger's text.--megamenu-trigger-font-weightThe weight of the trigger's text.--megamenu-trigger-hover-colorThe trigger's text color under the pointer.--megamenu-trigger-open-background-colorThe trigger's fill while its panel is open.--megamenu-trigger-open-colorThe trigger's text color while its panel is open.--megamenu-trigger-padding-inlineThe space either side of the trigger's text.--megamenu-trigger-radiusThe trigger's corners.
Custom stateDescriptioncurrentA link in the panel carries aria-current="page", so the trigger can show the section you are in.from-endThe panel opened in place of one earlier in the bar, so it can enter from the end side.from-startThe panel opened in place of one later in the bar, so it can enter from the start side.narrowThe page is narrower than band-below, so the panel is shown as a band whatever its variant.openThe panel is open, and the trigger is shown as current.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.to-endThe panel closed because one earlier in the bar opened, so it can leave toward the end.to-startThe panel closed because one later in the bar opened, so it can leave toward the start.
Roothelix-headless-megamenuA section of a navigation with a trigger that opens a panel of links.
PropTypeDescriptionbandBelownumberDefault640The page width, in pixels, below which a card panel is shown as a band. At
zero, it never is.closeDelaynumberDefault220How long a pointer leaving the trigger and the panel waits before the panel
closes, in milliseconds. The pointer needs the time to cross from the
trigger to the panel. The attribute also takes a CSS time, such as 0.2s.defaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.labelstringDefault""The section's name, used for the default trigger and the panel.openbooleanWhether the element is open.openDelaynumberDefault120How long a pointer rests on the trigger before the panel opens, in
milliseconds, under open-on="hover". A pointer crossing the bar on its
way somewhere else opens nothing. The attribute also takes a CSS time, such
as 0.1s.openOn"click"|"hover"Default"hover"Whether hovering over the trigger opens the panel (hover), or only a press
does (click).placement"bottom"|"bottom-end"|"bottom-start"|"left"|"left-end"|"left-start"|"right"|"right-end"|"right-start"|"top"|"top-end"|"top-start"Default"bottom-start"The side of the trigger a card panel opens on, when there is room. It
moves if that side does not fit. A band ignores it, since a band spans the
page under its bar.variant"band"Whether the panel is a card under the trigger or a band across the page.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The panel's contents, such as your own lists of links and their headings.indicatorA mark for the open trigger, shown while the panel is open, such as a bar or an arrow pointing at the panel.triggerThe control that opens the panel. When it is empty, a button named by label is shown.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventThe panel is about to close. Cancelable.helix-before-openHelixBeforeOpenEventThe panel is about to open. Cancelable.toggleToggleEventThe panel opened or closed. Carries newState and oldState.
MethodTypeDescriptionrequestOpen(next: boolean) => booleanRequests that the element open or close, and returns whether the change
was applied.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptioncolumnsThe panel's default slot. It draws no box until a sheet gives it a display.indicatorThe indicator slot, rendered while the panel is open.surfaceThe floating panel that opens.triggerThe default trigger button, shown when the trigger slot is empty.
CSS PropertyDescription--megamenu-from-block-sizeThe height of the panel this one took over from, written on the surface while it is open.--megamenu-from-inline-sizeThe width of the panel this one took over from, written on the surface while it is open.--megamenu-surface-block-sizeThe panel's own height, written on the surface while it is open.--megamenu-surface-inline-sizeThe panel's own width, written on the surface while it is open.--megamenu-topWhere the panel starts, measured from the bar above it.
Custom stateDescriptioncurrentA link in the panel carries aria-current="page", so the trigger can show the section you are in.from-endThe panel opened in place of one earlier in the bar, so it can enter from the end side.from-startThe panel opened in place of one later in the bar, so it can enter from the start side.narrowThe page is narrower than band-below, so the panel is shown as a band whatever its variant.openThe panel is open, and the trigger is shown as current.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.to-endThe panel closed because one earlier in the bar opened, so it can leave toward the end.to-startThe panel closed because one later in the bar opened, so it can leave toward the start.
Examples
NameDescriptionBandA panel that spans the page from edge to edge, for links too wide to fit under one trigger.EventsThe events a megamenu sends before and after its panel opens or closes.Open On ClickA megamenu that opens only on a press, with open-on set to click.PreviewA navigation item that opens a panel of links in columns.PreviewA navigation item that opens a panel of links in columns.SeveralThree megamenus in one navigation. Opening one closes the panel that was open.