Menu Button - React | APG Patterns Examples

corporate

English

Domain 'apg-patterns-examples.pages.dev' uses the developer-focused generic top-level domain (.dev) with subdomain 'apg-patterns-examples'. The second-level label 'pages' is 5 characters long with two vowels and 3 consonants. Segmentation suggests one word: pages. No strong language cues emerged from the frequency lists.

html/a7/c9/a7c9e8f7-a7ff-4fee-92b9-419bc02090de.html.gz

1b13387cb23dc39bf70e31677c21f6db5cad3377b96f286b6ee444496e5bfea7

4bc68ce8116dc7cb4c037ac7214e0e8aba79e1ee53f90d94b6bfa77aeea78c23

8259f4abeab65ecbf7dd1a4d59c3107de761e205789733c4540cff72f355982b

cf651ea289b21775dcb8031291b9f1e2fae28bf57f5aa12c1154b30366e02018

2ba1ad68e429a8fb1a5aeee0c4bbcd2ee2f31a288416a87420b3ab4312af6c1d

cd654e5c225cb0bf017862d28895def6431c9ef6a2aa07a78e7fb6cb16d8cf8f

38dbc20f47c43b0771b9e1819e76ce7470d3bff523013df17387c27e322344b5

b9d4a5ebe857a14e567ed9b216cdca4c7a85df1e293ab7c1867ba0ce6dacc68a

9a2d3bf502cf848f7eb026db7389a9d3731b8a9c1b5f4aa9b9a59ddf64e4d7fc

7aa320a556ad16accead7f9289c3341f96d1ad9915cb6f12f024504f792e6d7a

21e6b4eb5aa355cd85565f0c8088cca57604f064c4a4bdb605ecf0ae5034868f

85354e3c0d174ac9d54bee26856811d622b9d2f6218e62c19b88f40c2f6c0093

40b844d84a07d462b192f53443ef600b27afbc7d9782a4197e32fe487a406587

433585662f852c8c76ded9e6f52054e1a120c78c7c0ecb8048fd3b99faa897f7

06b0e1184d65c1af396ab7d772b0714a8fa7dfbb95497e420113979c833a43e8

aeb15cdc4bd78da5042577ecb29113b9df6227797d5d3bfc913565f9c9920af1

196de7e9119b514f353081fd75d61536e2a006defb5e11beeb6493b1511a1913

464e59902c9bd76c435eec2dcdb1b9cd1ceaf345055e816dec09944320ec316b

057d219d4f414ff87c9dd5301c4a40a1f01f037343181a794cba8c09e73cd2a5

d19a2e0ad83018d2c5f2da44ca5336946bdd9430c6df0c49e2fdb01e0a999004

b5e0653ceb84bdae6582d5f1e54ad63770b6f8c3cdda77e9525a66ca92279197

5c9fb9f53403ed15da7caf9ebff5cadaff16101ce53abf693ccc6fff4a1ee6d9

84f4c4d2f10756c5da131037e0a4babe058f2aa7c4bf45611d210768333ae04c

e2e/menu-button.spec.ts
(opens in new tab)

WAI-ARIA APG: Menu Button Pattern
(opens in new tab)

AI Implementation Guide (llm.md)
(opens in new tab)

viewport

APG Patterns Examples - Accessible component patterns for React, Vue, Svelte, and Astro

description

https://541caf13.apg-patterns-examples.pages.dev/og-images/patterns/menu-button.png

https://541caf13.apg-patterns-examples.pages.dev/patterns/menu-button/react/

twitter:card

twitter:title

twitter:description

twitter:image

Abuse Team

CloudFlare, Inc.

pages.dev

Abuse

Admin

Cloudflare-NOC

Cloudflare, Inc.

CLOUDFLARENET


  (() => {
    if (window.__themeInitialized) return;
    window.__themeInitialized = true;

    const theme = (() => {
      const localStorageTheme = localStorage?.getItem('theme') ?? '';
      if (['dark', 'light'].includes(localStorageTheme)) {
        return localStorageTheme;
      }
      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        return 'dark';
      }
      return 'light';
    })();

    if (theme === 'light') {
      document.documentElement.classList.remove('dark');
    } else {
      document.documentElement.classList.add('dark');
    }

    document.documentElement.setAttribute('data-theme', theme);
    window.localStorage.setItem('theme', theme);
  })();


