<!DOCTYPE html>
<html class="mdc-typography">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Material Design Component</title>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
</head>
<body>
<div class="mdc-menu-anchor" style="top: 0px; right: 0px;">
<button class="mdc-button mdc-button--raised toggle">
Reveal Menu
</button>
<div class="mdc-simple-menu" tabindex="-1" id="demo-menu">
<ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">
<li class="mdc-list-item" role="menuitem" tabindex="0">Back</li>
<li class="mdc-list-item" role="menuitem" tabindex="0">Forward</li>
<li class="mdc-list-item" role="menuitem" tabindex="0">Reload</li>
<li class="mdc-list-divider" role="separator"></li>
<li class="mdc-list-item" role="menuitem" tabindex="0">Save As...</li>
</ul>
</div>
</div>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<script>window.mdc.autoInit();</script>
<script>
var menuEl = document.querySelector('#demo-menu');
var menu = new mdc.menu.MDCSimpleMenu(menuEl);
var toggle = document.querySelector('.toggle');
toggle.addEventListener('click', function() {
menu.open = !menu.open;
});
</script>
<pre>
. mdc-menu-anchor
. mdc-button.mdc-button-raised
. mdc-simple-menu
. mdc-simple-menu__items.mdc-list
. mdc-list-item
. mdc-list-divider
</pre>
</body>
</html>
// Code goes here
/* Styles go here */