Authors:Becky Gibson, Doug Hays, Bill Keese

The dijit.form.DropDownButton widget is for a button that displays some kind of drop down, often a menu, when you press it.


Programmatic example

The first example shows how to create a menu and drop down button programmatically.

   var menu = new dijit.DropDownMenu({ style: "display: none;"});
   var menuItem1 = new dijit.MenuItem({
       label: "Save",
       iconClass:"dijitEditorIcon dijitEditorIconSave",
       onClick: function(){ alert('save'); }

   var menuItem2 = new dijit.MenuItem({
       label: "Cut",
       iconClass:"dijitEditorIcon dijitEditorIconCut",
       onClick: function(){ alert('cut'); }

   var button = new dijit.form.DropDownButton({
       label: "hello!",
       name: "programmatic2",
       dropDown: menu,
       id: "progButton"
<div id="dropdownButtonContainer"></div>

Declarative example

As usual, you can create the DropDown button widget declaratively using the data-dojo-type attribute. When created declaratively the DropDownButton node has two children, one for the label of the button, and the other for the drop-down widget that’s displayed when you press the button.

Here’s one displaying a TooltipDialog:

<div data-dojo-type="dijit.form.DropDownButton">
  <div data-dojo-type="dijit.TooltipDialog">
     <label for="name">Name:</label> <input data-dojo-type="dijit.form.TextBox" id="name" name="name"><br>
     <label for="hobby">Hobby:</label> <input data-dojo-type="dijit.form.TextBox" id="hobby" name="hobby"><br>
     <button data-dojo-type="dijit.form.Button" type="submit">Save</button>

Note that DropDownButton is often used in dijit.Toolbar.



Action Key
Navigate to a button tab - all buttons are in the tab order
Activate the button to display the drop down menu enter or space key
Close an open drop down escape key - focus returns to button
With drop down open, navigate to the next element on page tab will close drop down and set focus back to the button, tab again to navigate to next element

Known Issues

High Contrast Mode

All buttons should include a label parameter with text for the button even if the showLabel parameter is set to false. The label parameter is used to identify the button in high contrast mode when the icon for the button will no longer be displayed and is also used to identify the button to a screen reader.

Screen Reader

In order to identify the button description to the screen reader, all buttons should include a label parameter even if the showLabel parameter is set to false.

Even though the dropdown buttons are marked with the ARIA haspopup property, the screen readers do not indicate this to the user in Firefox 2. In Firefox 3 the dropdown and combo buttons are announced as “menu button”.

Error in the documentation? Can’t find what you are looking for? Let us know!