Left Navigation Panel Design

I want to implement iconic and collapsed navigation panel like the mypega portal shown below.

On load it shows the navigation panel as icons and hover over brings up the full menu. This will help manage the real estate of the UI.

Can anyone help as to how to achieve this?

***Moderator Edit-Vidyaranjan: Updated Platform Capability***


Keep up to date on this post and subscribe to comments

May 15, 2019 - 7:10pm

In your "mypega portal", can you use Live UI to capture the section/harness/portal of it? Through it you will see how it is implemented. 

May 16, 2019 - 1:07pm
Response to SusanLiu


My Pega portal doesn't expose Live UI to know the configuration.



May 17, 2019 - 12:56am

Hi Deepthi, 

Please use below styles to make left navigation responsive , Just like myPega. 

  @media screen and (max-width: 9999px){
    .collapse-nav-auto > #sidebar-region-one {
    width: 51px;
    .collapse-nav-auto > #sidebar-region-one:hover {
    width: 350px;
    box-shadow: 1px 0 5px rgba(0, 0, 0, 0.4);

.collapse-nav-auto > #sidebar-region-one {
    -webkit-transition-duration: .17s;
    -webkit-transition-timing-function: cubic-bezier(.2,.6,.36,1);
    -webkit-transition-delay: .14s;
    -webkit-transition-property: width, box-shadow;
    transition-duration: .17s;
    transition-timing-function: cubic-bezier(.2,.6,.36,1);
    transition-delay: .14s;
    transition-property: width, box-shadow;
    z-index: 1;
    position: absolute;