The element tabcontrol enables switching between different views. There is one to one correspondence between children of tabbox and tabpanel. It means that the click on the first tab opens the view defined by the first child of tabpanel, the second tab opens the second child of tabpanel and so on.

A tabcontrol in vertical alignement.

A tabcontrol in horizontal alignement, tabcontrol elements can be nested

<?xml-stylesheet href="css1.css" type="text/css" title="css1"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
align="vertical" >
     <tabcontrol align="horizontal">
          <tabbox align="horizontal">
               <tab>AAA</tab>
               <tab>BBB</tab>
          </tabbox>
          <tabpanel>
                    <tabcontrol align="vertical">
                         <tabbox align="horizontal">
                              <tab>XXX</tab>
                              <tab>YYY</tab>
                         </tabbox>
                         <tabpanel>
                              <box>
                                   <titledbutton value="111"/>
                                   <titledbutton value="222"/>
                                   <titledbutton value="333"/>
                              </box>
                              <box>
                                   <titledbutton value="xxx"/>
                                   <titledbutton value="yyy"/>
                                   <titledbutton value="zzz"/>
                              </box>
                         </tabpanel>
                    </tabcontrol>
                    <box>
                         <titledbutton value="20" oncommand="document.getElementById('prog').setAttribute('value',20)"/>
                         <titledbutton value="50" oncommand="document.getElementById('prog').setAttribute('value',50)"/>
                         <titledbutton value="80" oncommand="document.getElementById('prog').setAttribute('value',80)"/>

                    </box>
               </tabpanel>
     </tabcontrol>
</window>

css1.css

All properties are specified in this CSS

@import url(chrome://global/skin);
window {background-color: silver}
titledbutton {color:navy; font-weight:bold; margin:5px; padding:3px;border: solid navy}
titledbutton {list-style-image: url("chrome://messenger/skin/folder.gif");}
titledbutton:hover {border: solid red}
titledbutton:active {list-style-image: url("chrome://messenger/skin/folder-open.gif");}
progressmeter {margin:15px}