Skip to main content

Navigation

Suggest edit 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.

Did you find this content helpful? YesNo

0% found this useful

Have a question? Get answers now.

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

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us