Атрибут default тега <menuitem> — типовий пункт меню

<menu>
    <menuitem command="submitbutton" default>
</menu>

HTML

<p class="cap">1. Старий задум. Розмітка ціла, а на екрані від неї нічого:</p>
<div class="box dead">
    <menu type="context" id="staryi">
        <menuitem default label="Зберегти малюнок"></menuitem>
        <menuitem label="Поскаржитись"></menuitem>
    </menu>
    <span class="stamp">тут порожньо: menuitem — невідомий елемент</span>
</div>
<pre class="code">&lt;menu type="context"&gt;
    &lt;menuitem <b>default</b> label="Зберегти малюнок"&gt;&lt;/menuitem&gt;
&lt;/menu&gt;</pre>

<p class="cap">2. Що працює: &lt;menu&gt; зі списком &lt;li&gt; — семантичний
    перелік команд. Це звичайний список, оформлений як панель:</p>
<menu class="toolbar">
    <li><a href="#save">Зберегти</a></li>
    <li><a href="#copy">Копіювати</a></li>
    <li><a href="#share">Поділитися</a></li>
</menu>

<p class="cap">3. Розкривне меню без жодного скрипта — &lt;details&gt;
    із &lt;summary&gt;. Натисніть:</p>
<details class="dd">
    <summary>Дії з малюнком</summary>
    <ul>
        <li><a href="#a">Зберегти як…</a></li>
        <li><a href="#b">Копіювати адресу</a></li>
        <li><a href="#c">Поскаржитись</a></li>
    </ul>
</details>

CSS

.cap {
    max-width: 580px;
    margin: 20px 0 6px;
    font-weight: 600;
}

.box {
    max-width: 580px;
    padding: 14px;
    border: 2px dashed #d64545;
    border-radius: 4px;
    background: #fff4f4;
}

.stamp {
    color: #a02a2a;
    font-size: .9em;
}

.code {
    max-width: 580px;
    margin: 8px 0 0;
    padding: 10px 12px;
    border-left: 6px solid #d64545;
    background: #f6f9ff;
    font: 13px/1.5 ui-monospace, monospace;
    overflow-x: auto;
}

.toolbar {
    display: flex;
    gap: 6px;
    max-width: 580px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.toolbar a {
    display: block;
    padding: 6px 12px;
    border-radius: 4px;
    color: #1b4f9c;
    text-decoration: none;
}

.toolbar a:hover,
.toolbar a:focus {
    background: #2f6fd0;
    color: #fff;
}

.dd {
    max-width: 300px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #fff;
}

.dd summary {
    padding: 8px 12px;
    font-weight: 600;
    cursor: pointer;
}

.dd[open] summary {
    border-bottom: 1px solid #b9c6d8;
}

.dd ul {
    margin: 0;
    padding: 6px 6px 8px;
    list-style: none;
}

.dd li a {
    display: block;
    padding: 6px 10px;
    border-radius: 4px;
    color: #12203a;
    text-decoration: none;
}

.dd li a:hover,
.dd li a:focus {
    background: #eef3fb;
}