Flyout Menus
Click-driven dropdown patterns for product navigation, editorial callouts, and full-width discovery menus.
How To Use This Page
Flyout Menus sits inside the Marketing part of the catalog and collects reusable examples that solve the same job in different ways.
This page currently groups 6 examples so you can compare structure, emphasis, and density before choosing an implementation direction.
How The Content Is Grouped
- The examples are grouped as a single Marketing reference page so you can compare variations without leaving the route.
- Use the jump links to move straight to the most relevant example once you know which structure, layout, or emphasis pattern you need.
Start With
Simple
A compact dropdown with four core destinations.
Stacked with Footer Actions
Stacked links with two quick actions in the footer.
Stacked with Footer List
Primary items up top with a denser utility list in a tonal footer.
Two Column with Solid Icons
A wider grid for feature-heavy product menus.
Full Width
A full-width flyout pairing main navigation with recent editorial content.
Full Width Two Columns
A balanced two-column panel for products and resources.
Simple
Simple
A compact dropdown with four core destinations.
Acme
Product navigation
Mock page content
Use a compact flyout for a short product list with fast scan labels and concise supporting detail.
Stacked with Footer Actions
Footer actions work well when the menu is primarily navigational but still needs quick escape hatches for deeper exploration.
Stacked with Footer List
This pattern balances two primary destinations with a denser utility list below.
Two Column with Solid Icons
Two Column with Solid Icons
A wider grid for feature-heavy product menus.
Wider, two-column flyouts work best once the product surface grows beyond a simple stacked list.
Full Width
Full Width Two Columns
Full Width Two Columns
A balanced two-column panel for products and resources.
Split layouts separate primary product discovery from educational and support resources without overcrowding either side.