(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();

(()=>{var A=Object.defineProperty;var C=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var l=(i,o,a)=>C(i,typeof o!="symbol"?o+"":o,a);var E=new Set(["__proto__","constructor","prototype"]);{let i={0:t=>y(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>Number.POSITIVE_INFINITY*t},o=t=>{let[h,e]=t;return h in i?i[h](e):void 0},a=t=>t.map(o),y=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([h,e])=>[h,o(e)]));class f extends HTMLElement{constructor(){super(...arguments);l(this,"Component");l(this,"hydrator");l(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},p=this.querySelectorAll("template[data-astro-template]");for(let r of p){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let u;try{u=this.hasAttribute("props")?y(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let d;await this.hydrator(this)(this.Component,u,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});l(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[p,{default:u}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),d=this.getAttribute("component-export")||"default";if(d.includes(".")){this.Component=p;for(let m of d.split(".")){if(E.has(m)||!this.Component||typeof this.Component!="object"&&typeof this.Component!="function"||!Object.hasOwn(this.Component,m))throw new Error(`Invalid component export path: ${d}`);this.Component=this.Component[m]}}else{if(E.has(d))throw new Error(`Invalid component export path: ${d}`);this.Component=p[d]}return this.hydrator=u,this.hydrate},e,this)}catch(n){console.error("[astro-island] Error hydrating %s",this.getAttribute("component-url"),n)}}attributeChangedCallback(){this.hydrate()}}l(f,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",f)}})();


  if (!window.__themeHandlersInitialized) {
    window.__themeHandlersInitialized = true;

    /**
     * Update theme button states and roving tabindex
     * @param {string} theme - 'light' or 'dark'
     */
    function updateThemeButtons(theme) {
      document.querySelectorAll('[role="radiogroup"][aria-label="Theme"]').forEach((group) => {
        const buttons = group.querySelectorAll('.theme-toggle-button');
        buttons.forEach((btn) => {
          const isChecked = btn.getAttribute('data-theme-value') === theme;
          btn.setAttribute('aria-checked', isChecked ? 'true' : 'false');
          btn.setAttribute('tabindex', isChecked ? '0' : '-1');
        });
      });
    }

    /**
     * Apply theme to the document
     * @param {string} newTheme - 'light' or 'dark'
     */
    function applyTheme(newTheme) {
      const element = document.documentElement;

      element.classList.add('no-transitions');

      if (newTheme === 'dark') {
        element.classList.add('dark');
      } else {
        element.classList.remove('dark');
      }

      localStorage.setItem('theme', newTheme);
      element.setAttribute('data-theme', newTheme);
      updateThemeButtons(newTheme);

      requestAnimationFrame(() => {
        element.classList.remove('no-transitions');
      });
    }

    /**
     * Select a radio button and apply theme
     * @param {HTMLElement} button - The button to select
     */
    function selectRadio(button) {
      const newTheme = button.getAttribute('data-theme-value');
      applyTheme(newTheme);
      button.focus();
    }

    /**
     * Get sibling radio buttons in the same radiogroup
     * @param {HTMLElement} button - Current button
     * @returns {HTMLElement[]} Array of radio buttons
     */
    function getRadioButtons(button) {
      const group = button.closest('[role="radiogroup"]');
      if (!group) return [button];
      return Array.from(group.querySelectorAll('.theme-toggle-button'));
    }

    /**
     * Move focus and selection to adjacent radio
     * @param {HTMLElement} currentButton - Currently focused button
     * @param {number} direction - 1 for next, -1 for previous
     */
    function moveToRadio(currentButton, direction) {
      const buttons = getRadioButtons(currentButton);
      const currentIndex = buttons.indexOf(currentButton);
      const nextIndex = (currentIndex + direction + buttons.length) % buttons.length;
      selectRadio(buttons[nextIndex]);
    }

    // Initialize button states based on current theme
    const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
    updateThemeButtons(currentTheme);

    // Click handler - event delegation
    document.addEventListener('click', (e) => {
      const button = e.target.closest('.theme-toggle-button');
      if (!button) return;
      selectRadio(button);
    });

    // Keyboard handler - event delegation for radiogroup pattern
    document.addEventListener('keydown', (e) => {
      const button = e.target.closest('.theme-toggle-button');
      if (!button) return;

      switch (e.key) {
        case 'ArrowRight':
        case 'ArrowDown':
          e.preventDefault();
          moveToRadio(button, 1);
          break;
        case 'ArrowLeft':
        case 'ArrowUp':
          e.preventDefault();
          moveToRadio(button, -1);
          break;
        case ' ':
          e.preventDefault();
          selectRadio(button);
          break;
      }
    });

    // Update button states when sheet opens (MutationObserver for dynamic content)
    const observer = new MutationObserver(() => {
      const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
      updateThemeButtons(currentTheme);
    });
    observer.observe(document.body, { childList: true, subtree: true });
  }


document.querySelectorAll(`apg-menu-button`).forEach((e,t)=>{let n=t===0?`basic-output`:`disabled-output`,r=document.getElementById(n);e.addEventListener(`itemselect`,e=>{r&&(r.textContent=`Last action: ${e.detail.itemId}`)})});

HTTP/3

Cloudflare Bot Management

Cloudflare

✅ Low Risk - https://apg-patterns-examples.pages.dev/patterns/menu-button/react/

Requests	IP Address	Location	AS Autonomous System
16	172.66.47.103	United States	AS13335Cloudflare, Inc.
16	1	-	-

Security Scan Report: apg-patterns-examples.pages.dev

Summary

AI Security Verdict

Low Risk

Risk Factors

Safety Factors

Details

Primary Scan Blocked — Fallback Capture Shown

Screenshot

Page Load Overview

Language Analysis

Primary Language

Detection Details

Website Classification

Primary Category

All Detected Categories

Detected Features

Domain & IP Information

Detected Technologies3

Content Similarity HashesFor malware variant detection

TLSH (Trend Micro Locality Sensitive Hash)

ssdeep (Context Triggered Piecewise Hashing)

sdhash (Similarity Digest Hashing)

Image Hashes

Perceptual Hashes

Other Hashes

Scan History