Menu

// 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( 'Menu panel', select.$element )
   );
   menuLayout.$content.append(

contentPanel.$element.append( 'Content panel', '

Note that the menu is positioned relative to the content panel: top, bottom, after, before.

')

   );

$( document.body ).append( menuLayout.$element );