UI Kit - Main navigation


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.

Navigation in desktop, tablet, and mobile

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

Side navigation compressed on laptops example Side navigation expanded on laptops example

Mobile display

No longer recommended. Use bottom navigation instead.

Side navigation on mobile device example

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.

Bottom navigation example