Pega's navigation patterns both scale smoothly to meet your device’s dimensions (responsive) and change appearance for certain device sizes (adaptive), allowing for both ease of use and properly prioritized application content.
Last updated: Jul 2018
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
No longer recommended. Use bottom navigation instead.
Last updated: Apr 2019
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’s recommended that they are a menu item.
Last updated: May 2017