<div style="position: relative; height: 250px;">
    <x-mbc::button id="menu-button-demo" label="Open Menu" variant="raised" />
    
    <x-mbc::menu id="menu-demo" style="position: absolute; top: 48px; left: 0;">
        <x-mbc::list-item primary="Item 1" />
        <x-mbc::list-item primary="Item 2" />
        <x-mbc::list-item primary="Item 3" />
    </x-mbc::menu>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const menuEl = document.getElementById('menu-demo');
        const menu = menuEl.MDCMenu;
        const button = document.getElementById('menu-button-demo');
        
        button.addEventListener('click', function() {
            menu.open = !menu.open;
        });
    });
</script>

A menu displays a list of choices on a temporary surface. The menu component requires JavaScript to handle the open/close state.

<div style="position: relative; height: 200px;">
    <x-mbc::button id="basic-menu-button" label="Click Me" variant="outlined" />
    
    <x-mbc::menu id="basic-menu" style="position: absolute; top: 48px; left: 0;">
        <x-mbc::list-item primary="Cut" />
        <x-mbc::list-item primary="Copy" />
        <x-mbc::list-item primary="Paste" />
    </x-mbc::menu>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const menuEl = document.getElementById('basic-menu');
        const menu = menuEl.MDCMenu;
        const button = document.getElementById('basic-menu-button');
        
        button.addEventListener('click', function() {
            menu.open = !menu.open;
        });
    });
</script>

Menu items can include icons, text, and dividers. Use the Material Design list item structure for proper styling.

<div style="position: relative; height: 300px;">
    <x-mbc::button id="items-menu-button" label="Menu with Icons" variant="raised" />
    
    <x-mbc::menu id="items-menu" style="position: absolute; top: 48px; left: 0;">
        <x-mbc::list-item primary="Cut" startIcon="content_cut" />
        <x-mbc::list-item primary="Copy" startIcon="content_copy" />
        <x-mbc::list-item primary="Paste" startIcon="content_paste" />
        <li role="separator" class="mdc-deprecated-list-divider"></li>
        <x-mbc::list-item primary="Delete" startIcon="delete" />
    </x-mbc::menu>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const menuEl = document.getElementById('items-menu');
        const menu = menuEl.MDCMenu;
        const button = document.getElementById('items-menu-button');
        
        button.addEventListener('click', function() {
            menu.open = !menu.open;
        });
    });
</script>

Anchor Corner link

Use the anchorCorner prop to control which corner of the anchor element the menu aligns to. Available values: TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT.

<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
    <div style="position: relative; height: 200px;">
        <x-mbc::button id="anchor-bl-button" label="Bottom Left" variant="outlined" />
        <x-mbc::menu id="anchor-bl-menu" anchorCorner="BOTTOM_LEFT" style="position: absolute; top: 48px; left: 0;">
            <x-mbc::list-item primary="Bottom Left" />
            <x-mbc::list-item primary="Option 2" />
        </x-mbc::menu>
    </div>

    <div style="position: relative; height: 200px;">
        <x-mbc::button id="anchor-br-button" label="Bottom Right" variant="outlined" />
        <x-mbc::menu id="anchor-br-menu" anchorCorner="BOTTOM_RIGHT" style="position: absolute; top: 48px; right: 0;">
            <x-mbc::list-item primary="Bottom Right" />
            <x-mbc::list-item primary="Option 2" />
        </x-mbc::menu>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        ['anchor-bl', 'anchor-br'].forEach(id => {
            const menuEl = document.getElementById(id + '-menu');
            const menu = menuEl.MDCMenu;
            const button = document.getElementById(id + '-button');
            
            button.addEventListener('click', function() {
                menu.open = !menu.open;
            });
        });
    });
</script>

Fixed Position link

Set the fixed prop to true when the menu's anchor element is in a fixed position. This prevents scrolling issues.

<div style="position: relative; height: 200px;">
    <x-mbc::button id="fixed-menu-button" label="Fixed Menu" variant="raised" />
    
    <x-mbc::menu id="fixed-menu" :fixed="true" style="position: absolute; top: 48px; left: 0;">
        <x-mbc::list-item primary="Fixed Item 1" />
        <x-mbc::list-item primary="Fixed Item 2" />
        <x-mbc::list-item primary="Fixed Item 3" />
    </x-mbc::menu>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const menuEl = document.getElementById('fixed-menu');
        const menu = menuEl.MDCMenu;
        const button = document.getElementById('fixed-menu-button');
        
        button.addEventListener('click', function() {
            menu.open = !menu.open;
        });
    });
</script>

Note: The fixed prop is particularly useful for menus in app bars or other fixed navigation elements.

Interactive Example link

Here's a complete example showing how to handle menu item clicks and close the menu after selection.

Selected: None

<div style="position: relative; height: 250px;">
    <x-mbc::button id="interactive-button" label="Select Option" variant="raised" />
    <x-mbc::typography id="selected-option" variant="body2" style="margin-top: 1rem; color: #666;">
        Selected: None
    </x-mbc::typography>
    
    <x-mbc::menu id="interactive-menu" style="position: absolute; top: 48px; left: 0;">
        <x-mbc::list-item primary="Option 1" data-value="option1" />
        <x-mbc::list-item primary="Option 2" data-value="option2" />
        <x-mbc::list-item primary="Option 3" data-value="option3" />
    </x-mbc::menu>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const menuEl = document.getElementById('interactive-menu');
        const menu = menuEl.MDCMenu;
        const button = document.getElementById('interactive-button');
        const selectedText = document.getElementById('selected-option');
        
        button.addEventListener('click', function() {
            menu.open = !menu.open;
        });
        
        menuEl.addEventListener('MDCMenu:selected', function(event) {
            const item = event.detail.item;
            const value = item.getAttribute('data-value');
            const text = item.querySelector('.mdc-deprecated-list-item__text').textContent;
            selectedText.textContent = 'Selected: ' + text;
        });
    });
</script>

Tip: Use the MDCMenu:selected event to handle menu item selection. The menu automatically closes after an item is selected.

Properties link

Name	Type	Default	Description
`anchorCorner`	`string`	`null`	Corner of the anchor to align the menu (TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT)
`fixed`	`boolean`	`false`	Whether the menu is in a fixed position
`open`	`boolean`	`false`	Whether the menu is open by default
`slot`	`string`		Menu items content (list items)

References link

Edit this page

Menu

Basic Menu link

Menu Items link

Anchor Corner link

Fixed Position link

Interactive Example link

Properties link

mbc::menu link

References link