--- title: Link + Popover Navigation | daily.dev description: A practical guide to building accessible navigation menus using the native HTML popover API, updating a 2019 pattern that relied on ARIA disclosure widgets.... canonical: https://daily.dev/posts/link-popover-navigation-ojnhasllg twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Link + Popover Navigation | daily.dev og:description: A practical guide to building accessible navigation menus using the native HTML popover API, updating a 2019 pattern that relied on ARIA disclosure widgets.... og:url: https://daily.dev/posts/link-popover-navigation-ojnhasllg og:image: https://api.daily.dev/og/posts/OJNHaSllg.png og:image:alt: Link + Popover Navigation og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Link + Popover Navigation **[Adrian Roselli](https://daily.dev/sources/adrianroselli)** · 6 min read · 0 upvotes · 0 comments ## Summary A practical guide to building accessible navigation menus using the native HTML popover API, updating a 2019 pattern that relied on ARIA disclosure widgets. The approach uses a link plus a button trigger with `popovertarget`, eliminating the need for JavaScript to show/hide submenus. Key benefits include free Esc and click-to-close support, automatic `aria-expanded` state, and proper semantics. The post covers HTML structure, button naming with `aria-labelledby`, focus order considerations, CSS anchor positioning challenges across browsers, and styling tips including forced-colors and logical properties support. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I make a dropdown navigation menu accessible using the HTML popover attribute instead of ARIA disclosure widgets? Use a button with a popovertarget attribute pointing to the id of a ul element that has the popover attribute, placed immediately after the trigger in the DOM. This gives you expand/collapse state, aria-expanded exposure, Escape-to-close, and click-outside-to-close automatically, with no JavaScript or aria-expanded scripting required. Use aria-labelledby on the button to reference the preceding link's text and avoid duplicate labels. _Developers building accessible nav patterns can follow ongoing popover and ARIA discussions on daily.dev._ ### Why shouldn't I use ARIA menu roles (role=menu) for website navigation? ARIA menu roles impose strict keyboard interaction requirements designed for application-style menus, not website navigation, causing usability and accessibility problems for typical site nav. This concern was raised in an issue filed against the ARIA Authoring Practices Guide in 2017 and in a 2017 post titled Don't Use ARIA Menu Roles for Site Nav, leading eventually to disclosure-only and disclosure-and-link APG patterns proposed in 2019 and 2020. _Anyone weighing ARIA menu roles versus disclosure patterns for nav can track this debate on daily.dev._ ### What is the main challenge with positioning HTML popovers using CSS anchor positioning across browsers? Cross-browser anchor positioning support only became available recently, and getting a popover to appear consistently at the right edge of a parent list item just below its trigger button, across Firefox, Chromium, and Safari, while also handling different text writing directions, proved difficult. The positioning breaks down specifically under vertical writing modes, with it unclear whether that stems from code errors or browser bugs. _Developers wrestling with anchor positioning quirks across browsers can compare notes via daily.dev._ ## Similar posts on daily.dev - [Getting Started With The Popover API — Smashing Magazine](https://daily.dev/posts/getting-started-with-the-popover-api-smashing-magazine-vjbltzl0j) · Smashing Magazine · 47 upvotes · 2 comments - [Popover Context Menus with Anchor Positioning – Frontend Masters Blog](https://daily.dev/posts/popover-context-menus-with-anchor-positioning-frontend-masters-blog-hwayozyfy) · Frontend Masters · 1 upvotes · 0 comments - [The Popover API](https://daily.dev/posts/the-popover-api-mfkqsl9va) · Flavio Copes · 1 upvotes · 0 comments --- Tags: [#html](https://daily.dev/tags/html), [#accessibility](https://daily.dev/tags/accessibility) [View this post on daily.dev](https://daily.dev/posts/link-popover-navigation-ojnhasllg) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Link + Popover Navigation","url":"https://daily.dev/posts/link-popover-navigation-ojnhasllg","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/link-popover-navigation-ojnhasllg"},"datePublished":"2026-07-09T13:05:48.091Z","dateModified":"2026-09-13T21:52:59.299Z","description":"A practical guide to building accessible navigation menus using the native HTML popover API, updating a 2019 pattern that relied on ARIA disclosure widgets....","image":"https://media.daily.dev/image/upload/s--P4t4XyoV--/f_auto/v1722860399/public/Placeholder%2001","thumbnailUrl":"https://media.daily.dev/image/upload/s--P4t4XyoV--/f_auto/v1722860399/public/Placeholder%2001","isAccessibleForFree":true,"articleSection":"Adrian Roselli","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Adrian Roselli","logo":"https://media.daily.dev/image/upload/s--srPC5zE---/f_auto/v1710012549/logos/adrianroselli","url":"https://daily.dev/sources/adrianroselli"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/link-popover-navigation-ojnhasllg","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"html,accessibility","timeRequired":"PT6M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Adrian Roselli","item":"https://daily.dev/sources/adrianroselli"},{"@type":"ListItem","position":3,"name":"Link + Popover Navigation"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/link-popover-navigation-ojnhasllg#faq","mainEntity":[{"@type":"Question","name":"How do I make a dropdown navigation menu accessible using the HTML popover attribute instead of ARIA disclosure widgets?","acceptedAnswer":{"@type":"Answer","text":"Use a button with a popovertarget attribute pointing to the id of a ul element that has the popover attribute, placed immediately after the trigger in the DOM. This gives you expand/collapse state, aria-expanded exposure, Escape-to-close, and click-outside-to-close automatically, with no JavaScript or aria-expanded scripting required. Use aria-labelledby on the button to reference the preceding link's text and avoid duplicate labels. Developers building accessible nav patterns can follow ongoing popover and ARIA discussions on daily.dev."}},{"@type":"Question","name":"Why shouldn't I use ARIA menu roles (role=menu) for website navigation?","acceptedAnswer":{"@type":"Answer","text":"ARIA menu roles impose strict keyboard interaction requirements designed for application-style menus, not website navigation, causing usability and accessibility problems for typical site nav. This concern was raised in an issue filed against the ARIA Authoring Practices Guide in 2017 and in a 2017 post titled Don't Use ARIA Menu Roles for Site Nav, leading eventually to disclosure-only and disclosure-and-link APG patterns proposed in 2019 and 2020. Anyone weighing ARIA menu roles versus disclosure patterns for nav can track this debate on daily.dev."}},{"@type":"Question","name":"What is the main challenge with positioning HTML popovers using CSS anchor positioning across browsers?","acceptedAnswer":{"@type":"Answer","text":"Cross-browser anchor positioning support only became available recently, and getting a popover to appear consistently at the right edge of a parent list item just below its trigger button, across Firefox, Chromium, and Safari, while also handling different text writing directions, proved difficult. The positioning breaks down specifically under vertical writing modes, with it unclear whether that stems from code errors or browser bugs. Developers wrestling with anchor positioning quirks across browsers can compare notes via daily.dev."}}]} ```