A section of a site at a glance
A wide panel of link rows, each with an icon and a line on what the page holds, beside an optional featured card. It is the panel only: the host places it and owns the triggers, so it owns open too. Hover a section in this site’s header to see one in place; Site header is the reference host.
With a showcase
The rows run four to a column in two thirds of the panel, and the card fills the last third, its cover stretching to whatever height the rows reach.
Rows only
Without a showcase the rows take the whole panel and wrap into further columns, so a long menu grows sideways and never into a scroll.
Current page
currentHref marks the row for the page being viewed, or a parent of it, one step past the hover wash so the two never read the same.
// From the npm package
import { MegaMenu } from 'rift-ds/components/MegaMenu/MegaMenu';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/mega-menu.json