Trail Menu


User need to find information in a hierarchical structure.


Show the traversed path in the menu


Use when

The site has a shallow structure, typically up to 5 or 6 levels, while the number of items on each level are numerous.


This leads to a kind of Breadcrumbs but then integrated with the menu itself. The path can be shown horizontal or vertical. Each item of the path is a link that takes users back to that level.


This type of navigation is a mix between a breadcrumb and menus. It consumes very little space and allows for the display of many items on a particular level.

More Examples

The Ferrari site uses a horizontal variant that keeps the last two levels in sight.

Here is another horizontal example from Siematic, a true combination of a Breadcrumbs and Fly-out Menu.

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