Back to Snippets

Popover API Dropdown Menu with Anchor Positioning

An account button opens a dropdown menu beneath it. Clicking the button toggles the menu, clicking anywhere else or pressing Escape closes it, and the whole thing is two attributes and some CSS.

The menu is a popover, so the browser puts it in the top layer and handles open, close and light dismiss through the popovertarget attribute on the button. Anchor positioning ties it back to the button. The button declares an anchor-name, the menu points at it with position-anchor, and position-area drops it into the slot below, right aligned. The fade and slide are a transition on the :popover-open state, with @starting-style supplying the values it animates from.

Popover and anchor positioning are both in every current browser. In an older browser without anchor positioning the @supports fallback centers the menu as a small floating panel, so the control stays usable.

#css

#html

#popover

#dropdown

#menu

#anchor positioning

#navigation

#ui

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  background: #f8fafc;
  color: #0f172a;
  min-height: 100vh;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 24px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.brand {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.menu-btn {
  anchor-name: --account;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 500;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 6px 12px 6px 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.menu-btn:hover {
  background: #f1f5f9;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #1d4ed8;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
}

.menu {
  position-anchor: --account;
  position-area: block-end span-inline-start;
  position-try-fallbacks: flip-block;
  margin: 8px 0 0;
  inset: auto;
  min-width: 200px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 16px 32px -12px rgba(15, 23, 42, 0.3);
  opacity: 0;
  translate: 0 -6px;
  transition: opacity 0.16s ease, translate 0.16s ease, overlay 0.16s allow-discrete, display 0.16s allow-discrete;
}

.menu:popover-open {
  opacity: 1;
  translate: 0 0;
}

@starting-style {
  .menu:popover-open {
    opacity: 0;
    translate: 0 -6px;
  }
}

.menu hr {
  border: 0;
  border-top: 1px solid #e2e8f0;
  margin: 6px 0;
}

.menu-item {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: #0f172a;
  text-decoration: none;
  font-size: 0.9375rem;
}

.menu-item:hover {
  background: #f1f5f9;
}

.menu-item.danger {
  color: #dc2626;
}

.menu-item.danger:hover {
  background: #fef2f2;
}

.page {
  max-width: 560px;
  margin: 60px auto;
  padding: 0 24px;
}

.page h1 {
  font-size: 1.75rem;
  margin: 0 0 12px;
}

.page p {
  margin: 0;
  color: #475569;
  line-height: 1.6;
}

@supports not (position-anchor: --account) {
  .menu {
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
}

Popover API Dropdown Menu with Anchor Positioning

Share Code Snippet