Updated: July 16, 2024

Latest Version 1.128

Panel

ui5-panel | v1.0

Intro

The panel is a responsive container for grouping and displaying information. You can use it to structure content on a page. To save space, you can make the content area collapsible.

Expandable panel – live example

When to Use

Use the panel:

To group information.
To give users the option of hiding this information.
To show additional information on demand.

Don't

Don’t:

Nest panels.
Stack too many panels on one page.

Anatomy

Header area: By default, the header is clickable and can be used to toggle between the expanded and collapsed state.

1. Icon: Used to expand and collapse the content area. The icon rotates when the panel is expanded (arrow points down) or collapsed (arrow points right).
  Note: If the panel is fixed, no icon is shown.

1. Title: Title bar with a header text or custom header.

1. Custom header (optional): Title, buttons or any other HTML elements.

Content area: The content area can contain any component or set of components.

Anatomy of a panel

Variants

Standard Panel

By default, the panel is expandable.

Clicking anywhere on the title bar expands or collapses the content area.

Panel with list – live example

Panel with Custom Header

Use this variant if you want to add actions to the panel header.

If a panel has a custom header, the arrow icon must be used to expand and collapse the panel. Clicking on other parts of the header has no effect on the expand/collapse behavior.

Panel with custom header – live example

Fixed Panel

Use this variant if you want the content to be visible at all times.

Fixed panel – live example

Behavior and Interaction

See the variants for the standard panel and panel with custom header.

Responsive Behavior

If the width of the panel is set to 100% (default), the panel and its contents are resized responsively, depending on its parent container.

If the panel has a fixed height, it will take up the designated space even if the panel is collapsed.

Truncation

When the space for the header title is not enough, the title truncates. The content wraps.