OOUI/Layouts/Menu Layout

OOUI
Introduction
About the library OOjs primer
Getting started
Creating interfaces programmatically PHP examples Using OOUI in MediaWiki
Working with widgets
Elements GroupElements FlaggedElements LookupElements DraggableElements Widgets Icons, Indicators, and Labels Buttons and Switches Selects and Options Inputs Popups Progress bars Layouts Fields and Fieldsets Forms Stacks and Panels Menus Booklets and Pages Index and TabPanels Windows Simple messages Dialogs Process Dialogs Message Dialogs Window managers Toolbars Themes Other concepts
See also
Fixing scripts and gadgets

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.