Panel

Toggle content visibility using Panel.

install	yarn add @clayui/panel
version
use	`import Panel from '@clayui/panel';`

Table of Contents

Basic Usage
Secondary
Unstyled
Collapsible
Groups
With Sheets
With a Custom Title

Basic Usage

Title

Header!

Body!

Footer!

Snippet

<div className="panel">
  <div className="panel-header">
    <span className="panel-title">Title</span>
  </div>
  <div className="panel-header">Header!</div>
  <div className="panel-body">Body!</div>
  <div className="panel-footer">Footer!</div>
</div>

Secondary

Title

Body!

Footer!

Snippet

<div className="panel panel-secondary">
  <div className="panel-header">
    <span className="panel-title">Title</span>
  </div>
  <div className="panel-body">Body!</div>
  <div className="panel-footer">Footer!</div>
</div>

Unstyled

Title

Body!

Footer!

Snippet

<div className="panel panel-unstyled">
  <div className="panel-header">
    <span className="panel-title">Title</span>
  </div>
  <div className="panel-body">Body!</div>
  <div className="panel-footer">Footer!</div>
</div>

Collapsible

Collapsable panels provide you with the ability to expand and collapse content as needed. They can simplify the interface by hiding content until it is needed.

This page uses Bootstrap’s collapse plugin which requires JQuery. Liferay 7.4 no longer includes JQuery by default. We have included a standalone collapse plugin in 7.4, just replace the attribute data-toggle=“collapse” with data-toggle=“liferay-collapse” on the trigger.

Header!

Body!

Footer!

Snippet

<div className="panel">
  <button
    aria-controls="collapsePanel"
    aria-expanded="false"
    className="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
    data-target="#collapsablePanel"
    data-toggle="collapse"
  >
    <span className="panel-title">Toggle me for expanding!</span>
    <span className="collapse-icon-closed">
      <svg
        className="lexicon-icon lexicon-icon-angle-right"
        role="presentation"
      >
        <use xlink:href="/icons.svg#angle-right"></use>
      </svg>
    </span>
    <span className="collapse-icon-open">
      <svg className="lexicon-icon lexicon-icon-angle-down" role="presentation">
        <use xlink:href="/icons.svg#angle-down"></use>
      </svg>
    </span>
  </button>
  <div className="panel-collapse collapse" id="collapsablePanel">
    <div className="panel-header">Header!</div>
    <div className="panel-body">Body!</div>
    <div className="panel-footer">Footer!</div>
  </div>
</div>

Groups

Grouped panels provide you with the ability of making accordion-like elements with multiple collapsable panels.

Here is some content inside for number One

Here is some content inside for number Two

Here is some content inside for number Three

Snippet

<div className="panel-group">
  <div className="panel panel-secondary">
    <button
      aria-controls="collapsePanelOne"
      aria-expanded="false"
      className="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
      data-target="#collapsePanelOne"
      data-toggle="collapse"
    >
      <span className="panel-title">One</span>
      <span className="collapse-icon-closed">
        <svg
          className="lexicon-icon lexicon-icon-angle-right"
          role="presentation"
        >
          <use xlink:href="/icons.svg#angle-right"></use>
        </svg>
      </span>
      <span className="collapse-icon-open">
        <svg
          className="lexicon-icon lexicon-icon-angle-down"
          role="presentation"
        >
          <use xlink:href="/icons.svg#angle-down"></use>
        </svg>
      </span>
    </button>
    <div className="panel-collapse collapse" id="collapsePanelOne">
      <div className="panel-body">
        Here is some content inside for number One
      </div>
    </div>
  </div>
  <div className="panel panel-secondary">
    <button
      aria-controls="collapsePanelTwo"
      aria-expanded="false"
      className="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
      data-target="#collapsePanelTwo"
      data-toggle="collapse"
    >
      <span className="panel-title">Two</span>
      <span className="collapse-icon-closed">
        <svg
          className="lexicon-icon lexicon-icon-angle-right"
          role="presentation"
        >
          <use xlink:href="/icons.svg#angle-right"></use>
        </svg>
      </span>
      <span className="collapse-icon-open">
        <svg
          className="lexicon-icon lexicon-icon-angle-down"
          role="presentation"
        >
          <use xlink:href="/icons.svg#angle-down"></use>
        </svg>
      </span>
    </button>
    <div className="panel-collapse collapse" id="collapsePanelTwo">
      <div className="panel-body">
        Here is some content inside for number Two
      </div>
    </div>
  </div>
  <div className="panel panel-secondary">
    <button
      aria-controls="collapsePanelThree"
      aria-expanded="false"
      className="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
      data-target="#collapsePanelThree"
      data-toggle="collapse"
    >
      <span className="panel-title">Three</span>
      <span className="collapse-icon-closed">
        <svg
          className="lexicon-icon lexicon-icon-angle-right"
          role="presentation"
        >
          <use xlink:href="/icons.svg#angle-right"></use>
        </svg>
      </span>
      <span className="collapse-icon-open">
        <svg
          className="lexicon-icon lexicon-icon-angle-down"
          role="presentation"
        >
          <use xlink:href="/icons.svg#angle-down"></use>
        </svg>
      </span>
    </button>
    <div className="panel-collapse collapse" id="collapsePanelThree">
      <div className="panel-body">
        Here is some content inside for number Three
      </div>
    </div>
  </div>
