html

Dialog as navigation dropdown

A navigation dropdown built with the HTML <dialog> element.

How does that work?

Use the HTML dialog element together with the popover API.
Because of the popover API, the dialog is positioned absolutely to the body, which is why we need to use a little hack to keep it relative to the element.

.dropdown-wrapper	{
  position: relative;
  display: inline-block;

button {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    svg {
      width: 15px;
      height: 15px;
      fill: currentColor;
    }
  }

[popover] {
    inset: unset;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border: none;
    position: fixed;
    top: 0px;
    right: 0px;
    pointer-events: none;
    overlay: none;
  }

[popover] + nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    overflow: auto
    height: fit-content;
    width: fit-content;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    z-index: 1000;
    a {
      display: block;
      color: #000;
      white-space: nowrap;
    }
  }

[popover]:popover-open + nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }  
}

<div class="dropdown-wrapper">
  <button popovertarget="menu-popover">
    Dropdown
    <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="">
      <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
    </svg>
  </button>
  <div id="menu-popover" popover></div>
  <nav>
      <a>Uno linko</a>		
      <a>Uno linko mas</a>	
  </nav>
</div>

	
.dropdown-wrapper	{
  position: relative;
  display: inline-block;

  button {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    svg {
      width: 15px;
      height: 15px;
      fill: currentColor;
    }
  }

  [popover] {
    inset: unset;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border: none;
    position: fixed;
    top: 0px;
    right: 0px;
    pointer-events: none;
    overlay: none;
  }

  [popover] + nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    overflow: auto
    height: fit-content;
    width: fit-content;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    z-index: 1000;
    a {
      display: block;
      color: #000;
      white-space: nowrap;
    }
  }	

  [popover]:popover-open + nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }  
}