OOUI/Layouts/Menu Layout

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.

Example of a MenuLayout.

// 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.