</div>

With Sheets

Sometimes you might want to place a panel inside of a card or a sheet, in that case, wrap the Panel component in a sheet wrapper like below.

Sheet Title

Here is some content inside for number One

Here is some content inside for number Two

Here is some content inside for number Three

Snippet

<div className="sheet">
  <div className="sheet-header">
    <h4 className="sheet-title">Sheet Title</h4>
  </div>
  <div className="panel-group panel-group-flush">
    <div className="panel panel-unstyled">
      <button
        aria-controls="collapseSheetPanelOne"
        aria-expanded="false"
        className="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
        data-target="#collapseSheetPanelOne"
        data-toggle="collapse"
      >
        <span className="panel-title">One</span>
        <span className="collapse-icon-closed">
          <svg
            className="lexicon-icon lexicon-icon-angle-right"
            role="presentation"
          >
            <use xlink:href="/icons.svg#angle-right"></use>
          </svg>
        </span>
        <span className="collapse-icon-open">
          <svg
            className="lexicon-icon lexicon-icon-angle-down"
            role="presentation"
          >
            <use xlink:href="/icons.svg#angle-down"></use>
          </svg>
        </span>
      </button>
      <div className="panel-collapse collapse" id="collapseSheetPanelOne">
        <div className="panel-body">
          Here is some content inside for number One
        </div>
      </div>
    </div>
    <div className="panel panel-unstyled">
      <button
        aria-controls="collapseSheetPanelTwo"
        aria-expanded="false"
        className="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
        data-target="#collapseSheetPanelTwo"
        data-toggle="collapse"
      >
        <span className="panel-title">Two</span>
        <span className="collapse-icon-closed">
          <svg
            className="lexicon-icon lexicon-icon-angle-right"
            role="presentation"
          >
            <use xlink:href="/icons.svg#angle-right"></use>
          </svg>
        </span>
        <span className="collapse-icon-open">
          <svg
            className="lexicon-icon lexicon-icon-angle-down"
            role="presentation"
          >
            <use xlink:href="/icons.svg#angle-down"></use>
          </svg>
        </span>
      </button>
      <div className="panel-collapse collapse" id="collapseSheetPanelTwo">
        <div className="panel-body">
          Here is some content inside for number Two
        </div>
      </div>
    </div>
    <div className="panel panel-unstyled">
      <button
        aria-controls="collapseSheetPanelThree"
        aria-expanded="false"
        className="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
        data-target="#collapseSheetPanelThree"
        data-toggle="collapse"
      >
        <span className="panel-title">Three</span>
        <span className="collapse-icon-closed">
          <svg
            className="lexicon-icon lexicon-icon-angle-right"
            role="presentation"
          >
            <use xlink:href="/icons.svg#angle-right"></use>
          </svg>
        </span>
        <span className="collapse-icon-open">
          <svg
            className="lexicon-icon lexicon-icon-angle-down"
            role="presentation"
          >
            <use xlink:href="/icons.svg#angle-down"></use>
          </svg>
        </span>
      </button>
      <div className="panel-collapse collapse" id="collapseSheetPanelThree">
        <div className="panel-body">
          Here is some content inside for number Three
        </div>
      </div>
    </div>
  </div>
</div>

With a Custom Title

Sometimes you want to have some custom content that’s not a string or a number in your title, that’s where ClayPanel.Title comes in handy. It allows you to add custom content to the title of the panel as seen in this example using ClayLabels.

Body!

Snippet

<div className="panel panel-secondary">
  <button
    aria-controls="panelWithCustomTitle"
    aria-expanded="false"
    className="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
    data-target="#collapsePanelWithCustomTitle"
    data-toggle="collapse"
  >
    <div>
      <h3>Title</h3>
      <span>If field </span>
      <span className="label label-success">
        <span className="label-item label-item-expand">Country</span>
      </span>
      <span className="label label-secondary">
        <span className="label-item label-item-expand">Is Equal To</span>
      </span>
      <span>value </span>
      <span className="label label-info">
        <span className="label-item label-item-expand">Brazil</span>
      </span>
      <span>enable </span>
      <span className="label label-success">
        <span className="label-item label-item-expand">State</span>
      </span>
    </div>
    <span className="collapse-icon-closed">
      <svg
        className="lexicon-icon lexicon-icon-angle-right"
        role="presentation"
      >
        <use xlink:href="/icons.svg#angle-right"></use>
      </svg>
    </span>
    <span className="collapse-icon-open">
      <svg className="lexicon-icon lexicon-icon-angle-down" role="presentation">
        <use xlink:href="/icons.svg#angle-down"></use>
      </svg>
    </span>
  </button>
  <div className="panel-collapse collapse" id="collapsePanelWithCustomTitle">
    <div className="panel-body">Body!</div>
  </div>
</div>

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 12, 2025 at 7:56:02 PM

Table of Contents

Basic Usage
Secondary
Unstyled
Collapsible
Groups
With Sheets
With a Custom Title