Skip to main content

         This documentation site is for previous versions. Visit our new documentation site for current releases.      


Updated on February 2, 2021

Pega's navigation patterns both scale smoothly to meet your device’s dimensions (responsive) and change the appearance for certain device sizes (adaptive); this allows for both ease of use and properly prioritized application content.

Sidebar navigation

Designed to meet four different screen sizes (breakpoints), this sidebar pattern is the default recommendation for both widescreen views (above 1440px) and desktop/laptop views (1025px–1440px). The sidebar is optimized to auto-collapse on smaller screens, allowing the content to breathe. While the tablet (769px–1024px) and mobile views (768px and under) are no longer our ‘mobile’ default, they still are an effective, familiar way to navigate an application.

Laptop / Widescreen display

Bottom navigation

Bottom navigation is the default navigation style for any tablet or mobile device. It allows an application’s content to be front and center while providing simple ways to access other main sections. Do not place more than five menu items in the footer. Append the overflow items into a More menu. If your application supports notifications, it is recommended that they are a menu item.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us