Skip to main content

         This documentation site is for previous versions. Visit our new documentation site for current releases.      

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

Enabling automatic expanding and collapsing for a sidebar navigation menu

Updated on October 16, 2017

UIKit 10 makes it possible to create a sidebar navigation menu that automatically expands and collapses. You might want to enable this feature to maximize the main work area of an application screen or to reduce visual overload for users.

At run time, the navigation menu is displayed as follows:

  • When the device width is between 1025 pixels and 1440 pixels, the navigation menu automatically collapses to 51 pixels wide and only the icons are displayed. If you hover over an item in the navigation menu while it is collapsed, the menu automatically expands, overlaying part of the screen.
  • When the screen is wider than 1440 pixels, the navigation menu is always expanded and does not overlay the main content.

Before you begin, make sure that you are not overriding the py-responsive-overrides.css file that is included with the pyEndUser skin in the UIKit rule. This file contains the breakpoint required for the automatic collapsing and expanding to function at run time.

To enable and use automatic expanding and collapsing:

  1. Create a harness and add a screen layout to it.
  2. On the General tab of the Screen layout properties dialog box, select a screen layout that contains a region on the left:
    • Header left
    • Header footer left
    • Left
  3. On the Presentation tab, complete the following tasks:
    1. Select the Optimized code option to use a flexbox-based layout, which automatically alters the width, height, and order of its contents to best fill the available space.
    2. Select the Display advanced presentation options check box.
    3. In the Custom CSS class field, enter collapse-nav-auto.
    4. Click Submit.
  4. If you are not using default navigation sections provided by the UIKit, such as pyWorkerPortalNavigation, make sure that you include the pyAutoCollapseLists section in your left panel. The pyAutoCollapseLists section embeds a script that automatically collapses any submenus in the navigation menu when the left panel shrinks.

Collapsed sidebar navigation menu

Collapsed sidebar navigation menu

Expanded sidebar navigation menu

Expanded sidebar navigation menu, displayed on hover

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us