Overview
The utility panel is designed to add additional content (usually on the right side of the user interface) to a full-screen application. It is located alongside the primary content of the page and activated by a call to action, e.g., by a Button.
Usage
Use when
- You need extra content or functionality related to the primary content.
- You need to interact with the primary content (e.g. adding, editing, saving).
- You want to provide supplemental tasks required by the underlying page.
Don’t use when
- You need to navigate between pages of an application. Instead, use Side Navigation.
- You need to display important warnings. Instead, use an Alert or a Modal
- You are designing for a mobile application - use the mobile-specific utility panel – Coming soon!
Types
When the utility panel is being used by the user, it opens a window (panel). This functionality either:
- Overlays the page content (with or without a background overlay), or
- Pushes the page’s content.
Do not use both types in one application.
When the utility panel is inactive, it is closed. It can be triggered again by a call to action.
Float-Over-Page Overlay Utility Panel (recommended)
- The utility panel overlaps the content of the page.
- Use this type of side panel when the content on the page is difficult to resize.
Push Utility Panel
- The utility panel pushes the content of the page. The content is scaled down.