Mega menu morphPro

Tab

Moves through the brand, the sections and the actions. From a trigger whose menu is open, Tab enters that menu; Tab from its last link moves on to the next section and closes it.

Arrow LeftorArrow Right

On the triggers, moves between sections. If a menu is open it follows focus, sliding in from that side. Inside a menu, switches to the previous or next menu and focuses its first link.

HomeorEnd

On the triggers, moves to the first or last section.

EnterorSpace

Toggles the menu of the focused trigger; follows a focused link.

Arrow Down

On a trigger, opens its menu and focuses the first link. Inside a menu, moves to the next link.

Arrow Up

Inside a menu, moves to the previous link; from the first link, returns to the trigger.

Escape

Closes the open menu and returns focus to its trigger, or closes the folded sheet and returns focus to the menu button.

• The header is a nav landmark named by label. Triggers are buttons with aria-expanded and aria-controls pointing at the open menu; plain sections are links, with aria-current="page" when they hold the current page.
• Menus follow the disclosure navigation pattern rather than role="menu": links stay links, Tab order runs from a trigger into its menu, and focus leaving the header closes it.
• The current section is marked with aria-current or its label, never only by the accent mark.
• The folded header uses a menu button with aria-expanded and aria-controls, named Open menu or Close menu. Sections in the sheet are accordion buttons with aria-expanded controlling labelled regions.
• The measuring copy of the row, the highlight, the caret, the band and the safe area overlay are hidden from assistive technology; the measuring copy is also inert.
• Outside presses and Escape close the menu and the sheet from anywhere on the page. Pointer focus draws no ring; keyboard focus shows Arc's shared focus ring. Focused links show the same quiet fill as hover.

• One surface serves every menu. Its position, width and height are springs restated as stiffness and damping, so retargeting mid flight keeps the velocity it has: growing carries a trace of overshoot, shrinking never overshoots, and the caret glides with the position to stay under the trigger.
• Menus hang from the top left of the surface at their natural size. The next menu slides in 36px from the side of the trigger you moved to and the previous one leaves the other way, both with a short opacity and 2px blur crossfade.
• A footer is drawn on a muted band anchored to the bottom edge. The band's height springs with the panel, so a status row grows out of it instead of fading in, and a menu without a footer folds it away.
• Opening from closed lands the surface in place and fades it in with a short drop and a scale from the caret; closing fades it up and away. Reopening while it closes picks up where it is.
• The trigger highlight glides between triggers on a spring with a little life; it appears in place when the pointer enters the row and fades where it is when the pointer leaves. Chevrons turn on the shared spring curve.
• The folded sheet grows its height on the smooth spring and staggers its rows in; accordion sections open with height and opacity together.
• With reduced motion every size and position change lands at once, menus crossfade in 140ms without travel or blur, the highlight jumps and the sheet fades.

• The root is an inline size container. The full row is measured from an invisible copy at its natural width, and the header folds exactly when it stops fitting, into a bar with the brand, the primary action and a menu button.
• The folded sheet spans the header, never runs past the viewport (or --mm-sheet-max), scrolls inside itself and opens one accordion section at a time.
• Menus clamp to the header with an 8px inset; their groups wrap onto new rows when the header is narrower than a menu's natural width, and the caret stays over the trigger.
• Hover behavior only runs for mouse and pen. On touch, triggers toggle on tap and a tap outside closes the menu.

• Only the open menu and, during a switch, the leaving menu are mounted. Menus are measured with a ResizeObserver, and the surface animates width, height and a transform on one absolutely positioned element, so no page layout is touched.
• The highlight and caret are transforms driven by motion values; React renders only when the open section, the hovered trigger or the fold changes.
• Pointer positions are kept in a short ring of samples, and the safe triangle is a single point in triangle test on pointer entry to another trigger.

• Use it as the top navigation of a marketing or product site with three to six sections, where each section holds several destinations worth describing. For a single dropdown use dropdown-menu; for app navigation use a sidebar.
• Keep menus different in shape on purpose: a wide menu with two groups and a feature next to a narrow single list is what makes the morph read. Keep descriptions to one line of five or six words.
• Put only live, meaningful information in footer, such as system status or an announcement; the band's growth draws attention to it.
• Pass onNavigate in a client router so links do not reload the page, and pass current so the accent mark follows the route.
• Give the header room: it folds automatically when the row stops fitting. Use collapseBelow with a number only when the fold must match other breakpoints on the page.
• Place it at the top of a relatively positioned page area; menus and the sheet float over the content below and never push it down.

The full library index for assistants is at /llms.txt.