<menuitem label="Open"/>
 <menuitem label="Backup"/>
 <menuseparator/>
 <menuitem label="Exit"/>
 </menupopup>
 </menu>
 </menubar>
 </toolbox>
 </vbox>
Dans l'exemple suivant, l'attribut flex définit une taille proportionnelle.
Exemple.
La liste et la figure suivante illustrent une vue Xul:
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="./Style/style.css" type="text/css"?>
<window
 id="cWin"
 title=":: Budget Controler ::"
 orient="horizontal"
 xmlns:html="http://www.w3.org/1999/xhtml"
 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 onload="oItem.initialize()"
 <!-- [0] regionHEAD -->
 <!-- script -->
 <script src="./Script/scr.js" /><!-- type="application/javascript;version=1.7" -->
 <script src="./Script/prototype_xul_1_6_0_2.js" />
 <!-- style -->
 <style/>
 <!-- [0] -->
 <vbox flex="1">
 <vbox>
 <toolbox flex="1">
 <menubar id="sample-menubar">
 <!-- MENU -->
 <menu id="file-menu" label="File">
 <menupopup id="file-popup">
 <!-- subMenu
 <menu id="new-menu" label="New">
 <menupopup id="new-popup">
 <menuitem label="Window"/>
 <menuitem label="Message"/>
 </menupopup>
 </menu>

<menuitem label="Open"/>
 <menuitem label="Backup"/>
 <menuseparator/>
 <menuitem label="Exit"/>
 </menupopup>
 </menu>
 </menubar>
 </toolbox>
 </vbox>
 <tabbox>
 <tabs>
 <tab label="Encoding" selected="true"/>
 <tab label="History"/>
 <tab label="Incoming"/>
 </tabs>
 <tabpanels>
 <tabpanel>
 <!-- [1] ENCODING -->
 <groupbox width="300">
 <caption label="items"/>
 <vbox>
 <textbox id="cItem" multiline="false" value=":: item ::" onfocus="oUtils.clean(this);"/>
 <hbox>
 <button width="50" label="add" onclick="oItem.addItem('cItem','cListItem');"/>
 <button width="50" label="search" onclick="oItem.searchItem();"/>
 <button id="cItemDel" width="50" label="del" onclick="oItem.delItem($('cListItem').selectedIndex,'cListItem');" disabled="true" />
 <label style="cursor:pointer;" value="[+]" onclick="oItem.disabling($('cItemDel'));oVw.changeTicker(this);"/>
 </hbox>
 <!-- list items -->
 <vbox>
 <listbox id="cListItem" rows="20" onclick="oItem.getDetail()">
 <listitem label="Butter Pecan" value="bpecan"/>
 <listitem label="Chocolate Chip" value="chocchip"/>
 <listitem label="Raspberry Ripple" value="raspripple"/>
 <listitem label="Squash Swirl" value="squash"/>
 </listbox>
 </vbox>
 <textbox id="cItem" multiline="false" value=":: class ::" onfocus="oUtils.clean(this);"/>
 <vbox flex="1">
 <button width="50" label="add" onclick="oItem.addItem();"/>
 </vbox>
 </vbox>
 </groupbox>
 <!-- separator -->
 <splitter style="width: 10px; max-width: 10px;" collapse="before" resizebefore="closest" resizeafter="farthest" state="open">
 <grippy id="gspace_leftgrippy"/>
 </splitter>
 <!-- separator -->
 <groupbox width="200">
 <caption label="item detail"/>
 <html:p/>actual price :
 <textbox id="cItem" width="200" multiline="false" value=":: item ::" onfocus="oUtils.clean(this);" disabled="true"/>
 <html:p/>new price :
 <textbox id="cItem" width="200" multiline="false" value=":: price ::" onfocus="oUtils.clean(this);"/> 
 <html:p/>item class :
 <!--
 <textbox id="cItem" width="200" multiline="false" value=":: class ::" onfocus="oUtils.clean(this);"/>

