By default, dijit.form.DropDownButton requires a dropdown menu specified when initializating. However, with a little bit of patching via subclassing it, we can easily achieve lazy loading of the dropdown menu: only creating it the first time a user clicks on the button. This will speed up the initial loading time of the application, especially if a lot of these type of buttons are present on the page.

Here is the core of how to achieve lazy loading:

dojo.declare("MyDropDownButton", dijit.form.DropDownButton, {
	dropDown:1,
	_openDropDown: function(){
		if(this.dropDown===1){
			this.dropDown=new dijit.Menu();
			var items=[{label:'One'}, {label:'Two'}, {label:'Three'}];
			dojo.forEach(items,function(args){
				this.dropDown.addChild(new dijit.MenuItem(args));    
			},this);
		}
		this.inherited(arguments);
	}
});

The trick here is to set dropDown to something which evaluates to true so that when clicked the first time, DropDownButton will proceed to call _openDropDown, where we have a chance to create the real dijit.Menu we want to show. Without line 2 above, _openDropDown won’t be called because DropDownButton thinks there is no attached dropdown menu.

As you may have already figured, in order to use this, the Menu has to be created programmatically.