A MenuLayout combines a menu and a content panel. The menu is positioned relative to the content (after, before, top, or bottom) and its size is customized with the menuSize
config. The content area will fill all remaining space.
Note that menu selects and options that are often used in the 'menu' panel of a MenuLayout are documented separately.
![](http://upload.wikimedia.org/wikipedia/commons/d/da/MenuLayout.png)
// Example of a menu layout.
var
menuLayout = new OO.ui.MenuLayout( {
menuPosition: 'top'
} ),
menuPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } ),
contentPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } ),
select = new OO.ui.SelectWidget( {
items: [
new OO.ui.OptionWidget( {
data: 'before',
label: 'Before',
} ),
new OO.ui.OptionWidget( {
data: 'after',
label: 'After',
} ),
new OO.ui.OptionWidget( {
data: 'top',
label: 'Top',
} ),
new OO.ui.OptionWidget( {
data: 'bottom',
label: 'Bottom',
} )
]
} ).on( 'select', function ( item ) {
menuLayout.setMenuPosition( item.getData() );
} );
menuLayout.$menu.append(
menuPanel.$element.append( '<b>Menu panel</b>', select.$element )
);
menuLayout.$content.append(
contentPanel.$element.append( '<b>Content panel</b>', '<p>Note that the menu is positioned relative to the content panel: top, bottom, after, before.</p>')
);
$( document.body ).append( menuLayout.$element );
For a complete list of methods and config options, please see the code-generated documentation.
OOUI is maintained by the Design System Team.
Get help:
|