x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div contents 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: 14rem;" 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"> <div class="menu__header">Menu</div> <hr class="menu__separator" role="separator"/> <div class="menu__group" role="group"> <a class="btn menu__item" data-menu-target="item" role="menuitem" href=""> <span class="icon icon--calendar" aria-hidden="true"></span> <span>Calendar</span> </a> <form contents="true" role="menuitem" class="button_to" method="post" action=""><button class="btn menu__item" data-menu-target="item" type="submit"> <span class="icon icon--smile" aria-hidden="true"></span> <span>Seach Emoji</span> </button><input type="hidden" name="authenticity_token" value="nx_T9qB7luBvMuiK2BikttoGnFAT87A80vsdyKXCS-3_skpmPMurvCssz6_7t6ZT9kQG5sX2cAODx7nzwI80bQ" autocomplete="off" /></form> <a class="btn menu__item" role="menuitem" tabindex="-1" aria-disabled="true"> <span class="icon icon--calculator" aria-hidden="true"></span> <span>Calculator</span> </a></div> <hr class="menu__separator" role="separator"/> <div class="menu__group" role="group"> <a class="btn menu__item" data-menu-target="item" role="menuitem" href=""> <span class="icon icon--user" aria-hidden="true"></span> <span>Profile</span> <span class="menu__item-key">⌘P</span> </a> <a class="btn menu__item" data-menu-target="item" role="menuitem" href=""> <span class="icon icon--credit-card" aria-hidden="true"></span> <span>Billing</span> <span class="menu__item-key">⌘B</span> </a> <a class="btn menu__item" data-menu-target="item" role="menuitem" href=""> <span class="icon icon--settings" aria-hidden="true"></span> <span>Settings</span> <span class="menu__item-key">⌘P</span> </a></div> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
<div contents 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: 14rem;" 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"> <%= render partial: "menu_items" %> </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.