State

You can manage the state of the PanelBar items and render them as selected, disabled, and expanded.

Selected Items

You can set the selected state to a PanelBar item by using the selected property.

class App extends React.Component {
    render() {
        return(
            <div class="panelbar-wrapper">
                <PanelBar>
                    <PanelBarItem title="Team"/>
                    <PanelBarItem title="Projects" selected={true}/>
                    <PanelBarItem title="Programs"/>
                    <PanelBarItem title="Communication"/>
                </PanelBar>
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)

Disabled Items

You can disable PanelBar items by setting the disabled property to true.

class App extends React.Component {
    render() {
        return(
            <div class="panelbar-wrapper">
                <PanelBar>
                    <PanelBarItem title="Team"/>
                    <PanelBarItem title="Projects" disabled={true}/>
                    <PanelBarItem title="Programs"/>
                    <PanelBarItem title="Communication"/>
                </PanelBar>
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)

Expanded Items

By default, all PanelBar items are collapsed. To expand them, set the expanded property to true.

class App extends React.Component {
    render() {
        return(
            <div class="panelbar-wrapper">
                <PanelBar>
                    <PanelBarItem title="Team"/>
                    <PanelBarItem title="Projects" expanded={true}>
                        <PanelBarItem title="Business Plan"/>
                        <PanelBarItem title="Forecast"/>
                        <PanelBarItem title="OKRs"/>
                    </PanelBarItem>
                    <PanelBarItem title="Programs"/>
                    <PanelBarItem title="Communication"/>
                </PanelBar>
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)
 /