Start with the shape
Read the figure
The numbered parts explain the decisions behind the composition. Read the relationships first; the colors are simply there to make the structure visible.
Disclose navigation on demand while keeping its trigger discoverable.
- 01Discoverable trigger
A visible Menu label or familiar control reveals the navigation.
- 02Disclosed links
The open state presents destinations in a readable, useful order.
- 03Return to content
Closing the menu restores the content and a predictable focus position.
How the pattern works
Hidden navigation moves a set of links behind a clear control. A menu button can preserve space for a focused task or an immersive visual, especially when a full navigation row does not fit.
The trade-off is discoverability: people cannot scan destinations until they open the menu. A useful implementation makes the trigger obvious, communicates its state, and provides a predictable way back to the content.
Where it fits—and what to consider
A useful choice when
- Navigation links would otherwise crowd a small screen.
- The primary task benefits from reduced surrounding chrome.
- Secondary destinations can reasonably sit behind a menu.
Be deliberate about
- An icon alone can be overlooked or misunderstood.
- A custom modal menu needs deliberate focus, closing, and scroll behavior.
Adapt the relationship, not just the size
A useful mobile layout preserves the task and content order while changing how the regions share space.
On wider screens
Use hidden navigation intentionally, not simply to remove useful links. Keep the trigger visible and the open menu easy to understand.
On narrower screens
Use a generously sized trigger and readable links. A native disclosure is a useful starting point when a modal overlay is not needed.
Build the structure
- 01Decide whether the destinations need to be visible immediately.
- 02Label the trigger and make the expanded state clear.
- 03Test opening, closing, and keyboard access to every destination.
<details class="site-menu">
<summary>Menu</summary>
<nav aria-label="Main navigation">
<a href="/work">Work</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</details>Adapt the content, spacing, and breakpoints to your page. This example illustrates the structure, not a complete application.
A small design exercise
Try it yourself
Show a mobile page to someone before opening its menu. Ask where they would look for another section, then check that they can open and close the menu by keyboard.
See a worked example
Inspect a complete page using this pattern, then connect its content regions back to the annotated figure.
Open the example page
Put the pattern into practice
Use the layout prompt as a starting brief, then adapt it to your real content and the decisions covered in this guide.
Read the AI layout prompt
Select the text below and copy it into your AI tool. Replace example content with your own.