Flyout menus

Mega-menu popover for marketing nav. Click trigger to toggle a panel; closes on click-away or Escape.

Preview

React preview

LiveView (HEEx)

alias DesignSystem.UI.FlyoutMenus

<FlyoutMenus.flyout_menu id="solutions" label="Solutions">
  <:item href={~p"/analytics"} description="Get a better understanding of your traffic">
    Analytics
  </:item>
  <:item href={~p"/engagement"} description="Speak directly to your customers">
    Engagement
  </:item>
</FlyoutMenus.flyout_menu>

<FlyoutMenus.flyout_menu id="more" label="More" variant="simple">
  <:item href={~p"/reports"}>Reports</:item>
  <:item href={~p"/automations"}>Automations</:item>
</FlyoutMenus.flyout_menu>

React (JSX)

import { FlyoutMenu } from "../ui/index.mjs"

<FlyoutMenu
  label="Solutions"
  items={[
    { name: "Analytics", href: "/analytics", description: "Get a better understanding of your traffic" },
    { name: "Engagement", href: "/engagement", description: "Speak directly to your customers" },
  ]}
/>

<FlyoutMenu
  label="More"
  variant="simple"
  items={[
    { name: "Reports", href: "/reports" },
    { name: "Automations", href: "/automations" },
  ]}
/>