Retractable Menu


Users need to access the navigation but they may need the screen space even more


Create a menu that can be put aside and easily retrieved again.


Use when

When the screen space is scarce and the Main Navigation takes relatively too much space. Alternatively consider a horizontal Trail Menu in combination with Fly-out Menu.


Implemented using dynamic html, will also require some form of Liquid Layout.


This pattern mainly saves a lot of screen-space while having the menu still available. In contrast to a Fly-out Menu or Overlay Menu a retractable menu stays on the page when activated.

More Examples

plml logo


0 comments have been added to this pattern

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