MegaMenu

The opened section menu from the top bar — groups of links in one or two columns, plus a preview column describing the item under the cursor and under focus alike.

When to use it

A top-bar section with more than one screen. The section button opens this menu, and only inside it are the links.
Links that can be arranged into named groups. A group heading is a working division, not decoration — readers navigate by it.
Screens that benefit from one sentence of context. The preview column shows it for the item the reader is on, and a screen reader hears it from the link itself.
Both the platform side and the customer side. They share the same bar and the same menu, and differ only in the contents of the groups.

When not to use it

A section with a single screen. A menu holding one item is a step too many — make that section a plain link in the bar.
A section with more than two dozen links. The menu splits its columns by itself, but it cannot save a list of everything that ever existed — such a section is really two, and they belong in the bar separately.
A list of actions on a selected record — delete, duplicate, export. This menu holds links to screens, not commands.
An index of pages inside the content, for example in a long settings flow. That is IngotSideNav — it is page content, not the application frame.

Properties

groups: readonly IngotMegaMenuGroup[] — The groups of links. The menu splits columns by itself: one up to seven items, two above that; a group never breaks mid-way.
art: ReactNode — A schematic drawing of the section above the preview text. Decorative — an orientation anchor, not information.
label: string — A translated aria-label for the menu. Without it a screen reader hears just another unnamed navigation.
onLockedItemClick: (item) => void — Click on a locked item — typically opens a modal explaining what the module does and how to enable it.
testId: string — An anchor for tests. It does not affect the appearance.