Component

Dropdown Menu

The account menu from the print app's masthead: a round toggle opening a raised panel.

Preview

Code

<div class="menu" data-mw-menu>
  <button class="menu-toggle" aria-label="Account menu" aria-expanded="false">☰</button>
  <div class="menu-panel" hidden>
    <div class="menu-who">
      <span class="avatar">XY</span>
      <span class="grow"><strong>xyoda</strong><span class="small muted">Student · VIT-AP</span></span>
    </div>
    <hr class="rule" style="margin:0">
    <a class="btn sm block" href="#dropdown-menu">My jobs</a>
    <a class="btn sm block ghost" href="#dropdown-menu">Sign out</a>
  </div>
</div>

This component is interactive — include behaviors.js after your markup.

← Divider Empty →