Fly-out Menu


Users need to have direct access to sub-navigation but the amount of screen estate for navigation is limited


Combine horizontal navigation with a sub-menu that flies-out when the users hovers over the main menu-item


Use when

For experienced users who want quick access to menu items. Typically there is a main page and all clickable items are grouped under a label. The menu items themselves do not link to a page. Space for navigation is limited, if not consider other navigation systems such as a Directory Navigation. Menu items should be found always in the same spot. The number of mouse-clicks should be minimized. No reloads of pages


On mouse-over show the menu. The menu always directly moves up, down or right (never left) in such a way that it does not cover the other menu items. The flying-out should be instant or very quick otherwise users cannot switch quickly. Preferable combined with a Breadcrumbs. The fly-out menu may exist horizontally or vertically.

Issues with Fly-out Menus


Fly-out menus can work well but they may also kill usability. The actual implementation is crucial for its success. On the one hand, fly-out menus save space that may be used better for the content area of the site. But on the other hand it hides the navigation from first sight. It is a kind of 'mystery-meat navigation'. If executed well with the mentioned points address well it provides very quick access to sections in the site without cluttering up the screen estate with navigation. In particular when users 'get it' it may help them a lot. On the other hand, for one-off interactions it may cause usability issues.

More Examples

Microsoft also makes extensive use in their support sites.


Usability and Fly-out Menus

Code examples

More menus in CSS
A List Apart: Suckerfish Dropdowns
Suckerfish improvements
plml logo


1 comment has been added to this pattern.

todd g, 14th November 2007
here are some additional css menu resources (free):

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below