<menulist width="200" label="Bus">
 <menupopup>
 <menuitem label="Car"/>
 <menuitem label="Taxi"/>
 <menuitem label="Bus" selected="true"/>
 <menuitem label="Train"/>
 </menupopup>
 </menulist>
 <html:p/>shop :
 <textbox id="cItem" width="200" multiline="false" value=":: shop ::" onfocus="oUtils.clean(this);"/>
 <html:p/>
 <button label="validate" width="200" onclick="oItem.searchItem();"/> <!-- --> 
 </groupbox>
 <!-- separator -->
 <splitter style="width: 10px; max-width: 10px;" collapse="before" resizebefore="closest" resizeafter="farthest" state="open">
 <grippy id="gspace_leftgrippy"/>
 </splitter>
 <!-- separator -->
 <groupbox flex="1">
 <caption label="actual"/>
 <html:div style="-moz-vbox-flex:1;height:100%;width:100%;"><!-- vbox flex="1" -moz-vbox-flex:1; background-color:grey;-->
 <svg width="100%" height="270%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 <polyline points="0,200 50,150 100,170 150,125" style="fill:none;stroke:red;stroke-width:2"/>
 </svg>
 </html:div>
 </groupbox>
 </tabpanel>
 <tabpanel>
 <!-- [2] HISTORY -->
 <vbox flex="1">
 <html:div id="main">
 <html:div id="left">
 :: this is left content ::
 </html:div>
 <html:div id="middle">
 :: this is middle content ::
 </html:div>
 <html:div id="right">
 :: this is right content ::
 </html:div>
 <!-- bottom -->
 <html:div id="clear">bottom</html:div>
 </html:div>
 </vbox>
 </tabpanel>
 <tabpanel>
 <!-- [3] INCOMMING -->
 <groupbox width="330" orient="vertical">
 <caption label="Banks"/>
 <groupbox class="dark" width="300">
 <caption label="Account"/>
 <textbox id="cBqItem" multiline="false" value=":: item ::" onfocus="oUtils.clean(this);"/>
 <hbox>
 <button width="50" label="add" onclick="oItem.addItem('cBqItem','cBqListItem');"/>
 <button width="50" label="search" onclick="oItem.searchItem();"/>
 <button id="cItemDel_2" width="50" label="del" onclick="oItem.delItem($('cBqListItem').selectedIndex,'cBqListItem');" disabled="true" />
 <label style="cursor:pointer;" value="[+]" onclick="oItem.disabling($('cItemDel_2'));oVw.changeTicker(this);"/>
 </hbox>
 <vbox>
 <listbox id="cBqListItem" rows="5" onclick="oItem.getDetail()">
 <listitem label="Fortis" value="bpecan"/>
 </listbox>
 </vbox>
 </groupbox>
 <!-- INCOMES -->
 <groupbox class="dark" width="300">
 <caption label="Incomes"/>
 <html:div>
 <html:div id="cBqInc">
 <!-- insert new incomes -->
 <html:div style="display:none;" id="cBqInc_">
 <html:div>
 <html:input id="account" class="lowTxt" type="text" value="> account" size="20"/>
 <html:input id="amount" class="lowTxt" type="text" value="> amount" size="10"/>
 <html:input id="date" class="lowTxt" type="text" value="> date" size="10"/>
 <html:span class="clickable" onclick="oItem.saveItem(this.parentNode,'incomes');parentNode.innerHTML=";oItem.load('incomes','cBqInc_1');
 "> [+] </html:span> <!-- -->
 </html:div>
 </html:div>
 <html:div id="cBqInc_1" />
 <html:div>
 <!-- separator -->
 <html:hr />
 <!-- separator -->
 <!-- incomes menu -->
 <html:span>
 <html:label onclick="oUtils.showHide($('listIncomes'));">[ history ]</html:label>
 <html:label onclick="oUtils.showHide($('listStat'));">[ statistic ]</html:label>
 </html:span>
 <html:p/>
 <html:div id="listIncomes" style="display:none">
 <html:p/>
 <html:div class="ttl">:: this is the history content ::</html:div>
 <html:p/>
 <listbox id="incomes_history" rows="5">
 <listhead>
 <listheader label="Account"/>
 <listheader label="Amount"/>
 <listheader label="Date"/>
 </listhead>
 <listitem>
 <listcell label="Fortis"/>
 <listcell label="200"/>
 <listcell label="10/10/2008"/>
 </listitem>
 <listitem>
 <listcell label="Argenta"/>
 <listcell label="200"/>
 <listcell label="10/10/2008"/>
 </listitem>
 <listitem>
 <listcell label="Ing"/>
 <listcell label="200"/>
 <listcell label="10/10/2008"/>
 </listitem>
 </listbox>
 <!-- 
 <html:br/>:: this is the bottom content ::
 <html:br/>:: this is the bottom content ::
 <html:br/>:: this is the bottom content ::
 <html:br/>:: this is the bottom content ::