@progress/kendo-layout-react-wrapper/docs/panelbar/animations.md

Kendo UI Layout wrapper for React

---
title: Animations
page_title: Animations - PanelBar - Kendo UI Wrappers for React
description: "Animate the Kendo UI PanelBar wrapper for React."
slug: animations_panelbar
position: 4
---

# Animations

By default, the PanelBar uses animations to expand and reveal sub-items when the user clicks an item header.

## Basic Configuration

You can modify these animations by using the `expand` and `collapse` properties.

```jsx-preview
class PanelBarContainer extends React.Component {			
  constructor(props) {
    super(props);
    this.animation = {
      collapse: {
        duration: 1000,
        effects: "fadeOut"
      },
      expand: {
        duration: 500,
        effects: "expandVertical fadeIn"
      }
    }
  }
  render() {
    return (
      <PanelBar animation={this.animation}>
        <PanelItem className="k-state-active">
           <span className="k-link k-state-selected">My Teammates</span>
            <div>
                <p>Andrew Fuller</p>
                <p>Nancy Leverling</p>
                <p>Robert King</p>
            </div>
          </PanelItem>
          <PanelItem>
            Programs
          <SubItems>
            <PanelItem>Monday</PanelItem>
            <PanelItem>Tuesday</PanelItem>
            <PanelItem>Wednesday</PanelItem>
            <PanelItem>Thursday</PanelItem>
            <PanelItem>Friday</PanelItem>
          </SubItems>
        </PanelItem>
      </PanelBar>
    );
  }
}

ReactDOM.render(
    <PanelBarContainer/>,
    document.querySelector('my-app')
);
```

## Expand Mode

The PanelBar can also be configured to allow the opening of only one panel at a time.

The following example demonstrates how to change the expand mode of the PanelBar to `single`.

```jsx
class PanelBarContainer extends React.Component {			
  constructor(props) {
    super(props);
    this.expandMode = props.expandMode
  }
  render() {
    return (
      <PanelBar expandMode={this.expandMode}>
        <PanelItem className="k-state-active">
           <span className="k-link k-state-selected">My Teammates</span>
            <div>
                <p>Andrew Fuller</p>
                <p>Nancy Leverling</p>
                <p>Robert King</p>
            </div>
          </PanelItem>
          <PanelItem>
            Programs
          <SubItems>
            <PanelItem>Monday</PanelItem>
            <PanelItem>Tuesday</PanelItem>
            <PanelItem>Wednesday</PanelItem>
            <PanelItem>Thursday</PanelItem>
            <PanelItem>Friday</PanelItem>
          </SubItems>
        </PanelItem>
      </PanelBar>
    );
  }
}  	

ReactDOM.render(
    <PanelBarContainer expandMode="single" />,
    document.querySelector('my-app')
);
```

## Suggested Links

* [Kendo UI PanelBar for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/panelbar/overview)
* [API Reference of the PanelBar Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/panelbar)