A PanelBar widget contains a list of items stacked vertically. To create a PanelBar, we will need a list of items and hence we use the HTML's ordered or unordered list. In this example, we will list travel destinations, airlines, and important sights to visit as three panels:

<ul id="panelBar" style="width: 400px">
    <li>
     Destinations
 </li>
    <li>
        Flights
    </li>
    <li>
        Important Sights
    </li>
</ul>

Here, the list contains three items and these are the headings for each panel that we want to have. Also, the width property is set to 400px which will set the width of the PanelBar component. If the width property is not specified, then PanelBar would occupy the entire screen width, which is not desirable.

The preceding...