Liferay.Design / Lexicon
Get StartedResources
Part of Liferay, IncPowered by Gatsby and Netlify

Vertical Navigation

Sign In
View in Clay

An alternative patterns that displays navigation items in a vertical menu.

vertical navigation


This pattern is always vertical and placed to the left of the form. It provides navigation between different pages/forms. Normally, this navigation pattern is used in lower navigation levels to reach the lowest level pages.

This pattern is used in form templates. We recommend that you split long forms into smaller forms to make the task easier. This navigation pattern is used to access the different forms.

vertical navigation nested levels open


On mobile devices, the navigation transforms into a full-width collapsible menu that's displayed right before the form. This menu is always displayed over the form when it's opened, so it never pushes down the content.

Nested navigation translated into a select with a collapsible panel. Closed panel example.

nested navigation translated into a select with a dropdown menu

How can this be improved? Contribute today!