Navigation

Navigation

As our devices change shape, how we move through applications must also change. Our 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: May 2017

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

Side navigation on mobile device example

Last updated: May 2017

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’s recommended that they are a menu item.

Bottom navigation example

Last updated: May 2017

Top navigation

The top nav pattern is used on desktop or laptop application displays that must maximize horizontal space and have less than 5 primary menu items.

Top navigation example

Last updated: May 2017

Screen flow navigation

Like the traditional "wizard", screen flows are designed for a single user completing a multi-step process. Screen flow steps are shown to the right of the content (tree navigation) or above the content (tabbed screen flow).

Use a “tree” screen flow when there are more than five steps, or steps are dynamic based on content, or some steps have substeps.

Tree screen flow example

Use a “tabbed” screen flow when there are fewer than five steps, the steps are static, and there are no substeps.

Tabbed screen flow example

On mobile devices, both tabbed and tree screen flows render the same way.

Mobile screen flow example

Last updated: May 2017

Application headers

The application header serves as a global action area for an application. Functions that do not require on-screen context should reside in the header (e.g., search, help, user actions).

Application header example

Last updated: Jun 2017

The Pega logo

The Pega Platform logo portrays the spirit of Pegasystem's industry-leading software products. It is elegant and clean—representing the platform's ability to simplify and clarify an organization's business practices. The double-story ‘g’ brings a sense of timeless stability to the mark, as if to say, this is a mature product here to stay. The overall hard angular shape against Pega blue aggressively leans forward (at 10.5°), illustrating its momentum into the future.

When the logo is used in an application header:

  • The 'tail' of the logo on the left side should be squared (rather than angled).
  • The version number (7) should not be shown.
  • Spacing is adjusted to match the application header content.
Pega Platform logo Pega Platform logo, when used in an application header

Last updated: May 2017

Application names

Application names should be presented as Open Sans 900 weight (extra bold) with a tracking of 50 (CSS: letter-spacing: 1px), 14px tall, and in all caps.

Application names should be concise and not include industry markers (e.g., not "Underwriting for Insurance," simply "Underwriting").

Any trademark symbol should be shifted to a higher baseline.

Application name examples

Last updated: May 2017

Search bar

Pega applications have a universal search bar, which searches all objects and content in the application. On large screens, this search bar appears in in the portal header. On smaller screens, it responsively moves to the main menu.

The search bar is 28px tall and 27em (~435px) wide. A magnifying glass icon is shown in the far right identifying it as a search bar. When it does not have focus, it has a background color of #24619D. When it does have focus, it has a background color of #FFF. To start a search, the user can either click the magnifying glass, or press the “Enter” key after entering search text.

Search menu example

Last updated: May 2017

Get the files

Want to begin working with the Pega Design System? Download the vector assets below.

Download design files

Last updated: May 2017

Next: Page templates