x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div data-controller="popover" data-popover-placement-value="bottom-start"> <button type="button" id="menu_button" class="btn" data-popover-target="button" data-action="popover#toggle" aria-haspopup="true" aria-controls="menu"> Open </button> <div popover class="popover" style="--popover-size: 8rem;" data-popover-target="menu"> <div id="menu" class="menu" data-controller="menu" data-action="keydown.up->menu#prev keydown.down->menu#next" role="menu" aria-labelledby="menu_button"> <a class="btn menu__item" data-menu-target="item" role="menuitem" href="">Edit</a> <a class="btn menu__item" data-menu-target="item" role="menuitem" href="">Make a copy</a> <a class="btn menu__item" data-menu-target="item" role="menuitem" href="">Favorite</a> <hr class="menu__separator" role="separator"/> <a class="btn menu__item" data-menu-target="item" role="menuitem" href="">Classify</a> <hr class="menu__separator" role="separator"/> <a class="btn menu__item" data-menu-target="item" role="menuitem" href="">Delete</a> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div data-controller="popover" data-popover-placement-value="bottom-start"> <button type="button" id="menu_button" class="btn" data-popover-target="button" data-action="popover#toggle" aria-haspopup="true" aria-controls="menu"> Open </button> <div popover class="popover" style="--popover-size: 8rem;" data-popover-target="menu"> <div id="menu" class="menu" data-controller="menu" data-action="keydown.up->menu#prev keydown.down->menu#next" role="menu" aria-labelledby="menu_button"> <%= link_to "Edit", "", class: "btn menu__item", data: { menu_target: "item" }, role: "menuitem" %> <%= link_to "Make a copy", "", class: "btn menu__item", data: { menu_target: "item" }, role: "menuitem" %> <%= link_to "Favorite", "", class: "btn menu__item", data: { menu_target: "item" }, role: "menuitem" %> <hr class="menu__separator" role="separator"/> <%= link_to "Classify", "", class: "btn menu__item", data: { menu_target: "item" }, role: "menuitem" %> <hr class="menu__separator" role="separator"/> <%= link_to "Delete", "", class: "btn menu__item", data: { menu_target: "item" }, role: "menuitem" %> </div> </div></div>
CSS is not required or multiple files are needed, check the notes.
Java Script is not required or multiple files are needed, check the notes.