Css Zero Showcase
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
<main class="centered-layout">
  <div class="relative" data-controller="popover" data-popover-flip-class="popover--flip">
    <button id="menu_button" class="btn" data-popover-target="button" data-action="popover#toggle" aria-haspopup="menu" aria-controls="menu">
      Open dropdown
    </button>
    <dialog class="popover" style="--popover-size: 14rem;" data-controller="menu" data-popover-target="menu" data-action="click@document->popover#closeOnClickOutside keydown.esc->popover#close close->menu#reset keydown.up->menu#prev keydown.down->menu#next">
      <div id="menu" class="menu" 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="">
            <img aria-hidden="true" src="/assets/calendar-2c1c622b.svg" width="14" height="14" />
            <span>Calendar</span>
          </a>          <a class="btn menu__item" data-menu-target="item" role="menuitem" href="">
            <img aria-hidden="true" src="/assets/smile-5ac60ee4.svg" width="14" height="14" />
            <span>Seach Emoji</span>
          </a>          <a class="btn menu__item" role="menuitem" aria-disabled="true">
            <img aria-hidden="true" src="/assets/calculator-765c8d31.svg" width="14" height="14" />
            <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="">
            <img aria-hidden="true" src="/assets/user-3d86b14f.svg" width="14" height="14" />
            <span>Profile</span>
            <span class="menu__item-key">⌘P</span>
          </a>          <a class="btn menu__item" data-menu-target="item" role="menuitem" href="">
            <img aria-hidden="true" src="/assets/credit-card-663de530.svg" width="14" height="14" />
            <span>Billing</span>
            <span class="menu__item-key">⌘B</span>
          </a>          <a class="btn menu__item" data-menu-target="item" role="menuitem" href="">
            <img aria-hidden="true" src="/assets/settings-4fb8e0ad.svg" width="14" height="14" />
            <span>Settings</span>
            <span class="menu__item-key">⌘P</span>
          </a>        </div>
      </div>
    </dialog>
  </div>
</main>
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
40
41
42
43
44
45
46
<main class="centered-layout">
  <div class="relative" data-controller="popover" data-popover-flip-class="popover--flip">
    <button id="menu_button" class="btn" data-popover-target="button" data-action="popover#toggle" aria-haspopup="menu" aria-controls="menu">
      Open dropdown
    </button>
    <dialog class="popover" style="--popover-size: 14rem;" data-controller="menu" data-popover-target="menu" data-action="click@document->popover#closeOnClickOutside keydown.esc->popover#close close->menu#reset keydown.up->menu#prev keydown.down->menu#next">
      <div id="menu" class="menu" role="menu" aria-labelledby="menu_button">
        <div class="menu__header">Menu</div>
        <hr class="menu__separator" role="separator"/>
        <div class="menu__group" role="group">
          <%= link_to "", class: "btn menu__item", data: { menu_target: "item" }, role: "menuitem" do %>
            <%= image_tag "calendar.svg", size: 14, aria: { hidden: true } %>
            <span>Calendar</span>
          <% end %>
          <%= link_to "", class: "btn menu__item", data: { menu_target: "item" }, role: "menuitem" do %>
            <%= image_tag "smile.svg", size: 14, aria: { hidden: true } %>
            <span>Seach Emoji</span>
          <% end %>
          <%= tag.a class: "btn menu__item", role: "menuitem", aria: { disabled: true } do %>
            <%= image_tag "calculator.svg", size: 14, aria: { hidden: true } %>
            <span>Calculator</span>
          <% end %>
        </div>
        <hr class="menu__separator" role="separator"/>
        <div class="menu__group" role="group">
          <%= link_to "", class: "btn menu__item", data: { menu_target: "item" }, role: "menuitem" do %>
            <%= image_tag "user.svg", size: 14, aria: { hidden: true } %>
            <span>Profile</span>
            <span class="menu__item-key">⌘P</span>
          <% end %>
          <%= link_to "", class: "btn menu__item", data: { menu_target: "item" }, role: "menuitem" do %>
            <%= image_tag "credit-card.svg", size: 14, aria: { hidden: true } %>
            <span>Billing</span>
            <span class="menu__item-key">⌘B</span>
          <% end %>
          <%= link_to "", class: "btn menu__item", data: { menu_target: "item" }, role: "menuitem" do %>
            <%= image_tag "settings.svg", size: 14, aria: { hidden: true } %>
            <span>Settings</span>
            <span class="menu__item-key">⌘P</span>
          <% end %>
        </div>
      </div>
    </dialog>
  </div>
</main>
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.