Liferay.Design / Lexicon
Get StartedResources
Part of Liferay, IncCode/Content LicensesPowered by Gatsby and Netlify

Vertical Navigation

Sign In
View in FigmaView in ClayDocumentation

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

vertical navigation component


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

Vertical Navigation is commonly used in form templates. We recommend that you split long forms into smaller forms to make the task easier.

Vertical navigation component in a page context


Default state

Navigation entry in default state

Hover state

Navigation entry in hover state

Active state

Navigation entry in active state

Selected state

Navigation entry in selected state


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. On the left image the panel is closed. On the right image the panel is open.

Something to improve? Report an issue!