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.