A MenuBar control displays the top level of a menu as a horizontal bar of menu items, where each item on the bar can pop up a submenu. The MenuBar control interprets the data provider in the same way as the Menu control, and supports the same events as the Menu control. Unlike the Menu control, a MenuBar control is static; that is, it does not function as a pop-up menu, but is always visible in your application. Because the MenuBar is static, you can define it directly in MXML.

For complete reference information, see the Adobe Flex Language Reference. For more information on the Menu control, see Menu control events.

About the MenuBar control

The following example shows a MenuBar control:

The control shows the labels of the top level of the data provider menu. When a user selects a top-level menu item, the MenuBar control opens a submenu. The submenu stays open until the user selects another top-level menu item, selects a submenu item, or clicks outside the MenuBar area.

Creating a MenuBar control

You define a MenuBar control in MXML by using the <mx:MenuBar> tag. Specify an id value if you intend to refer to a component elsewhere in your MXML application, either in another tag or in an ActionScript block.

You specify the data for the MenuBar control by using the dataProvider property. The MenuBar control uses the same types of data providers as does the Menu control. For more information on data providers for Menu and MenuBar controls, see Defining menu structure and data. For more information on hierarchical data providers, see Hierarchical data objects.

In a simple case for creating a MenuBar control, you might use an <mx:XML> or <mx:XMLList> tag and standard XML node syntax to define the menu data provider. When you used an XML-based data provider, you must keep the following rules in mind:

• With the <mx:XML> tag you must have a single root node, and you set the showRoot property of the MenuBar control to false. (otherwise, your MenuBar would have only the root as a button). With the <mx:XMLList> tag you define a list of XML nodes, and the top level nodes define the bar buttons.
• If your data provider has a label attribute (even if it is called "label"), you must set the MenuBar control's labelField property and use the E4X @ notation for the label; for example:

  labelField="@label"
  
  

The dataProvider property is the default property of the MenuBar control, so you can define the XML or XMLList object as a direct child of the <mx:MenuBar> tag, as the following example shows:

<?xml version="1.0"?>
<!-- menus/MenuBarControl.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

    <!-- Define the menu; dataProvider is the default MenuBar property.
      Because this uses an XML data provider, specify the labelField and
      showRoot properties. -->
    <mx:MenuBar id="myMenuBar" labelField="@label">
        <mx:XMLList>
            <menuitem label="MenuItem A">
                <menuitem label="SubMenuItem A-1" enabled="false"/>
                <menuitem label="SubMenuItem A-2"/>
            </menuitem>
            <menuitem label="MenuItem B"/>
            <menuitem label="MenuItem C"/>
            <menuitem label="MenuItem D">
                <menuitem label="SubMenuItem D-1" 
                    type="radio" groupName="one"/>
                <menuitem label="SubMenuItem D-2" 
                    type="radio" groupName="one"
                    selected="true"/>
                <menuitem label="SubMenuItem D-3" 
                    type="radio" groupName="one"/>
            </menuitem>
        </mx:XMLList>
    </mx:MenuBar>
</mx:Application>
The executing SWF file for the previous example is shown below:

The top-level nodes in the MenuBar control correspond to the buttons on the bar. Therefore, in this example, the MenuBar control displays the four labels shown in the preceding image.

You can assign any name to node tags in the XML data. In the previous example, each node is named with the generic <menuitem> tag, but you can use <node>, <subNode>, <person>, <address>, and so on. Several attributes or fields, such as the type attribute, have meaning to the MenuBar control. For information on how Flex interprets and uses the data provider data, see Specifying and using menu entry information.

MenuBar control user interaction

The user interaction of the MenuBar is the same as for the Menu control, with the following difference: when the MenuBar control has the focus, the left arrow opens the previous menu. If the current menu bar item has a closed pop-up menu, the right arrow opens the current menu; if the pop-up menu is open, the right arrow opens the next menu. (The behavior wraps around the ends of the MenuBar control.)

For more information, see Menu control user interaction.