मेन्यू

अवलोकन

link

Web

tanrei-menu

schedule

SwiftUI

TanreiMenu

schedule

Jetpack Compose

TanreiMenu

schedule

Flutter

TanreiMenuAnchor

schedule

React Native

Menu

schedule

इससे जनरेट किया गया: docs/status/status.json, specs/menu.spec.json

क्रियाएँ, एक चेकबॉक्स आइटम, एक रेडियो ग्रुप और एक विनाशकारी क्रिया

सबमेन्यू: वह आइटम जो अपने बग़ल में एक और स्तर खोलता है

लिंक का मेन्यू: हर पंक्ति कहीं ले जाती है, एक वह पेज है जिस पर आप हैं, और एक नया टैब खोलती है

इस्तेमाल

link

ऐंकर आपका अपना बटन, आइकन बटन या फ़ील्ड है। मेन्यू उसे नहीं बनाता: वह ऐंकर की जगह पढ़ता है, अपनी सरफ़ेस को उससे सटाकर रखता है और फ़ोकस को उसी पर लौटाता है। मेन्यू को आप ऐंकर से खोलते हैं, और जब मेन्यू कहता है तब उसे बंद करते हैं।

मेन्यू में आइटम के पाँच प्रकार हैं: item (एक क्रिया), checkbox-item, radio-item, submenu (वह आइटम जो अपने बग़ल में मेन्यू का एक और स्तर खोलता है) और group, जिसमें बाक़ी प्रकारों के आइटम रहते हैं। हर प्लैटफ़ॉर्म इन्हें उसी तरह लेता है जैसे वह दोहराए जाने वाले किसी भी चाइल्ड को लेता है: वेब पर चाइल्ड एलिमेंट, SwiftUI पर व्यू बिल्डर के व्यू, Compose पर कॉन्टेंट लैम्ब्डा के कॉल, Flutter पर menuChildren के विजेट, और React Native पर सादे ऑब्जेक्ट का एक items ऐरे, जिसमें kind से प्रकार पहचाना जाता है। चेकबॉक्स आइटम का checked उसका अपना है। कौन-सा रेडियो आइटम चेक किया हुआ है, यह उसके ग्रुप का होता है, मान के आधार पर।

आइटम का कीबोर्ड शॉर्टकट उसकी shortcut प्रॉपर्टी है, जो कीबोर्ड शॉर्टकट के तटस्थ कुंजी-नामों में लिखी जाती है (mod+c)। मेन्यू उसे कीबोर्ड शॉर्टकट कंपोनेंट से पंक्ति के अंत में बनाता है, Apple के कीबोर्ड पर ⌘C और बाक़ी जगह Ctrl+C के रूप में, और उसे आइटम के कीबोर्ड शॉर्टकट के रूप में देता है। वह कुंजियों को काम करने लायक़ नहीं बनाता: उन्हें आपका प्रॉडक्ट बाँधता है। trailingText हर उस चीज़ के लिए है जो शॉर्टकट नहीं है, जैसे कोई गिनती या “बीटा”। वेब यह सब बनाता है, और मौजूदा रूप भी। SwiftUI, Compose, Flutter और React Native पीछे हैं: जब तक वे बराबरी पर नहीं आते, उनमें shortcut प्रॉपर्टी नहीं है और वे शॉर्टकट को trailingText में लिखते हैं, जैसा नीचे उनके उदाहरण करते हैं। उनमें न सबमेन्यू हैं, न separation, न iconSpace, न markIcon, और वे अब भी चेक को 16 के बॉक्स में अपने ही निशान के रूप में बनाते हैं, चेक की हुई किसी पंक्ति को नहीं भरते, और ग्रुप का शीर्षक वहाँ से शुरू करते हैं जहाँ से लेबल शुरू होते हैं।

href वाला आइटम एक लिंक आइटम है: प्लैटफ़ॉर्म का अपना लिंक, जो ठीक किसी क्रिया की तरह बनता है और जिस तक उन्हीं कुंजियों से पहुँचा जाता है। सादे ढंग से सक्रिय करने पर आइटम का click एमिट होता है, मेन्यू बंद होता है और फिर गंतव्य खुलता है। target और targetLabel Button वाले ही हैं। current उस पेज के लिंक आइटम को चिह्नित करता है जिस पर व्यक्ति है: वह अपने ही फ़िल के साथ बनता है, बिना चेक के। लिंक आइटम वेब पर बने हैं; SwiftUI, Compose, Flutter और React Native में वे अभी नहीं हैं।

मेन्यू किसी क्षेत्र का कॉन्टेक्स्ट मेन्यू भी हो सकता है: trigger को context पर सेट करें, तो ऐंकर वही क्षेत्र होता है, जैसे कैनवस, सूची या कोई पंक्ति। व्यक्ति उसके किसी बिंदु पर राइट-क्लिक करके, देर तक दबाकर, या फ़ोकस वाले एलिमेंट पर Shift+F10 या ContextMenu कुंजी दबाकर मेन्यू माँगता है। मेन्यू उस बिंदु के साथ contextRequest भेजता है, और आप उसे वहीं खोलते हैं। कॉन्टेक्स्ट ट्रिगर वेब पर बना है; SwiftUI, Compose, Flutter और React Native में यह अभी नहीं है।

<tanrei-button variant="text" id="more" label="और"><span slot="icon">more_vert</span></tanrei-button>

<!-- anchor उस एलिमेंट का id है जिससे मेन्यू खुलता है। -->
<tanrei-menu anchor="more">
  <!-- shortcut तटस्थ कुंजी-नामों में है: व्यक्ति के कीबोर्ड के अनुसार ⌘C या Ctrl+C बनता है। -->
  <tanrei-menu-item label="कॉपी करें" leading-icon="content_copy" shortcut="mod+c"></tanrei-menu-item>
  <!-- ग्रुप का शीर्षक उसका label ऐट्रिब्यूट है, जैसे <optgroup label>। -->
  <tanrei-menu-group label="व्यू">
    <tanrei-menu-checkbox-item label="ग्रिड दिखाएँ" checked></tanrei-menu-checkbox-item>
  </tanrei-menu-group>
  <!-- ग्रुप पर, या किसी एक आइटम पर, mark-icon="check" चेक किए हुए आइटम पर सादा चेक का निशान लगाता है। -->
  <tanrei-menu-group label="क्रमबद्ध करें" value="name" mark-icon="check">
    <tanrei-menu-radio-item label="नाम" value="name"></tanrei-menu-radio-item>
    <tanrei-menu-radio-item label="बदलाव की तारीख़" value="date"></tanrei-menu-radio-item>
  </tanrei-menu-group>
  <!-- सबमेन्यू: इसके चाइल्ड अगला स्तर हैं। यह toggle फ़ायर करता है, close कभी नहीं। -->
  <tanrei-submenu label="हाल की फ़ाइल खोलें" leading-icon="history">
    <tanrei-menu-item label="Report.pdf"></tanrei-menu-item>
    <tanrei-menu-item label="Notes.txt"></tanrei-menu-item>
  </tanrei-submenu>
  <tanrei-menu-item label="हटाएँ" leading-icon="delete" destructive></tanrei-menu-item>
  <!-- href के साथ आइटम एक लिंक है: पहले उसका click, फिर close, फिर ब्राउज़र उसे खोलता है। -->
  <tanrei-menu-item label="कीबोर्ड शॉर्टकट" href="/help/shortcuts/"></tanrei-menu-item>
  <tanrei-menu-item label="सोर्स" href="https://example.com/tanrei" target="new" target-label="नए टैब में खुलता है"></tanrei-menu-item>
</tanrei-menu>

<!-- separation="gap" इस मेन्यू और इसके सबमेन्यू में ग्रुप को ख़ाली जगह से अलग करता है, डिज़ाइन सिस्टम ने चाहे जो चुना हो। -->
<tanrei-menu anchor="more" separation="gap">…</tanrei-menu>

<!-- trigger="context": उस क्षेत्र का कॉन्टेक्स्ट मेन्यू जिसकी id anchor है। aria-label से इसे नाम दें। -->
<div id="canvas">…</div>
<tanrei-menu id="canvas-menu" anchor="canvas" trigger="context" aria-label="कैनवस">…</tanrei-menu>

<script type="module">
  import '@tanrei/web/components/menu';
  const menu = document.querySelector('tanrei-menu');
  // ऐंकर पर दबाना ऐंकर का अपना है: वह मेन्यू को बंद नहीं करता, इसलिए उसे यहाँ टॉगल करें।
  document.querySelector('#more').addEventListener('click', () => (menu.open = !menu.open));
  // close के साथ उसका कारण आता है: escape, outside, tab, focus-out या item।
  menu.addEventListener('close', () => (menu.open = false));
  // click, change और toggle आइटम या ग्रुप पर फ़ायर होकर बबल होते हैं, इसलिए मेन्यू पर लगा एक लिसनर इन सबको ले सकता है।
  menu.querySelector('[label="कॉपी करें"]').addEventListener('click', copy);
  menu.querySelector('[label="ग्रिड दिखाएँ"]').addEventListener('change', (e) => setGrid(e.detail.checked));
  menu.querySelector('[label="क्रमबद्ध करें"]').addEventListener('change', (e) => sortBy(e.detail.value));

  // क्षेत्र में राइट-क्लिक, देर तक दबाना, Shift+F10 या ContextMenu कुंजी कॉन्टेक्स्ट मेन्यू माँगते हैं।
  // detail में बिंदु, वह एलिमेंट जिसके बारे में माँगा गया, और माँगने का तरीक़ा होता है। इसे खोलें,
  // या इवेंट रद्द करके अनुरोध ब्राउज़र के अपने मेन्यू पर छोड़ दें।
  const canvasMenu = document.querySelector('#canvas-menu');
  canvasMenu.addEventListener('contextrequest', () => (canvasMenu.open = true));
  canvasMenu.addEventListener('close', () => (canvasMenu.open = false));
</script>

import { Button, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuRadioItem, Submenu } from '@tanrei/react';

<Button variant="text" id="more" label="और" onClick={() => setOpen(!open)}><span slot="icon">more_vert</span></Button>
<Menu anchor="more" open={open} onClose={() => setOpen(false)}>
  <MenuItem label="कॉपी करें" leadingIcon="content_copy" shortcut={['mod+c']} onClick={copy} />
  <MenuGroup label="व्यू">
    <MenuCheckboxItem label="ग्रिड दिखाएँ" checked={grid} onChange={(e) => setGrid(e.detail.checked)} />
  </MenuGroup>
  <MenuGroup label="क्रमबद्ध करें" value={sort} onChange={(e) => setSort(e.detail.value)}>
    <MenuRadioItem label="नाम" value="name" />
    <MenuRadioItem label="बदलाव की तारीख़" value="date" />
  </MenuGroup>
  <Submenu label="हाल की फ़ाइल खोलें" leadingIcon="history">
    <MenuItem label="Report.pdf" onClick={() => openFile('Report.pdf')} />
    <MenuItem label="Notes.txt" onClick={() => openFile('Notes.txt')} />
  </Submenu>
  <MenuItem label="हटाएँ" leadingIcon="delete" destructive onClick={remove} />
  {/* एक लिंक आइटम। राउटर click रद्द करता है और ख़ुद वहाँ जाता है; मेन्यू फिर भी बंद होता है। */}
  <MenuItem label="कीबोर्ड शॉर्टकट" href="/help/shortcuts/" onClick={(e) => { e.preventDefault(); navigate('/help/shortcuts/'); }} />
</Menu>

{/* उस क्षेत्र का कॉन्टेक्स्ट मेन्यू जिसकी id canvas है: अनुरोध आने पर यह खुलता है। */}
<Menu anchor="canvas" trigger="context" aria-label="कैनवस" open={contextOpen} onContextRequest={() => setContextOpen(true)} onClose={() => setContextOpen(false)}>
  <MenuItem label="चिपकाएँ" onClick={paste} />
</Menu>

import Tanrei

// ऐंकर पर एक मॉडिफ़ायर, .popover की तरह। बंद होने पर isPresented में false लिखा जाता है।
TanreiIconButton("और", action: { showMenu = true }) { Image(systemName: "ellipsis") }
    .tanreiMenu(isPresented: $showMenu, placement: .bottomStart) {
        TanreiMenuItem("कॉपी करें", action: copy)
        TanreiMenuSection("व्यू") {
            TanreiMenuToggle("ग्रिड दिखाएँ", isOn: $showGrid)
        }
        TanreiMenuSection("क्रमबद्ध करें", selection: $sort) {
            // .tag(_:) को ख़ुद TanreiMenuOption पर लगाएँ।
            TanreiMenuOption("नाम").tag("name")
            TanreiMenuOption("बदलाव की तारीख़").tag("date")
        }
        TanreiMenuItem("हटाएँ", role: .destructive, action: delete)
    }

import io.github.chnotchy.tanrei.components.TanreiCheckboxMenuItem
import io.github.chnotchy.tanrei.components.TanreiIconButton
import io.github.chnotchy.tanrei.components.TanreiMenu
import io.github.chnotchy.tanrei.components.TanreiMenuGroup
import io.github.chnotchy.tanrei.components.TanreiMenuItem
import io.github.chnotchy.tanrei.components.TanreiRadioMenuItem
import io.github.chnotchy.tanrei.primitives.TanreiText

// DropdownMenu की तरह: मेन्यू को ऐंकर के Box के भीतर कॉल करें। बंद आप करते हैं: onDismissRequest के साथ कारण आता है।
Box {
    TanreiIconButton(onClick = { expanded = true }, contentDescription = "और") { TanreiText("more_vert") }
    TanreiMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
        TanreiMenuItem(text = "कॉपी करें", onClick = ::copy, trailingText = "⌘C", leadingIcon = { TanreiText("content_copy") })
        TanreiMenuGroup(title = "व्यू") {
            TanreiCheckboxMenuItem(text = "ग्रिड दिखाएँ", checked = showGrid, onCheckedChange = { showGrid = it })
        }
        TanreiMenuGroup(title = "क्रमबद्ध करें", selectedValue = sort, onSelectedValueChange = { sort = it }) {
            TanreiRadioMenuItem(text = "नाम", value = "name")
            TanreiRadioMenuItem(text = "बदलाव की तारीख़", value = "date")
        }
        TanreiMenuItem(text = "हटाएँ", onClick = ::delete, destructive = true, leadingIcon = { TanreiText("delete") })
    }
}

import 'package:tanrei/tanrei.dart';

// MenuAnchor की तरह: इसे एक कंट्रोलर खोलता है। जब मेन्यू बंद होने को कहता है, तो वह कारण के साथ onClose को कॉल करता है और ख़ुद बंद हो जाता है।
final TanreiMenuController menu = TanreiMenuController();

TanreiMenuAnchor(
  controller: menu,
  onClose: (TanreiMenuCloseReason reason) {},
  menuChildren: <Widget>[
    TanreiMenuItem(
      onPressed: copy,
      leadingIcon: const Icon(AppSymbols.contentCopy),
      trailingText: '⌘C',
      child: const Text('कॉपी करें'),
    ),
    TanreiMenuGroup<String>(
      title: 'व्यू',
      children: <Widget>[
        TanreiCheckboxMenuItem(
          value: showGrid,
          onChanged: (bool value) => setState(() => showGrid = value),
          child: const Text('ग्रिड दिखाएँ'),
        ),
      ],
    ),
    TanreiMenuGroup<String>(
      title: 'क्रमबद्ध करें',
      groupValue: sort,
      onChanged: (String value) => setState(() => sort = value),
      children: const <Widget>[
        TanreiRadioMenuItem<String>(value: 'name', child: Text('नाम')),
        TanreiRadioMenuItem<String>(value: 'date', child: Text('बदलाव की तारीख़')),
      ],
    ),
    // onPressed का null होना आइटम को अक्षम कर देता है।
    TanreiMenuItem(onPressed: delete, destructive: true, child: const Text('हटाएँ')),
  ],
  builder: (BuildContext context, TanreiMenuController controller, Widget? child) =>
      TanreiIconButton(onPressed: controller.open, icon: const Icon(AppSymbols.moreVert), semanticLabel: 'और'),
);

import { useRef, useState } from 'react';
import type { View } from 'react-native';
import { IconButton, Menu } from '@tanrei/react-native';

const more = useRef<View>(null);
const [open, setOpen] = useState(false);

// सहायक तकनीक को बताएँ कि ऐंकर का मेन्यू खुला है या नहीं: मेन्यू इसे यहाँ सेट नहीं कर सकता।
<IconButton ref={more} accessibilityLabel="और" accessibilityState={{ expanded: open }} onPress={() => setOpen(true)}>
  more_vert
</IconButton>
// कंट्रोल्ड: visible को onDismiss से false करें, जिसे कारण मिलता है।
<Menu
  visible={open}
  anchorRef={more}
  accessibilityLabel="और"
  onDismiss={() => setOpen(false)}
  items={[
    { label: 'कॉपी करें', leadingIcon: 'content_copy', trailingText: '⌘C', onPress: copy },
    { kind: 'group', title: 'व्यू', items: [{ kind: 'checkbox-item', label: 'ग्रिड दिखाएँ', checked: grid, onCheckedChange: setGrid }] },
    { kind: 'group', title: 'क्रमबद्ध करें', value: sort, onValueChange: setSort, items: [
      { kind: 'radio-item', label: 'नाम', value: 'name' },
      { kind: 'radio-item', label: 'बदलाव की तारीख़', value: 'date' },
    ] },
    { label: 'हटाएँ', leadingIcon: 'delete', destructive: true, onPress: remove },
  ]}
/>

स्पेक

link

सहायक टेक्स्ट, अंतिम आइकन और अक्षम आइटम

चेक और आइकन के कॉलम के ऊपर ग्रुप के शीर्षक

निशान और आइकन के कॉलम: iconSpace का auto (डिफ़ॉल्ट) और never

निशान: डिफ़ॉल्ट सिस्टम का बॉक्स और रिंग, और mark-icon से नामित सादा चेक

अलगाव: ग्रुप के बीच डिवाइडर, और गैप

डिफ़ॉल्ट सिस्टम में चेकबॉक्स आइटम पर चेकबॉक्स का और रेडियो आइटम पर रेडियो बटन का निशान होता है, जो आइटम के चेक किए होने या न होने, दोनों हालत में बनता है: ख़ाली बॉक्स और चेक वाला भरा हुआ बॉक्स, पतली रिंग और अपने फ़िल वाली मोटी रिंग। इससे बंद विकल्प भी एक विकल्प के रूप में दिखता रहता है। ये निशान वाले कॉलम के चित्र हैं, कंट्रोल नहीं: दबाने और फ़ोकस करने की अकेली चीज़ पंक्ति है। बॉक्स के भीतर का चेक किसी कंट्रोल के अपने निशान वाले भारी वेट पर बनता है, जैसे चेकबॉक्स का बनता है।

markIcon, किसी एक आइटम पर या ग्रुप पर उसके सभी आइटम के लिए, आइकन सेट के उस ग्लिफ़ का नाम देता है जिससे इसकी जगह चेक किए हुए आइटम पर निशान लगाया जाए। check अपने बग़ल के शुरुआती आइकन के साइज़ पर (डिफ़ॉल्ट सिस्टम में 24) सादा चेक बनाता है, और जब तक आइटम चेक नहीं किया हुआ है तब तक कुछ नहीं बनाता। डिज़ाइन सिस्टम अपने निशान ख़ुद चुनता है: m3-like और cupertino सादा चेक इस्तेमाल करते हैं। दाएँ से बाएँ वाले लेआउट में चेक मिरर नहीं होता। जब मेन्यू खुला रहते किसी आइटम का चेक वाला स्टेट बदलता है, तो निशान अपनी जगह से हिले बिना बदलता है, और जहाँ मोशन कम किया गया है वहाँ तुरंत।

चेक की हुई पंक्ति अपने चिह्न से पहचानी जाती है। डिफ़ॉल्ट सिस्टम में स्टैंडर्ड कॉन्ट्रास्ट पर वह भरी नहीं जाती, इसलिए सामान्य अवस्था वाले मेन्यू में भरी हुई अकेली पंक्ति उस पेज की होती है जिस पर व्यक्ति है। मीडियम और हाई कॉन्ट्रास्ट पर, जहाँ व्यक्ति ने ज़्यादा मज़बूत संकेत माँगे हैं, चेक की हुई पंक्ति भी भरी जाती है: मेन्यू की सरफ़ेस के ऊपर पंक्ति के अपने कॉन्टेंट के रंग की एक लेयर, जो लाइट थीम में भी और डार्क थीम में भी होवर की हुई पंक्ति से एक स्टेप ज़्यादा गहरी होती है, ताकि उठी हुई सरफ़ेस पर चेक की हुई पंक्ति, होवर की हुई पंक्ति और सामान्य अवस्था की पंक्ति अलग-अलग पहचानी जाएँ। मेन्यू यह फ़िल उस स्कीम के टोकन से पढ़ता है जिसमें वह बन रहा है; हर कॉन्ट्रास्ट स्कीम के लिए फ़िल डिज़ाइन सिस्टम तय करता है। जिस आइटम का सबमेन्यू खुला है, वह सबमेन्यू खुला रहने तक होवर वाला फ़िल बनाए रखता है, जो इस्तेमाल हो रहे स्तर तक का रास्ता दिखाता है, और वह कभी भरी हुई पंक्ति जैसा नहीं दिखता।

ग्रुप का शीर्षक वहाँ से शुरू होता है जहाँ से पंक्तियों का कॉन्टेंट शुरू होता है: जब मेन्यू चेक या शुरुआती आइकन के कॉलम बनाता है तो उनके ऊपर, और जब दोनों में से कोई नहीं बनाता तो लेबल के ऊपर। वह दूसरे किनारे से उतनी ही दूरी पर ख़त्म होता है, अगली पंक्ति में जाता है, बड़े टेक्स्ट के साथ बढ़ता है और दाएँ से बाएँ वाले लेआउट में मिरर होता है।

संरचना

संरचना

वेब पैकेज जिस तरह फ़िक्स्चर actions बनाता है, उसी के ऊपर बनाया गया।

भाग	विवरण
1 surface	The floating sheet that holds the items: its color, corners, elevation and padding. It is placed against the anchor, or at the point a context menu was asked for, and drawn above everything else.
2 container	One item's row. It carries hover, focus and press, the fill of a checked item, and the fill of a submenu item whose submenu is open.
3 mark · वैकल्पिक	What shows whether a checkbox or radio item is chosen, in the mark column at the start of the row. By default it is the look of the matching control, drawn as a mark: a box for a checkbox item (empty, or filled with the icon set's check) and a ring for a radio item (thin, or heavy with its fill), in both conditions. Where the design system chooses the check (comp.menu.checkbox-item.mark, comp.menu.radio-item.mark) or the item or its group names a glyph (markIcon), it is that glyph of the system's icon set while the item is checked and nothing while it is not. It is never a control of its own: it takes no focus and no press, and the item stays a menu item checkbox or a menu item radio. Its column is kept, empty, in the other rows of its section while iconSpace is auto, in every row while it is always, and in its own row only while it is never (MNU-59).
4 leading-icon · वैकल्पिक	An icon before the label. Its column is kept, empty, in the other rows of its section while iconSpace is auto, in every row while it is always, and in its own row only while it is never (MNU-59).
5 label	The item's text and its accessible name.
6 supporting-text · वैकल्पिक	A line below the label that says more about the item.
7 trailing-text · वैकल्पिक	Text at the end of the row that is not a keyboard shortcut, such as a count or "Beta". It shares the trailing column with the shortcut.
8 shortcut · वैकल्पिक	The item's keyboard shortcut at the end of the row, in the trailing column: the keyboard shortcut component at its small size, in the form comp.menu.shortcut.variant names, its legends in the trailing text's style and color (MNU-31).
9 trailing-icon · वैकल्पिक	An icon at the end of the row. A submenu item draws its submenu indicator in this column instead, and a link item that opens a new context draws its mark there, the glyph open_in_new, while the product names no glyph for it (MNU-55).
10 submenu-indicator · वैकल्पिक	The glyph chevron_right of the system's icon set at the end of a submenu item's row, in the trailing icon column: it says the item opens another level, and points to the side that level opens on. The icon set marks it as mirrored, so the icon helper turns it in a right-to-left layout. The menu draws no chevron of its own.
11 submenu · वैकल्पिक	The surface a submenu item opens: a menu of its own beside the surface that holds the item, drawn with the surface's tokens and holding items of every kind, further submenus included.
12 group · वैकल्पिक	A run of related items (a group item), optionally under a title. The menu separates a group from what is next to it by a divider, or under gap by drawing it as a tile of its own, as its separation names, and a group of radio items is one set of choices.
13 group-title · वैकल्पिक	The heading drawn above a group's items when the group has a title. It starts where the rows' content starts, not after the check and icon columns. It names the group and takes no focus.
14 divider · वैकल्पिक	The hairline the menu draws between two groups while its separation is divider. Under gap there is none: each group is a tile of its own, and the space between the tiles parts them (MNU-36).
15 focus-ring	Gap-then-ring indicator shown for keyboard focus, drawn inside the item's row.

माप

माप

लंबाई	टोकन	मान (px)
surface padding-inline	tanrei.comp.menu.surface.padding-inline	4

वेब पैकेज जिस तरह फ़िक्स्चर actions बनाता है, उसी के ऊपर बनाया गया।

प्रॉपर्टी

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
open	boolean	false	Whether the menu is shown. The product opens it from its anchor (a button, an icon-only Button, a field), or on contextRequest while trigger is context. Where open is a plain value (web, Compose, React Native) the product closes the menu by setting it to false when the menu emits close; where it is a binding or a controller (SwiftUI, Flutter) the menu closes itself through it (MNU-5).
placement	bottom-start | bottom-end | top-start | top-end	"bottom-start"	Where the surface goes against the anchor: below or above it, with its start or end edge aligned to the anchor's. The menu flips to the other side when this side has no room. For a context menu opened at a point it is where the surface goes from the point: bottom-start puts its block-start, inline-start corner there (MNU-61).
trigger	anchor | context	"anchor"	What the menu opens from. anchor: the product opens it from its anchor — a button, an icon-only Button, a field — and the surface is placed against the anchor's edges. context: the menu is the context menu of an area, and the anchor is that area (a canvas, a list, a row, a document's body of text); a person asks for the menu at a point in it — a secondary click, a long press of a touch or a pen, Shift+F10 or the ContextMenu key on the element of the area that has focus — and the menu emits contextRequest, the product sets open, and the surface opens at that point, or against that element for the keyboard. The items, the keys, the submenus and the close reasons are the same in both (MNU-60 to MNU-63).
separation	auto | divider | gap	"auto"	How a group is told from what is next to it. divider: a line between them. gap: empty space and no line. Auto takes comp.menu.separation, the design system's answer (divider in the default system). It applies to the menu and to every submenu of it.
iconSpace	auto | always | never	"auto"	Whether a row keeps the room of the mark column and of the leading icon column where it has nothing to draw there, so that the labels of a section start on one line — a section being a group, or a run of adjacent items outside any group. auto: a row keeps a column's room while another item of its section draws in that column (a checkbox or radio item its mark, an item its leading icon), so that a section without marks or icons draws its labels where the row's content starts. always: every row keeps both. never: only a row that draws in a column has it. The tree view's and the navigation drawer's iconSpace, with the same values and default. It applies to the menu and to every submenu of it (MNU-59).
density	regular | compact	"regular"	How much room a row takes: its least height, its paddings, the gap between its columns and the size of its glyphs (the mark, the leading and the trailing icon), and never its text style. regular (a 48 row with 24 glyphs in the default system) is the menu of a product used by touch as well as by pointer. compact (a 32 row with 20 glyphs, the tree view's compact row) is for a tool used with a pointer, whose menus are long and opened often. For touch a row is never lower than the touch target in either (MNU-12). It applies to the menu and to every submenu of it (MNU-64). A design system may add values.

इवेंट

इवेंट	विवरण
close	The menu asks to be closed, every open submenu with it: Escape or the platform's back while no submenu is open, a press outside, Tab, focus leaving it, an item's activation at any level, or its anchor no longer drawn (MNU-65). Carries which of these it was, named escape, back, outside, tab, focus-out, item or anchor-hidden (in the platform's casing). Closing a submenu alone is the submenu item's toggle, not this event.
contextRequest	While trigger is context: the person asked for the context menu in the anchor's area. Carries the point in the viewport's coordinates, the element it was asked about (the one under the pointer, or the one with focus) and how it was asked: pointer (a secondary click, or the context-menu command of assistive technology), long-press (a touch or a pen held still) or keyboard (Shift+F10, the ContextMenu key). Set open to true to show the menu there. Cancelling it leaves the request to the platform: its own context menu answers it (MNU-60).

आइटम

वे आइटम के प्रकार जिन्हें कंपोनेंट दोहराता है। फ़िक्स्चर अपने आइटम क्रम से सूचीबद्ध करता है; हर प्लैटफ़ॉर्म हर प्रकार को अपने तरीक़े से नाम देता है।

item

An action: it does something and closes the menu. With an href it is a link: it goes somewhere, and the menu closes.

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
label	string	""	The item's text and its accessible name. Required.
supportingText	string	""	A line below the label that says more about the item.
leadingIcon	string	""	The name of an icon (a glyph of the system's icon set) before the label.
trailingIcon	string	""	The name of an icon at the end of the row.
trailingText	string	""	Text at the end of the row that is not a keyboard shortcut, such as a count or "Beta". An item's shortcut goes in shortcut; an item that has both draws the shortcut.
shortcut	strings		The item's keyboard shortcut, in the keyboard shortcut component's key names: one chord per string, pressed in order (["mod+c"]). The menu draws it at the end of the row for the keyboard the person uses and exposes it as the item's keyboard shortcut (MNU-24, MNU-31). It does not make the keys work; the product binds them.
destructive	boolean	false	Marks an action that deletes or discards something; it is drawn in the error color.
disabled	boolean	false	Prevents activation. The item stays reachable with the arrow keys.
href	string	""	The destination: an address as the platform's links take one (a URL; on the web a path or a fragment as well). Not empty, it makes the item a link item (a control with a destination is a link): the platform's own link, exposed as a menu item, drawn exactly as an action is and moved to with the same keys; a plain activation emits click, closes the menu and opens the destination (MNU-53, MNU-54). Empty, the item is an action and the product acts on click. Only the item kind has one: a checkbox item, a radio item and a submenu item take no destination (MNU-57).
target	same | new	"same"	Where the destination opens, as the Button's target. same: where the person is. new: a new context — a new tab or window on the web, outside the current screen elsewhere — which the item marks with the glyph open_in_new in its trailing icon column, unless trailingIcon names one, and says through targetLabel (MNU-55). Ignored without href.
targetLabel	string	""	What assistive technology reads after the link item's name while target is new ("opens in a new tab"), as the Button's targetLabel: Tanrei ships no words of its own. Required while target is new; ignored otherwise.
current	boolean	false	Marks a link item as the destination the person is at now (the current page): exposed as the current item and drawn with the fill of the row the person is on, comp.menu.current.container.color, in every contrast scheme, with no mark and no change of weight; it stays a link (MNU-58). The product sets it; the menu never does. Ignored without href.

इवेंट	विवरण
click	The item was activated by pointer, touch, keyboard or assistive technology. A link item emits it before the menu closes and before its destination opens; a product that takes the navigation itself (a client-side router) cancels it, and the menu still closes (MNU-54).

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
आइटम	tanrei-menu-item	TanreiMenuItem	TanreiMenuItem	TanreiMenuItem	MenuItem
label · प्रॉपर्टी	label	title	text	child	label
supportingText · प्रॉपर्टी	supportingText	supportingText	supportingText	supportingText	supportingText
leadingIcon · प्रॉपर्टी	leadingIcon	leadingIcon	leadingIcon	leadingIcon	leadingIcon
trailingIcon · प्रॉपर्टी	trailingIcon	trailingIcon	trailingIcon	trailingIcon	trailingIcon
trailingText · प्रॉपर्टी	trailingText	trailingText	trailingText	trailingText	trailingText
shortcut · प्रॉपर्टी	shortcut	shortcut	shortcut	shortcut	shortcut
destructive · प्रॉपर्टी	destructive	role	destructive	destructive	destructive
disabled · प्रॉपर्टी	disabled	disabled	enabled	onPressed	disabled
href · प्रॉपर्टी	href	destination	href	href	href
target · प्रॉपर्टी	target	target	target	target	target
targetLabel · प्रॉपर्टी	targetLabel	targetLabel	targetLabel	targetSemanticLabel	targetLabel
current · प्रॉपर्टी	current	isCurrent	current	isCurrent	current
click · इवेंट	click	action	onClick	onPressed	onPress
टिप्पणियाँ	With href the item's shadow root holds an <a role="menuitem" tabindex="-1"> in place of its row element, drawn through the shared link primitive (packages/web/src/primitives/link.ts) as <tanrei-list-item>'s is, with Space left among the keys that press it (MNU-54). target is the target attribute with the values same and new (the HTML spellings _self and _blank are read as those two), targetLabel the target-label attribute, and rel (to which new adds noopener) and download are web-only and forwarded to the anchor. click is the anchor's own click: cancelling it (preventDefault()) cancels the navigation and not the menu's close. The menu fires close from that click only when event.button is 0 and no modifier key is down; Enter with a modifier key is passed to the anchor, and Space calls the anchor's click(). A disabled link item is the anchor without href, with aria-disabled="true". An href attribute on tanrei-menu-checkbox-item, tanrei-menu-radio-item or tanrei-submenu is ignored and reported (MNU-57).	TanreiMenuItem(_ title:, role:, action:), as Button(role:); role: .destructive is destructive. destination: URL? = nil makes it a SwiftUI Link (the link trait in place of the button's), opened by the environment's openURL after action and after isPresented is written, which an app that routes addresses itself answers with its own OpenURLAction; target: TanreiLinkTarget = .same and targetLabel (the accessibility hint), as the Button's.	href: String? = null makes it a link: opened through LocalUriHandler.current after onClick and onDismissRequest (an app that routes addresses itself provides its own UriHandler); Compose has no link role for a clickable element, so the node drops Role.Button and carries no role; target: TanreiLinkTarget = TanreiLinkTarget.Same, and targetLabel is appended to the state description, as the Button's.	As MenuItemButton: a null onPressed disables it. href: Uri? = null makes it a link (Semantics(link: true) with the address as its linkUrl), opened by the nearest TanreiLinkOpener after onPressed and after the menu has closed; target is a TanreiLinkTarget and targetSemanticLabel the semantics hint, as the Button's.	href?: string on an entry whose kind is 'item' makes it a link (accessibilityRole="link"): onPress receives an event whose preventDefault() keeps the menu from calling Linking.openURL(href); target is "same" | "new" and targetLabel the accessibilityHint, as the Button's. An href on an entry of another kind is ignored and reported (MNU-57).

checkbox-item

An option that is switched on or off on its own, such as "Show grid". It is marked as a checkbox unless the design system, its group or the item says otherwise.

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
label	string	""	The item's text and its accessible name. Required.
supportingText	string	""	A line below the label that says more about the item.
leadingIcon	string	""	The name of an icon (a glyph of the system's icon set) before the label.
trailingIcon	string	""	The name of an icon at the end of the row.
trailingText	string	""	Text at the end of the row that is not a keyboard shortcut, such as a count or "Beta". An item's shortcut goes in shortcut; an item that has both draws the shortcut.
shortcut	strings		The item's keyboard shortcut, in the keyboard shortcut component's key names: one chord per string, pressed in order (["mod+c"]). The menu draws it at the end of the row for the keyboard the person uses and exposes it as the item's keyboard shortcut (MNU-24, MNU-31). It does not make the keys work; the product binds them.
checked	boolean	false	Whether the option is on. It is the item's own: the menu switches it when the item is activated and emits the item's change.
markIcon	string	""	The name of a glyph of the system's icon set to mark this item with while it is checked, instead of the mark the design system chooses ("check" draws a plain check). Empty takes the group's markIcon, and then the design system's choice (MNU-38).
disabled	boolean	false	Prevents activation. The item stays reachable with the arrow keys.

इवेंट	विवरण
change	The item was activated; carries its new checked.

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
आइटम	tanrei-menu-checkbox-item	TanreiMenuToggle	TanreiCheckboxMenuItem	TanreiCheckboxMenuItem	MenuCheckboxItem
label · प्रॉपर्टी	label	title	text	child	label
supportingText · प्रॉपर्टी	supportingText	supportingText	supportingText	supportingText	supportingText
leadingIcon · प्रॉपर्टी	leadingIcon	leadingIcon	leadingIcon	leadingIcon	leadingIcon
trailingIcon · प्रॉपर्टी	trailingIcon	trailingIcon	trailingIcon	trailingIcon	trailingIcon
trailingText · प्रॉपर्टी	trailingText	trailingText	trailingText	trailingText	trailingText
shortcut · प्रॉपर्टी	shortcut	shortcut	shortcut	shortcut	shortcut
checked · प्रॉपर्टी	checked	isOn	checked	value	checked
markIcon · प्रॉपर्टी	markIcon	markIcon	markIcon	markIcon	markIcon
disabled · प्रॉपर्टी	disabled	disabled	enabled	onChanged	disabled
change · इवेंट	change	isOn	onCheckedChange	onChanged	onCheckedChange
टिप्पणियाँ		TanreiMenuToggle(_ title:, isOn:), as Toggle in a menu; writing the binding is change.		As CheckboxMenuButton: value is checked, a null onChanged disables it.

radio-item

One choice of several in its group, such as "Sort by name"; its group holds which one is checked. It is marked as a radio button unless the design system, its group or the item says otherwise.

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
label	string	""	The item's text and its accessible name. Required.
supportingText	string	""	A line below the label that says more about the item.
leadingIcon	string	""	The name of an icon (a glyph of the system's icon set) before the label.
trailingIcon	string	""	The name of an icon at the end of the row.
trailingText	string	""	Text at the end of the row that is not a keyboard shortcut, such as a count or "Beta". An item's shortcut goes in shortcut; an item that has both draws the shortcut.
shortcut	strings		The item's keyboard shortcut, in the keyboard shortcut component's key names: one chord per string, pressed in order (["mod+c"]). The menu draws it at the end of the row for the keyboard the person uses and exposes it as the item's keyboard shortcut (MNU-24, MNU-31). It does not make the keys work; the product binds them.
value	string	""	Identifies the choice: the item is checked while its group's value equals it. Unique within its group; required.
markIcon	string	""	The name of a glyph of the system's icon set to mark this item with while it is checked, instead of the mark the design system chooses ("check" draws a plain check). Empty takes the group's markIcon, and then the design system's choice (MNU-38).
disabled	boolean	false	Prevents activation. The item stays reachable with the arrow keys.

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
आइटम	tanrei-menu-radio-item	TanreiMenuOption	TanreiRadioMenuItem	TanreiRadioMenuItem	MenuRadioItem
label · प्रॉपर्टी	label	title	text	child	label
supportingText · प्रॉपर्टी	supportingText	supportingText	supportingText	supportingText	supportingText
leadingIcon · प्रॉपर्टी	leadingIcon	leadingIcon	leadingIcon	leadingIcon	leadingIcon
trailingIcon · प्रॉपर्टी	trailingIcon	trailingIcon	trailingIcon	trailingIcon	trailingIcon
trailingText · प्रॉपर्टी	trailingText	trailingText	trailingText	trailingText	trailingText
shortcut · प्रॉपर्टी	shortcut	shortcut	shortcut	shortcut	shortcut
value · प्रॉपर्टी	value	tag	value	value	value
markIcon · प्रॉपर्टी	markIcon	markIcon	markIcon	markIcon	markIcon
disabled · प्रॉपर्टी	disabled	disabled	enabled	enabled	disabled
टिप्पणियाँ		TanreiMenuOption(_ title:).tag(value) inside a section with a selection, as a Picker's tagged options.		As RadioMenuButton under a RadioGroup: the item takes its value and enabled, the group the selection.

submenu · ग्रुप — इसमें आइटम होते हैं

An item that opens another level of the menu beside it: it holds that level's items, of any kind, further submenus included. It is not an action and has no shortcut.

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
label	string	""	The item's text and its accessible name. Required.
supportingText	string	""	A line below the label that says more about the item.
leadingIcon	string	""	The name of an icon (a glyph of the system's icon set) before the label.
trailingText	string	""	Text at the end of the row, before the submenu indicator: the current value of what the submenu sets ("English"), or a count.
open	boolean	false	Whether the item's submenu is shown. It is the item's own: the menu sets it when the submenu is opened or closed and emits the item's toggle; the product may also set it. It shows nothing while the surface that holds the item is not shown.
disabled	boolean	false	Prevents the submenu from opening. The item stays reachable with the arrow keys.

इवेंट	विवरण
toggle	The item's submenu was opened or closed by the person; carries its new open.

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
आइटम	tanrei-submenu	TanreiSubmenu	TanreiSubmenu	TanreiSubmenu	MenuSubmenu
label · प्रॉपर्टी	label	title	text	child	label
supportingText · प्रॉपर्टी	supportingText	supportingText	supportingText	supportingText	supportingText
leadingIcon · प्रॉपर्टी	leadingIcon	leadingIcon	leadingIcon	leadingIcon	leadingIcon
trailingText · प्रॉपर्टी	trailingText	trailingText	trailingText	trailingText	trailingText
open · प्रॉपर्टी	open	isExpanded	expanded	controller	open
disabled · प्रॉपर्टी	disabled	disabled	enabled	enabled	disabled
toggle · इवेंट	toggle	isExpanded	onExpandedChange	onOpenChanged	onOpenChange
टिप्पणियाँ	<tanrei-submenu label="Open recent"> holds the submenu's items as its children, as tanrei-menu holds its own; it draws the row in its parent's surface and its own surface as a manual popover in the top layer. open reflects, and toggle fires on it and bubbles.	TanreiSubmenu(_ title:, isExpanded:) { … }, as a Menu nested in a Menu; the binding is optional, and writing it is toggle. disabled follows .disabled(_:).	TanreiSubmenu(text, expanded, onExpandedChange) { … }: the caller keeps expanded (state hoisting), and an overload without the pair keeps it itself. enabled is the inverse flag.	As SubmenuButton: TanreiSubmenu(child:, menuChildren: […], controller:, onOpenChanged:); the optional MenuController opens and closes it, as the anchor's does the menu.	{ kind: 'submenu', label, items: […], open?, onOpenChange? }: uncontrolled unless open is given.

group · ग्रुप — इसमें आइटम होते हैं

A run of related items, optionally titled. The menu separates a group from what is next to it, by a divider or a gap, and a group of radio items is one set of choices.

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
title	string	""	A short heading drawn above the group's items, which also names the group; empty draws none and leaves the group unnamed.
value	string	null	The value of the group's checked radio item; null checks none. The group sets it when a radio item is chosen and emits its change; the product may also set it. Unused by a group without radio items.
markIcon	string	""	The name of a glyph of the system's icon set that marks the group's checked checkbox and radio items, for those that name none of their own ("check" draws a plain check). Empty takes the design system's choice (MNU-38).

इवेंट	विवरण
change	A radio item of the group was chosen; carries the group's new value.

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
आइटम	tanrei-menu-group	TanreiMenuSection	TanreiMenuGroup	TanreiMenuGroup	MenuGroup
title · प्रॉपर्टी	label	title	title	title	title
value · प्रॉपर्टी	value	selection	selectedValue	groupValue	value
markIcon · प्रॉपर्टी	markIcon	markIcon	markIcon	markIcon	markIcon
change · इवेंट	change	selection	onSelectedValueChange	onChanged	onValueChange
टिप्पणियाँ	The title is the label attribute, as <optgroup label>: a title attribute would also draw the browser's tooltip. The group sets its own value before firing change.	TanreiMenuSection(_ title:) { … } as Section; TanreiMenuSection(_ title:, selection:) { TanreiMenuOption … } for radio items, as an inline Picker. Writing the binding is change.	TanreiMenuGroup(title, selectedValue, onSelectedValueChange) { TanreiRadioMenuItem(text, value) }; the caller keeps selectedValue.	TanreiMenuGroup<T>(title:, groupValue:, onChanged:, children:), which is also the RadioGroup of its radio items.	{ kind: 'group', title?, value?, onValueChange?, items: (MenuItem | MenuCheckboxItem | MenuRadioItem)[] }.

स्टेट

व्यवहार

EARS रूप में लिखी गई आवश्यकताएँ। हर प्लैटफ़ॉर्म के इम्प्लीमेंटेशन को इन ID के आधार पर टेस्ट किया जाता है। आवश्यकताओं का पाठ स्पेक फ़ाइल से ज्यों का त्यों, अंग्रेज़ी में दिखाया गया है।

ID	आवश्यकता
MNU-1	WHEN open becomes true THE menu SHALL present its surface in the platform's overlay layer (the web's top layer through the popover API, SwiftUI's popover, Compose's Popup, Flutter's Overlay, React Native's overlay layer that TanreiProvider renders), above other content at comp.menu.surface.elevation, and SHALL move focus to its first enabled item, wherever that item stands in the surface: inside a group as well, a menu whose every item is in a group included, and a menu the product mounts with open true included; WHEN open becomes false THE menu SHALL remove the surface and, if focus was inside it, return focus to the anchor (a context menu: to the element MNU-62 names). A menu is an operated overlay, so it takes focus and returns it although it is not modal.
MNU-2	WHILE trigger is anchor THE menu SHALL place its surface comp.menu.surface.offset from the anchor on the side and edge that placement names (bottom-start: below the anchor with the start edges aligned; bottom-end: below with the end edges aligned; top-start and top-end: above); WHERE that side has less room than the surface needs within comp.menu.surface.viewport-margin of the edge of the visible part of the window, above the on-screen keyboard while one is shown, and the other side has more THE menu SHALL flip to the other side; it SHALL shift along the anchor to stay within that margin, SHALL limit its height to the least of the height its items need, the most height the product's own style gives the surface where it gives one (on the web, max-block-size on the surface part), and the room left, place the surface by that height and scroll its items beyond it, and SHALL keep following the anchor while it moves. WHEN the on-screen keyboard shows or hides, or the visible part of the window otherwise moves or changes size, THE menu SHALL place its surface again inside what is visible. WHEN the layout direction is right-to-left start and end SHALL mirror.
MNU-3	THE menu SHALL make its surface at least comp.menu.surface.min-width and at most comp.menu.surface.max-width wide — as wide as its widest item within those bounds — inset its items by comp.menu.surface.padding-block and comp.menu.surface.padding-inline, fill it with comp.menu.surface.color, round it by comp.menu.surface.shape eased by sys.shape.corner-smoothing, and clip its items to that shape.
MNU-4	WHEN the menu opens THE menu SHALL fade its surface in and grow it from the edge that faces the anchor over comp.menu.motion.open-duration with comp.menu.motion.open-easing, and WHEN it closes fade it out over comp.menu.motion.close-duration with comp.menu.motion.close-easing; WHERE motion is reduced it SHALL appear and disappear at once. WHEN it is mounted with open true THE menu SHALL draw its surface, and the surface of every submenu open in it (MNU-50), without that motion while the document has not yet been first painted, and with it when it is mounted after that.
MNU-5	WHEN the user presses Escape or the platform's back while no submenu is open, presses outside every surface of the menu and the anchor (the area of a context menu is outside, MNU-62), presses Tab or Shift+Tab at any level, or moves focus out of the menu and all of its submenus THE menu SHALL emit close once with that reason and SHALL be closed, every open submenu with it (MNU-49): through its binding or controller where open is one (SwiftUI, Flutter), and by the product setting open to false where open is a plain value (web, Compose, React Native); Tab and Shift+Tab SHALL then move focus on from the anchor as they would have from it (a context menu: from the element MNU-62 names). Whether a press outside also reaches the element under it SHALL follow the platform and be stated in its README.
MNU-6	WHEN the user activates an enabled item (an action) at any level by pointer, touch, Enter or Space THE menu SHALL emit the item's click once, then emit close and be closed as MNU-5 says, every open submenu with it, an item that is a link (MNU-53) opening its destination after that, and only for an activation that MNU-54 counts; WHEN the user activates an enabled checkbox item THE menu SHALL switch its checked and emit the item's change once with the new checked; WHEN the user activates an enabled radio item whose value is not its group's value THE menu SHALL set the group's value to the radio item's value, so that the group's other radio items become unchecked, and emit the group's change once; activating a radio item that is already checked SHALL emit no change. After a checkbox or radio item, a checked radio item included, the menu SHALL close as for an action when the activation came from pointer, touch or Enter, and SHALL stay open, at every level, when it came from Space. Activating a submenu item opens its submenu and closes nothing (MNU-43).
MNU-7	WHILE the menu is open THE menu SHALL move focus among the items of the surface that holds focus — the menu's own or one submenu's, never across levels — to the next and previous item with Down Arrow and Up Arrow, wrapping at the ends and passing through groups as if their items were the surface's, to the first and last item with Home and End, and to the next item of that surface whose label begins with the typed characters when printable characters are typed within one second of each other; disabled items SHALL be reachable but SHALL NOT activate, a submenu item SHALL take focus as any other item, and dividers, groups and group titles SHALL NOT take focus.
MNU-8	WHEN a pointer moves onto an item THE menu SHALL move focus to that item without showing the focus ring and render it hovered, so that the arrow keys continue from it, except while the pointer is on its way to an open submenu (MNU-45); WHEN the pointer leaves the surface focus SHALL stay on that item.
MNU-9	WHILE an item's disabled is true THE menu SHALL NOT emit its click or change, nor its group's change, for it and SHALL expose the disabled state to assistive technology.
MNU-10	WHILE an item is hovered, keyboard-focused or pressed THE menu SHALL render its container, label, supporting text, trailing text, icons, mark (a glyph's mark color, and a control look's control and control-mark colors) and opacity from the component tokens of its condition in the highest-precedence active state, with precedence pressed over focused over hovered; focus gained by pointer or touch SHALL NOT select the focused state.
MNU-11	WHEN an item receives keyboard focus THE menu SHALL show the focus ring inside the item's container, which the surface would otherwise clip, without animation; focus gained by pointer or touch SHALL NOT show it.
MNU-12	WHERE an item is shorter than the minimum target THE menu SHALL make its container at least sys.target.touch tall for touch input, in both densities, because stacked items cannot extend a hit area over each other, and for fine pointers at least sys.target.pointer tall WHILE density is regular and as tall as its density gives WHILE density is compact (MNU-64), the one place where a row of the menu is lower than the pointer target; a platform that cannot tell the input type SHALL use sys.target.touch. The whole row SHALL be the item's hit area.
MNU-13	WHILE an item's disabled is true THE menu SHALL render its container, label, supporting text, trailing text, icons, mark (a glyph's mark color, and a control look's control and control-mark colors) and opacity from the disabled component tokens of its condition.
MNU-14	WHEN placement names a value the menu does not define THE menu SHALL render with the default value, and in debug builds report the unknown value.
MNU-15	WHEN the menu item is pressed by pointer, touch, Enter or Space THE menu item SHALL show the pressed state without delay and SHALL keep it visible for at least sys.motion.duration.press-hold, even when the press ends sooner.
MNU-16	WHILE pressed THE menu item SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole container at once; ripple grows the pressed state layer from the point of contact (from the center for keyboard activation); dim applies the pressed opacity to the whole control and draws no state layer; none draws no answer to the press. Under ripple and dim only the container color stays with the state under the press; label, supporting text, trailing text, icons, mark, opacity and shape still come from the pressed tokens. Under none every part stays with the state under the press. The ripple grows over comp.menu.motion.feedback-duration with comp.menu.motion.state-easing, fades over comp.menu.motion.state-duration with comp.menu.motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced.
MNU-17	THE menu item SHALL ease its container corners by sys.shape.corner-smoothing (0 is a quarter circle, 0.6 the iOS continuous corner; a platform with only the OS curve draws it for any amount above 0) and show its keyboard focus as sys.behavior.focus-style names (ring or glow); a platform that cannot draw a choice SHALL fall back to the first value and state that in its README.
MNU-18	THE menu SHALL draw an item from the condition it is in: destructive for an item (an action) whose destructive is true, selected for a checkbox item whose checked is true and for a radio item whose value equals its group's value, current for a link item whose current is true (MNU-58), expanded for a submenu item whose submenu is open, otherwise unselected.
MNU-19	THE menu SHALL lay out an item as one row: comp.menu.container.padding-inline.regular from each edge, the mark column and the leading icon column, each where MNU-59 keeps it, the label with the supporting text below it taking the remaining width, then the trailing column, which holds the shortcut or the trailing text, and the trailing icon column, which holds the trailing icon or, in a submenu item, the submenu indicator (MNU-42) or, in a link item that opens a new context and names no trailing icon, its mark (MNU-55), each comp.menu.container.gap.regular from the next; an empty trailing icon column SHALL keep its width in every item of the same surface so that shortcuts, trailing text and trailing icons align, each surface — the menu's and each submenu's — reserving its own, and WHEN the layout direction is right-to-left THE menu SHALL mirror the row.
MNU-20	THE menu SHALL make an item at least comp.menu.container.height.regular tall, pad its content by comp.menu.container.padding-block.regular above and below, draw the label in comp.menu.label.typescale, the supporting text in comp.menu.supporting-text.typescale and the trailing text and the shortcut's legends in comp.menu.trailing-text.typescale, and grow with its content and with enlarged text rather than clip or truncate it.
MNU-21	THE menu SHALL draw leadingIcon at comp.menu.leading-icon.size.regular and trailingIcon at comp.menu.trailing-icon.size.regular through the icon helper, with the family and fill of the item's condition (selected for a checked item and for a current link item, otherwise unselected), sys.icon.weight and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max; an empty name SHALL draw nothing.
MNU-22	WHILE a checkbox or radio item is checked and its mark is a glyph (MNU-38) THE menu SHALL draw that glyph of the system's icon set — check where the design system's choice is check, the named glyph where markIcon names one — in its mark column, centered in a box of side comp.menu.mark.size.regular, in the mark color of its condition, with sys.icon.family.selected, sys.icon.fill.selected, sys.icon.weight and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max, and SHALL draw nothing in that column while the item is not checked; it SHALL NOT mirror the check when the layout direction is right-to-left, a glyph that markIcon names following MNU-33; THE menu SHALL draw no mark of its own (no path, shape or character of its own for the check). WHEN checked changes while the menu is open THE menu SHALL fade the glyph in or out over comp.menu.motion.state-duration with comp.menu.motion.state-easing without moving or scaling it, and at once where motion is reduced.
MNU-23	WHILE the menu's separation is divider (MNU-35) THE menu SHALL draw a line of comp.menu.divider.thickness in comp.menu.divider.color across the surface's inner width, inside comp.menu.surface.padding-inline on each side (the same inset as the rows, not the rows' own padding) between a group and an adjacent group or an adjacent item outside any group, with comp.menu.divider.space above and below it, and SHALL expose it as a separator that takes no focus; it SHALL draw no line before the first or after the last element of the surface.
MNU-24	THE menu SHALL expose the menu role, named by its anchor (a context menu as MNU-63 says); each item as a menu item, a link item included (MNU-53), each checkbox item as a menu item checkbox and each radio item as a menu item radio with its checked state, whatever its mark looks like, each with its position and the size of the surface it is in, named by label and described by supporting text, a link item that opens a new context also by its targetLabel (MNU-55), and a link item that is current with the current state (MNU-58); each submenu item as a menu item that opens a menu, with whether that menu is open (aria-haspopup with the value menu, and aria-expanded, on the web), described also by its trailing text, and each submenu's surface as a menu of its own named by its submenu item's label; shortcut SHALL be exposed as the item's keyboard shortcut in the form KBS-12 gives (aria-keyshortcuts on the web) where the platform has that property, and otherwise the text KBS-10 gives as the item's description; trailing text SHALL be exposed as the item's description only, never as a keyboard shortcut, whatever it holds; icons, the mark and the submenu indicator SHALL be hidden; each group SHALL be exposed as a group, named by its title where it has one. WHILE trigger is anchor THE menu SHALL also expose on its anchor that it opens a menu and whether the menu is open, where the platform has that property.
MNU-25	WHILE the menu is open THE menu SHALL NOT trap focus, SHALL NOT make the rest of the screen inert and SHALL draw no scrim: it is an operated overlay that is not modal.
MNU-26	WHILE an item's label is empty THE menu SHALL still render the item, and in debug builds report that it has no accessible name.
MNU-27	WHEN the colors of an item change between states THE menu SHALL animate them over comp.menu.motion.state-duration with comp.menu.motion.state-easing, and SHALL change them at once where motion is reduced.
MNU-28	WHILE a group's title is not empty THE menu SHALL draw it above the group's items in comp.menu.group-title.typescale and comp.menu.group-title.color, starting comp.menu.group-title.padding-inline.regular from the rows' start edge and ending comp.menu.group-title.padding-inline.regular from their end edge, whether or not the menu draws the mark and leading icon columns (so that, at the default values, the title starts where each row's first column starts: the mark, the leading icon or the label), with comp.menu.container.padding-block.regular above and below, wrapping and growing with enlarged text rather than clipping; WHEN the layout direction is right-to-left start and end SHALL mirror. The title SHALL take no focus and SHALL NOT be read as an item.
MNU-29	WHEN a radio item is not inside a group, or a group's value names none of its radio items THE menu SHALL draw every such radio item unchecked; WHEN two radio items of one group share a value THE menu SHALL check both while the group's value names it; WHEN a group holds another group THE menu SHALL draw the inner group's items as the outer group's, with no title or divider of the inner group's own; in debug builds it SHALL report each of these.
MNU-30	IF the icon set cannot draw a glyph the menu draws yet — the check or the named glyph of a mark, the check inside a checked box, the submenu indicator — because its font is still loading or failed to load THE menu SHALL draw nothing in the glyph's place, never the glyph's name as text, SHALL keep its column's width, SHALL still draw the box of a checkbox look and the ring of a radio look, SHALL still expose the item's checked state and whether its submenu is open, and SHALL show the glyph once the icon set can draw it, without the fade of MNU-22.
MNU-31	WHILE an item's shortcut is not empty THE menu SHALL draw it in the item's trailing column with the keyboard shortcut component, hosted as KBS-13 says: at size small, in the form comp.menu.shortcut.variant names, with convention auto, and disabled while the item is disabled; its legends and separators SHALL take comp.menu.trailing-text.typescale and the trailing-text color of the item's condition and state, and its caps the keyboard shortcut's own tokens. IF an item has both a shortcut and trailing text THE menu SHALL draw the shortcut, not the trailing text, and in debug builds report the item.
MNU-32	THE menu SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the menu is shown THE menu SHALL draw itself for the new direction at once, without a motion of its own, keeping its open state and its focus, the surface placed again by the new direction (MNU-2).
MNU-33	WHERE the layout direction is right-to-left THE menu SHALL draw an item's leading icon and trailing icon, the glyph a markIcon names and the submenu indicator mirrored left to right exactly when the system's icon set marks that glyph's name as mirrored or the product forces mirroring for that use, and unmirrored when the product forbids it: the icon helper mirrors the glyph inside its own box, about the box's vertical centre line, changing neither its place, size, color and fill nor the order MNU-19 gives. THE menu SHALL NOT mirror a glyph itself, and SHALL NOT mirror content the product gives as an image or a view of its own rather than by a glyph's name. The check — the check of a mark and the check inside a checked box — is never mirrored (MNU-22, MNU-39).
MNU-34	THE menu SHALL lay out an item's label, supporting text and trailing text and a group's title as text of its own direction, isolated from the text around it: each takes the base direction of its first strong character, or the layout direction where it has none, so that a left-to-right word, a number with its sign or unit, a telephone number and an address keep their own order in a right-to-left layout and reorder nothing beside them; THE menu SHALL still place each and align its lines by the layout direction, not by the text's own.
MNU-35	THE menu SHALL separate a group from an adjacent group or an adjacent item outside any group as its separation names: WHILE separation is auto, as comp.menu.separation names, which follows sys.behavior.separation unless a design system sets it apart; WHILE separation is divider or gap, as that value names, whatever the tokens say; divider draws the line of MNU-23 and gap leaves the space of MNU-36. Every submenu SHALL separate its groups as its menu does. WHEN separation, or the token it follows, changes THE menu SHALL draw the other form at once, without animation, keeping its open state and its focus; WHEN separation names a value the menu does not define THE menu SHALL treat it as auto and in debug builds report the unknown value. A platform that cannot draw a choice SHALL fall back to the first value, divider, and state that in its README.
MNU-36	WHILE the menu's separation is gap (MNU-35) THE menu SHALL draw each group, and each run of adjacent items outside any group, as a tile of its own: a sheet of comp.menu.surface.color with the corners comp.menu.surface.shape eased by sys.shape.corner-smoothing and the elevation comp.menu.surface.elevation, its ring drawn inside the tile's edge, holding its rows inside comp.menu.surface.padding-block and comp.menu.surface.padding-inline as the surface holds them; it SHALL leave comp.menu.group.gap of empty space between two tiles, through which what is under the menu shows, and SHALL draw no sheet, edge or elevation of its own around the tiles. It SHALL draw no line between tiles and SHALL expose no separator, the groups staying exposed as groups (MNU-24) and a tile being nothing to assistive technology; it SHALL leave no space before the first or after the last tile, and a group's title SHALL keep its own padding inside its tile (MNU-28). The tiles of a menu taller than the room it has SHALL scroll together inside the menu's bounds (MNU-2), and every submenu SHALL draw its tiles the same way: the gap tells the parts of a menu apart by cutting its sheet, as the gap of a button group or of an accordion makes separate shapes, never by empty space on one sheet.
MNU-37	WHILE a checkbox or radio item is checked THE menu SHALL fill its row, within the corners comp.menu.container.shape gives, with the container color of the selected condition in its state (comp.menu.selected.container.color at rest), SHALL draw that fill over its surface (comp.menu.surface.color) and under the row's content, so that a container color that is not opaque lets the surface show through it and nothing else, and SHALL draw its label, supporting text, trailing text and icons in that condition's colors; checked rows next to each other SHALL each keep their own corners and SHALL NOT be joined into one shape. THE menu SHALL NOT show a choice by the fill alone: a checked item always draws its mark (MNU-38), and a design system whose selected container color is none still marks it. The mark is what tells a checked item; the fill is a second cue a design system may give or withhold, through comp.menu.selected.container.color for each contrast scheme, and the menu SHALL read that token in the scheme it is drawn in and SHALL NOT decide the fill by the scheme itself. The default system gives it at medium and high contrast, where a person has asked for stronger cues, and withholds it at standard contrast, so that there the one filled row of a menu is the row the person is on (MNU-58).
MNU-38	THE menu SHALL draw the mark of a checkbox or radio item as the first of these that applies: the glyph the item's markIcon names; the glyph its group's markIcon names; otherwise what the design system chooses for the item's kind — comp.menu.checkbox-item.mark for a checkbox item (checkbox: the checkbox look of MNU-39; check: the icon set's check, as MNU-22 draws it) and comp.menu.radio-item.mark for a radio item (radio: the radio look of MNU-40; check: the same check). Whatever the mark is THE menu SHALL place it in the mark column, the first column of the row (MNU-19), before the leading icon, centered in a box of side comp.menu.mark.size.regular, SHALL hide it from assistive technology, SHALL NOT make it a control of its own (it takes no focus and no press and has no role apart from its item's), and SHALL keep exposing the item as a menu item checkbox or a menu item radio with its checked state (MNU-24). A platform that cannot draw a choice SHALL fall back to the first value and state that in its README.
MNU-39	WHILE a checkbox item's mark is the checkbox look (MNU-38) THE menu SHALL draw, whether the item is checked or not, a box of side comp.menu.control.box.size with corners comp.menu.control.box.shape eased by sys.shape.corner-smoothing: WHILE the item is not checked the box SHALL be empty, with an outline of comp.menu.control.outline.width inside its edge in the control color of its condition and state (comp.menu.unselected.control.color at rest); WHILE it is checked the box SHALL be filled in the control color (comp.menu.selected.control.color at rest), outline and fill being one shape with no seam between them, with the glyph check of the system's icon set centered on it at comp.menu.control.mark.size in the control-mark color of its condition and state, drawn with sys.icon.family.selected, sys.icon.fill.selected, the weight comp.menu.control.mark.weight (not sys.icon.weight: the check in the box is a control's own mark, as the checkbox's is, CHK-12) and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max, not clipped by the box and never mirrored; the weight SHALL change the stroke of the glyph only. THE menu SHALL draw no round state layer behind the box: the row is the item's container.
MNU-40	WHILE a radio item's mark is the radio look (MNU-38) THE menu SHALL draw, whether the item is checked or not, a ring of outer diameter comp.menu.control.ring.size in the control color of its condition and state, the outer diameter the same in both conditions: WHILE the item is not checked the ring SHALL be stroked at comp.menu.control.ring.width inside that diameter; WHILE it is checked it SHALL be stroked at comp.menu.control.ring.selected-width-share of the ring's radius, or at comp.menu.control.ring.width where that is wider, the stroke growing inward, and the area inside the ring's inner edge, less comp.menu.control.fill.inset all round, SHALL be filled in the same control color at comp.menu.control.fill.opacity, ring and fill being one shape where they touch; a fill whose diameter would be zero or less SHALL NOT be drawn. THE menu SHALL draw no dot and no round state layer of its own.
MNU-41	WHEN checked changes while the menu is open and the item's mark is a control look THE menu SHALL move the box's outline and fill, the check inside it, and the ring's stroke and fill from the old condition to the new over comp.menu.motion.state-duration with comp.menu.motion.state-easing — the check fading, the ring's stroke growing or thinning inward — without moving or resizing the box or the ring's outer diameter, and the row's fill SHALL change with it (MNU-27); WHERE motion is reduced it SHALL draw the new condition whole at once.
MNU-42	THE menu SHALL draw a submenu item as an item's row (MNU-19, MNU-20) with the submenu indicator in its trailing icon column: the glyph chevron_right of the system's icon set at comp.menu.trailing-icon.size.regular in the trailing-icon color of the item's condition and state, drawn through the icon helper with sys.icon.family.unselected, sys.icon.fill.unselected, sys.icon.weight and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max; its trailing text, where it has one, SHALL be drawn in the trailing column before the indicator, and a submenu item SHALL have no shortcut, no trailing icon of the product's and no mark. THE menu SHALL draw no chevron of its own (no path, shape or character of its own).
MNU-43	WHEN the user presses Enter or Space on an enabled submenu item, presses the arrow key that points to the inline end on it (Right Arrow in a left-to-right layout, Left Arrow in a right-to-left one), presses it with a pointer or taps it THE menu SHALL open that item's submenu without delay, close any other open submenu of the same surface, move focus to the submenu's first enabled item (its first item where none is enabled), showing the focus ring only when the input was a key, set the item's open to true and emit the item's toggle once with true; it SHALL NOT emit close and SHALL close nothing else. WHEN the submenu is already open the same input SHALL move focus to its first enabled item and emit nothing. WHEN the product sets a submenu item's open to true while the surface that holds the item is shown THE menu SHALL open the submenu without moving focus and without emitting toggle.
MNU-44	WHEN a pointer that can hover rests on an enabled submenu item for comp.menu.motion.submenu-delay THE menu SHALL open that item's submenu, closing any other open submenu of the same surface, and SHALL leave focus on the submenu item (MNU-8) until the pointer enters the submenu or a key moves it; a pointer that leaves the item sooner SHALL open nothing. Touch has no hover: a tap opens the submenu (MNU-43). WHERE motion is reduced the delay SHALL still apply: it reads the pointer's intent and is not an animation.
MNU-45	WHILE a submenu is open and the pointer moves from its submenu item towards it THE menu SHALL keep the submenu open and SHALL NOT move hover or focus to the items the pointer crosses on the way (MNU-8): the pointer is on its way while it keeps moving inside the triangle whose corners are the pointer's last position on the submenu item and the two corners of the submenu's surface on the side that faces the item. WHEN the pointer leaves that triangle without entering the submenu, or rests inside it for comp.menu.motion.submenu-delay THE menu SHALL treat the item under the pointer as MNU-8 says, which closes the submenu when that item is another one (MNU-48). The triangle SHALL be taken anew each time the pointer leaves the submenu item and SHALL follow the side the submenu is placed on (MNU-46), so that it mirrors in a right-to-left layout and when the submenu is placed on the other side.
MNU-46	THE menu SHALL place a submenu's surface beside the surface that holds its submenu item, comp.menu.submenu.offset from that surface's inline-end edge (to the right in a left-to-right layout, to the left in a right-to-left one), with the block-start edge of its first row level with the block-start edge of the submenu item's row, and SHALL draw it above the surface it opened from; WHERE that side has less room than the surface needs within comp.menu.surface.viewport-margin of the edge of the visible part of the window, above the on-screen keyboard while one is shown, and the inline-start side has more THE menu SHALL place it on the inline-start side instead, the same distance from that edge, and a submenu opened from a surface placed that way SHALL try that side first; it SHALL shift the surface along the block axis to stay within that margin, SHALL limit its height to the least of the height its items need, the most the product's own style gives the submenu's surface (MNU-2) and the room left and scroll its items beyond it, and SHALL keep it in place against its submenu item while that item moves. WHEN the submenu item is scrolled out of the visible part of its surface THE menu SHALL close the submenu (MNU-48).
MNU-47	WHERE neither side of the surface that holds a submenu item has room for the submenu's surface at comp.menu.surface.min-width within comp.menu.surface.viewport-margin THE menu SHALL still present the submenu as a surface of its own, laid over the surface it opened from, on the side with more room and as far towards that side as the margin allows, narrowed down to comp.menu.surface.min-width before it covers more, and SHALL leave at least sys.target.touch of the covered surface's inline size uncovered on its other side wherever the visible part of the window is wide enough for both; THE menu SHALL NOT replace the items of a surface with its submenu's at any window size. WHILE a submenu covers part of the surface it opened from, a press on the uncovered part of that surface SHALL close the submenu as MNU-48 says and SHALL NOT activate the item under the press, so that a person without a keyboard or a back button can go back one level; keys and focus SHALL behave as in a wide window.
MNU-48	WHEN focus is in a submenu and the user presses the arrow key that points to the inline start (Left Arrow in a left-to-right layout, Right Arrow in a right-to-left one), Escape or the platform's back THE menu SHALL close that submenu and every submenu opened from it, and nothing else, return focus to its submenu item, showing the focus ring only when the input was a key, set the item's open to false and emit the item's toggle once with false, without emitting close. WHEN focus or hover moves to another item of the surface that holds the submenu item (MNU-7, MNU-8), WHEN the submenu item becomes disabled or is removed, or WHEN the product sets its open to false THE menu SHALL close the submenu the same way — the product's own change emitting no toggle — and focus that was inside it SHALL move to the submenu item, or to the item that took focus. Escape and the platform's back SHALL close one level for each press, and the menu itself only when no submenu is open (MNU-5). THE menu SHALL keep at most one submenu open in each surface.
MNU-49	WHEN the menu is closed — for a reason MNU-5 or MNU-6 names, at whatever level it arose, or because the product sets open to false — THE menu SHALL close every open submenu with it at once, emit close once and never once for each level, set each closed submenu item's open to false without emitting its toggle, and return focus to the anchor as MNU-1 says (a context menu: to the element MNU-62 names), not to a submenu item; a press inside any surface of the menu SHALL NOT count as a press outside, and focus moving between the menu's surfaces SHALL NOT count as focus leaving it. The surfaces SHALL fade out together as MNU-4 says.
MNU-50	WHILE a submenu is open THE menu SHALL draw its submenu item in the expanded condition (MNU-18) in whatever interaction state it is in, so that the path from the menu to the surface in use stays marked while the pointer and focus are elsewhere, drawing that condition's container color over its surface as MNU-37 draws a checked row's, and SHALL draw the submenu's surface as the menu's own (MNU-3) from the same tokens, its items following every behaviour of the menu's items, with the open and close motion of MNU-4 growing from the edge that faces its submenu item.
MNU-51	WHEN the user presses the arrow key that points to the inline end on an item that is not a submenu item, or the arrow key that points to the inline start in the menu's own surface THE menu SHALL do nothing and SHALL NOT let the key scroll or act on what is behind the menu. WHILE a submenu item's disabled is true THE menu SHALL NOT open its submenu by any input, SHALL close it if it is open (MNU-48), and SHALL still expose that the item opens a menu, with the disabled state (MNU-9).
MNU-52	THE menu SHALL let a submenu hold items of every kind, groups and further submenus included, to any depth, each level behaving as MNU-42 to MNU-51 say, and SHALL keep the radio items of a submenu apart from those of every other surface: a group's value reaches only the radio items that are its own. WHEN a submenu item lies more than two levels of submenu below the menu, or WHEN a submenu holds no item THE menu SHALL still render what it can — a submenu with no item draws its row and its indicator, takes focus and opens nothing — and in debug builds report each. WHILE open is true on a submenu item whose own surface is not shown THE menu SHALL show nothing for it until that surface is shown.
MNU-53	WHILE an item's href is not empty THE menu SHALL make the item a link item: the platform's own link to href (the web's anchor element; SwiftUI's Link; on Compose, Flutter and React Native an element with the platform's link semantics whose address is opened by the platform's opener), as BTN-22 says for a link button, so that whatever the platform gives a link — on the web its context menu, opening in a new tab or window, copying and dragging its address, and the address shown before it is followed — is the platform's, and not the menu's to draw or to take over. WHERE the platform has a menu item role (the web) THE menu SHALL expose a link item with that role, on the link itself, and not with the link role: a menu's own role, an item's position in it and the keys of MNU-7 hold only while everything the menu holds is a menu item, and a menu of links is operated as a menu; WHERE the platform's menu items are buttons and it has no such role THE link item SHALL carry the platform's link role or trait in place of the button's. Everything this spec says of an item (an action) other than what MNU-54 to MNU-57 say — its row and columns, its conditions, destructive included, its states, focus ring, minimum height, press answer, corners and motion, its place in the order of the arrow keys, Home, End and typed characters, and focus following the pointer (MNU-7, MNU-8, MNU-10 to MNU-21, MNU-27, MNU-31) — SHALL hold for a link item from the same tokens, with no look of its own for a link and none for a destination already visited; a link item SHALL NOT be a Tab stop, as no item of a menu is.
MNU-54	WHEN the user activates an enabled link item at any level as an item of a menu is activated — by a click with the primary button and no modifier key, a touch, Enter or Space with no modifier key, or the default action of assistive technology — THE menu SHALL emit the item's click exactly once, then emit close with the reason item and be closed as MNU-6 says for an action, and then open href where target names, unless the product cancelled that click, in which case it SHALL still close and SHALL open nothing: the product's own router has taken the navigation. It SHALL show the pressed state as MNU-15 and MNU-16 say and SHALL NOT hold the closing or the navigation back for sys.motion.duration.press-hold. Space SHALL activate a link item exactly as Enter does and SHALL scroll nothing: a link item is exposed and operated as a menu item (MNU-53), nothing in its look tells it from the action in the next row, Space activates every other row of the menu, and behind an open menu Space has no page to scroll (MNU-51). For every other activation the platform gives a link — on the web a click or Enter with a modifier key, a middle click and the link's context menu, on Apple platforms a long press that previews — THE menu SHALL leave the link to the platform, SHALL prevent, replace or imitate none of it, SHALL NOT emit close and SHALL stay open at every level with focus where it was, so that a person can open several of a menu's links in other tabs one after another; what MNU-5 says of a press outside and of focus leaving the menu still holds.
MNU-55	WHILE an item is a link item and its target is new THE menu SHALL open href in a new context — on the web a new tab or window that is given no handle to the page that opened it; on the other platforms outside the screen the person is on, as the platform's opener decides — and, WHILE the item's trailingIcon is empty, SHALL draw the glyph open_in_new of the system's icon set in the item's trailing icon column, as MNU-21 draws trailingIcon: at comp.menu.trailing-icon.size.regular, in the trailing-icon color of the item's condition and state (comp.menu.unselected.trailing-icon.color at rest, comp.menu.destructive.trailing-icon.color for a destructive item), through the icon helper, which mirrors it in a right-to-left layout because the icon set marks its name (MNU-33), hidden from assistive technology, and held to MNU-30 while the icon set cannot draw it. The mark SHALL reserve the trailing icon column in its surface as a trailing icon does (MNU-19), and the item's shortcut or trailing text SHALL keep its own column before it: the mark stands where a glyph of the product's would, not where the keys are written. WHILE trailingIcon names a glyph THE menu SHALL draw that glyph and no mark of its own: the product has chosen what that place shows. Whether a mark is drawn or not THE menu SHALL expose targetLabel as the end of the item's description, after its supporting text and whatever else MNU-24 puts there, and WHILE targetLabel is empty SHALL still render and in debug builds report that a link that opens a new context does not say so. WHILE target is same THE menu SHALL draw no mark and SHALL ignore targetLabel.
MNU-56	WHILE a link item's disabled is true THE menu SHALL NOT make it a link that can be followed: it SHALL render it as MNU-13 says, the mark of MNU-55 with it, SHALL expose it as MNU-53 exposes a link item, with the disabled state and no destination, SHALL keep it reachable by the arrow keys as MNU-7 keeps any disabled item, SHALL NOT emit its click or close for it, and SHALL open nothing by any means the platform gives a link (on the web the anchor carries no href, so there is no context menu entry, no drag and no new tab for it).
MNU-57	THE menu SHALL give a destination to the item kind alone. A checkbox item and a radio item hold a state and a submenu item opens another level, so none of them has href, target or targetLabel: a control that holds a state, or a second action, is not a destination; WHERE a platform lets one be written on them (an attribute of the web's element, a field of React Native's item object) THE menu SHALL ignore it, keep the item what it is, and in debug builds report it. WHEN a link item's target names a value the menu does not define THE menu SHALL treat it as same, and in debug builds report the unknown value. IF an item's href is only white space, or names a script to run rather than a place to go (the web's javascript: scheme), or cannot be read as an address by the platform, THE menu SHALL make the item an action without a destination, and in the last two cases report it in debug builds, as BTN-26 says for a button. WHILE an item's href is empty THE menu SHALL ignore its target and targetLabel.
MNU-58	WHILE a link item's current is true THE menu SHALL expose it as the current item of its set (on the web aria-current with the value page, on the item's link; on a platform without that state, the selected state) and SHALL draw its row from the current condition: a fill as MNU-37 lays one, in comp.menu.current.container.color at rest, and that condition's colors for its label, supporting text, trailing text and icons, its icons in the selected family and fill, in every state and in every contrast scheme; it SHALL draw no mark in the mark column, keep its label's own weight, and SHALL keep it a link item in every other respect (MNU-53 to MNU-56). The current destination is where the person is, not a choice the menu holds: it carries no check, and it is told from its neighbours by the fill the menu draws for the row the person is on, as a navigation drawer marks its current destination, while assistive technology is told by the state. Its fill is its own and not a checked row's: a checked row has its mark and may go without a fill (MNU-37), the current row has only its fill, so a design system that withholds the one keeps the other. WHERE the platform draws with a person's own forced colors, which remove the fill, THE menu SHALL draw a line of sys.border.thick inside the current item's row in the platform's link color. THE menu SHALL NOT set current itself on any activation: where the product is, is the product's to say. WHILE an item's href is empty THE menu SHALL ignore its current and in debug builds report it.
MNU-59	THE menu SHALL decide the mark column and the leading icon column for each section of a surface — a group, with the items of a group inside it (MNU-29), or a run of adjacent items outside any group: the parts MNU-36 draws as tiles — and each of the two columns by itself. WHILE iconSpace is auto a row SHALL keep a column, empty where it draws nothing in it, WHERE an item of its section draws in it — a checkbox or radio item its mark, whether checked or not and whatever the mark is (MNU-38), an item its leading icon — so that the labels of a section start on one line, and a section where no item draws in a column SHALL keep no room for it, its labels starting that much nearer the row's start; WHILE iconSpace is always every row SHALL keep both columns, whether or not any item of the surface draws in them; WHILE iconSpace is never a row SHALL have a column only where it draws in it itself. The room kept is the column's box (comp.menu.mark.size.regular for the mark, comp.menu.leading-icon.size.regular for the icon) and comp.menu.container.gap.regular after it, draws nothing and is nothing to assistive technology. A submenu item has no mark and so draws nothing in the mark column (MNU-42). Each surface SHALL be decided by itself, every submenu with the menu's iconSpace; a group's title SHALL keep its own place whatever the columns of its section are (MNU-28). WHEN an item is added or removed, or an item's kind or leadingIcon changes, THE menu SHALL decide the item's section again; WHEN iconSpace names a value the menu does not define THE menu SHALL treat it as auto and in debug builds report the unknown value.
MNU-60	WHILE trigger is context, WHEN the person asks for a context menu in the anchor's area — a secondary click (a right click, a Control-click, a two-finger click on a trackpad), the context-menu command of assistive technology, a press of a touch or a pen held within the platform's touch slop (8 points where the platform names none) for the platform's long-press duration (500 ms where the platform names none), or Shift+F10 or the ContextMenu key with no other modifier while focus is on the area or on an element inside it — THE menu SHALL emit contextRequest once, with the point in the viewport's coordinates (where the pointer is, where the press began, or the block-end, inline-start corner of the element that has focus), the element under the pointer or with focus, and how it was asked (pointer, long-press or keyboard), and SHALL NOT open itself: the product sets open to true (MNU-1). Unless the product cancels contextRequest, THE menu SHALL keep the platform's own context menu from answering the request, and after a long press SHALL keep the release of that press from activating what is under it; a cancelled request SHALL be left to the platform. A request that an element inside the area has already taken (on the web, a contextmenu event whose default is prevented) and one made inside the menu's own surfaces SHALL NOT be answered. WHILE trigger is anchor THE menu SHALL answer none of these. WHEN trigger names a value the menu does not define THE menu SHALL treat it as anchor and in debug builds report the unknown value.
MNU-61	WHILE trigger is context THE menu SHALL place its surface at the point of the last contextRequest, with no offset, as placement names it from the point (bottom-start: the surface's block-start, inline-start corner on the point; bottom-end: its block-start, inline-end corner; top-start and top-end: its block-end corners); WHERE the side below or above the point has less room than the surface needs within comp.menu.surface.viewport-margin of the edge of the visible part of the window, above the on-screen keyboard while one is shown, and the other side has more THE menu SHALL flip to the other side of the point, and WHERE the side before or after the point along the line has less room than the surface's width and the other has more SHALL flip along the line as well, each axis by itself, so that a surface asked for near a corner of the window opens away from that corner with a corner of its own on the point; it SHALL then shift to stay within that margin, limit its height as MNU-2 says and scroll its items beyond it, and keep the point where it is in the area while the area moves. FOR a request by the keyboard THE menu SHALL place the surface against the element that had focus as MNU-2 places it against an anchor, offset included. WHEN open becomes true with no request since the menu was last closed THE menu SHALL place the surface against the area as MNU-2 says. The surface SHALL grow from its edge that faces the point or the element (MNU-4).
MNU-62	WHILE trigger is context THE menu SHALL behave as every other menu does once it is open — the same items, focus on opening (MNU-1), keys, typeahead, submenus, activation and close reasons — and WHEN it closes SHALL return focus, where focus was inside it, to the element that had focus when the request was made (the element a keyboard request was made on), and leave focus where the platform puts it where no element had it; Tab and Shift+Tab SHALL move focus on from that element. A press anywhere outside the menu's surfaces, the area included, SHALL count as a press outside (MNU-5); a secondary click or a long press elsewhere while the menu is open SHALL therefore close it and, in the area, request it again at the new point.
MNU-63	WHILE trigger is context THE menu SHALL NOT expose on its area that it opens a menu, whether it is open or which element it is (no aria-haspopup, aria-expanded or aria-controls on the web), because the area is not a button: a context menu is found by the platform's own convention — a secondary click, a long press, Shift+F10, the ContextMenu key, the context-menu command of assistive technology. THE menu SHALL NOT be named by its area; it SHALL take the name the product gives it (aria-label on the web), and have none where the product gives none, as the platform's own context menus have none.
MNU-64	THE menu SHALL draw the rows of every surface at its density. WHILE density is regular each row SHALL take the regular value of every token of the density axis this spec names (comp.menu.container.height.regular, comp.menu.container.padding-block.regular, comp.menu.container.padding-inline.regular, comp.menu.container.gap.regular, comp.menu.leading-icon.size.regular, comp.menu.trailing-icon.size.regular, comp.menu.mark.size.regular, comp.menu.group-title.padding-inline.regular); WHILE density is compact it SHALL take the compact value of each in its place (comp.menu.container.height.compact, comp.menu.container.padding-block.compact, comp.menu.container.padding-inline.compact, comp.menu.container.gap.compact, comp.menu.leading-icon.size.compact, comp.menu.trailing-icon.size.compact, comp.menu.mark.size.compact, comp.menu.group-title.padding-inline.compact), so that a compact row is lower, set in less from its edges and draws smaller glyphs, the room a row keeps for an empty column (MNU-59) shrinking with them. The text styles, the surface and its paddings, the dividers, the group gap and the control of a checkbox or radio item SHALL be the same in both. Every submenu SHALL take the menu's density. WHEN density names a value the active design system does not have THE menu SHALL draw the default density's rows and in debug builds report the unknown value; a density a design system added SHALL be drawn from that density's tokens, as the core values are. WHEN density changes while the menu is open THE menu SHALL draw the new rows at once, without a motion, keeping focus where it is.
MNU-65	WHEN the element the open menu is placed against — the anchor; for a context menu its area, or the element a keyboard request was made on (MNU-61) — is no longer drawn: taken out of the page, given no box (on the web display none on it or on an ancestor), made invisible (visibility hidden) or skipped by its platform's content visibility (on the web content-visibility hidden, or auto while it is off screen), THE menu SHALL emit close once with the reason anchor-hidden and be closed as MNU-5 says, every open submenu with it (MNU-49), and SHALL NOT place its surface against that element while it is not drawn, because a surface with nothing beside it no longer says what it belongs to. WHEN it closes with focus inside it THE menu SHALL return focus as MNU-49 says and, where that element cannot take focus, SHALL NOT keep focus inside its closed surfaces. WHEN the element is drawn again while the menu is still open THE menu SHALL follow it again, and emit close again the next time it is no longer drawn.
MNU-66	WHERE the platform has ARIA attributes (the web), WHILE an item is a link item its role is carried by its anchor (MNU-53), and WHEN the product sets an aria- attribute on its host, by the attribute or by the ARIA property that reflects it, THE menu SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on that anchor — an id reference by the elements it names in the host's tree or a tree around it, a description after its own — except those the item owns (aria-disabled, aria-current, aria-keyshortcuts), which it SHALL move, not expose and report in debug builds; its label is its name over a name given so, and while label is empty a name given so is its name. WHEN the item stops being a link item THE menu SHALL give back to its host what it moved, as it was written, and WHEN it becomes one SHALL move what the host carries. WHEN the product removes one, or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE menu SHALL take it off the anchor.
MNU-67	WHERE the platform has ARIA attributes (the web), the hosts of the menu, of an item that is not a link item (a checkbox item, a radio item and a submenu item included) and of a group carry their roles themselves (MNU-24), so what the product writes on them is not moved, but for a name: WHILE an item's or a group's label, or the anchor that names a menu, is not empty THE menu SHALL hold the product's aria-label and aria-labelledby on that host as their data-aria- twins, so that its own is the whole name although the platform gives aria-labelledby the precedence, and WHEN it is emptied SHALL give them back as they were written; WHILE it is empty a name the product gives so is the name and an item SHALL NOT be reported as having none in debug builds (MNU-26) — a context menu is named so (MNU-63). WHILE a menu is closed, or a group is in a group (MNU-29), it exposes nothing, and THE menu SHALL hold them as well, giving them back when it is exposed again. WHEN the product removes one, or its data-aria- twin, or sets the ARIA property that reflects it to null, THE menu SHALL take it away.
MNU-68	WHEN a surface of the menu is shown — the menu's own as it opens, a submenu's as its item opens it — THE menu SHALL show that surface's list from its start: a list taller than the surface (MNU-2, MNU-46) SHALL open scrolled to its top, so that its first row, its first group's title included, is in view, and WHERE the item that takes focus (MNU-1, MNU-43, or the last enabled item a menubar opens its menu on, MBR-9) is not whole in view there, scrolled just far enough to bring that item whole into view and no further. WHEN focus moves to an item by a key or by the menu's own doing (MNU-7, MNU-48) THE menu SHALL scroll the list that holds it just far enough to bring the item whole into view, and not at all where it is whole in view already — the first item of the list together with the list's start, the last together with its end, and the first item of a titled group together with that title (MNU-28); focus that follows the pointer (MNU-8) SHALL scroll nothing. Whether the item is in view SHALL be judged as the surface stands at rest: while its opening motion runs (MNU-4) the list SHALL keep its scroll position until the surface stands at rest, and then bring the item that has focus into view as this sentence says, so that no frame of the motion moves the list.
MNU-69	THE menu SHALL break the lines of an item's label, supporting text and trailing text and of a group's title by the rules of the text's language: a line of Japanese or Chinese SHALL neither begin with closing punctuation, a small kana, the prolonged sound mark (ー) or an iteration mark nor end with opening punctuation (the strict rules of line breaking that JIS X 4051 and the W3C's requirements for Japanese text layout set out), whether or not the product marks the text's language; and WHERE the platform finds the phrases of Japanese text (on the web, word-break: auto-phrase, which reads the language the product marks), a line of Japanese SHALL break between two phrases rather than inside one. A phrase or a word longer than its line SHALL still break rather than overflow (MNU-20).

प्लैटफ़ॉर्म के अनुसार नामों का मिलान

पैरिटी का मतलब एक जैसे API नहीं है। हर प्लैटफ़ॉर्म एक ही कॉन्ट्रैक्ट को अपने तरीक़े से व्यक्त करता है।

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
कंपोनेंट	tanrei-menu	TanreiMenu	TanreiMenu	TanreiMenuAnchor	Menu
open · प्रॉपर्टी	open	isPresented	expanded	controller	visible
placement · प्रॉपर्टी	placement	placement	placement	placement	placement
trigger · प्रॉपर्टी	trigger	trigger	trigger	trigger	trigger
separation · प्रॉपर्टी	separation	separation	separation	separation	separation
iconSpace · प्रॉपर्टी	iconSpace	iconSpace	iconSpace	iconSpace	iconSpace
density · प्रॉपर्टी	density	density	density	density	density
close · इवेंट	close	isPresented	onDismissRequest	onClose	onDismiss
contextRequest · इवेंट	contextrequest	onContextRequest	onContextRequest	onContextRequest	onContextRequest
टिप्पणियाँ	tanrei-menu (open, placement, separation, and anchor: the id of the anchor element, as the HTML anchor attribute) holds tanrei-menu-item, tanrei-menu-checkbox-item, tanrei-menu-radio-item, tanrei-submenu and tanrei-menu-group children; item attributes are kebab-case (supporting-text, leading-icon, trailing-icon, trailing-text, mark-icon). click, change and toggle fire on the item or group and bubble, so one listener on the menu can take them all. The surface is a manual popover in the top layer, placed with CSS anchor positioning and a script fallback where the browser has none; each submenu's surface is a popover of its own, placed against its tanrei-submenu the same way. The menu implements its own light dismiss so that it can emit close with a reason, and treats every surface of its tree as inside. A press outside also reaches the element under it. It sets aria-haspopup="menu", aria-controls and aria-expanded on the anchor element, and the same three on each submenu item's row. The inline attribute, for tests, draws the open surface in place, with each open submenu beside it (MNU-19). The mark is the mark part: the box or the ring of a control look, drawn by the menu's own styles from --tanrei-comp-menu-control-*, or the icon helper's glyph (MNU-22, MNU-38). The submenu indicator is the icon helper's chevron_right in the submenu-indicator part. A group's title is inset by --tanrei-comp-menu-group-title-padding-inline-regular from the rows' edges (MNU-28). The link item is not built on this platform yet: MNU-53 to MNU-57 and what MNU-6, MNU-19 and MNU-24 say of it, with the fixtures links, links-rtl and links-trailing. A link item's current writes aria-current="page" on its anchor and draws the row from the current condition (MNU-58). Under gap each group, and each run of items outside a group, is a .tile (part tile) of its own inside the scroll box; under divider the tiles are boxes with no look (MNU-36). trigger is the trigger attribute; with context, anchor names the area. contextRequest is contextrequest, a cancelable event whose detail is { x, y, element, input }: client coordinates, the element under the pointer or with focus, and pointer, long-press or keyboard. The menu listens on the area for contextmenu (a secondary click, Android's long press, the context-menu command of assistive technology) and cancels it unless the product cancels the request; for a touch or a pen held still, which WebKit on iOS answers with no contextmenu; and for Shift+F10 and the ContextMenu key on keydown, whose own contextmenu it then cancels. After a long press the release of that press, and its click, go no further. On iOS a long press may also select text: an area whose text is not to be selected says so in its own styles (user-select, -webkit-touch-callout).	A modifier on the anchor, .tanreiMenu(isPresented:placement:) { … }, as .popover, presented with presentationCompactAdaptation(.popover) so it stays a popover on iPhone; a press outside does not reach what is under it. The content builder takes the item views. disabled follows .disabled(_:). Closing writes false to isPresented, which is close. SwiftUI's own Menu is not used: its items cannot be tokenised. Ships the previous revision today (the check stroked as a path in a 16 box, a group's title starting where the labels start). Not built on this platform yet, among the rest of this spec: the submenu item kind and everything about it (MNU-42 to MNU-52), separation (MNU-35, MNU-36), the checkbox and radio looks of the mark and markIcon (MNU-38 to MNU-41) and their 17 fixtures; the selected fill and colors arrive through the tokens, the fill of a checked row with them: none at standard contrast in the default system, as MNU-37 says. Reading comp.menu.separation, comp.menu.checkbox-item.mark and comp.menu.radio-item.mark as typed choices needs this platform's token output to write a component's choice as a typed enumeration, which it does not yet. Nor is the link item: MNU-53 to MNU-57 and what MNU-6, MNU-19 and MNU-24 say of it, with the fixtures links, links-rtl and links-trailing. Lagging behind MNU-58 (a link item's current, drawn with the selected fill) and MNU-36 (the groups as separate tiles under gap): it has neither yet. Not built yet: iconSpace (MNU-59) — this platform still keeps the mark and leading icon columns in every row of a surface where any item draws in them. Not built yet: the context trigger (MNU-60 to MNU-63) — this platform opens the menu from an anchor only.	Compose idiom, as DropdownMenu: TanreiMenu(expanded, onDismissRequest, placement) { TanreiMenuItem(text, onClick, …); TanreiMenuGroup { … } } inside the anchor's Box, shown in a Popup; the item composables are called in its content lambda. The caller closes it, so close is onDismissRequest and it carries the reason; the caller also keeps each checkbox item's checked (state hoisting). A press outside does not reach what is under it. enabled is the inverse flag. Ships the previous revision today (the check stroked as a path in a 16 box, a group's title starting where the labels start). Not built on this platform yet, among the rest of this spec: the submenu item kind and everything about it (MNU-42 to MNU-52), separation (MNU-35, MNU-36), the checkbox and radio looks of the mark and markIcon (MNU-38 to MNU-41) and their 17 fixtures; the selected fill and colors arrive through the tokens, the fill of a checked row with them: none at standard contrast in the default system, as MNU-37 says. Reading comp.menu.separation, comp.menu.checkbox-item.mark and comp.menu.radio-item.mark as typed choices needs this platform's token output to write a component's choice as a typed enumeration, which it does not yet. Nor is the link item: MNU-53 to MNU-57 and what MNU-6, MNU-19 and MNU-24 say of it, with the fixtures links, links-rtl and links-trailing. Lagging behind MNU-58 (a link item's current, drawn with the selected fill) and MNU-36 (the groups as separate tiles under gap): it has neither yet. Not built yet: iconSpace (MNU-59) — this platform still keeps the mark and leading icon columns in every row of a surface where any item draws in them. Not built yet: the context trigger (MNU-60 to MNU-63) — this platform opens the menu from an anchor only.	Flutter idiom, as MenuAnchor: TanreiMenuAnchor(controller:, placement:, menuChildren: […], builder:) shown in the Overlay; the item widgets go in menuChildren. MenuController.open() and .close() are open, onClose is close. A press outside also reaches what is under it (consumeOutsideTap: false). Ships the previous revision today (the check stroked as a path in a 16 box, a group's title starting where the labels start). Not built on this platform yet, among the rest of this spec: the submenu item kind and everything about it (MNU-42 to MNU-52), separation (MNU-35, MNU-36), the checkbox and radio looks of the mark and markIcon (MNU-38 to MNU-41) and their 17 fixtures; the selected fill and colors arrive through the tokens, the fill of a checked row with them: none at standard contrast in the default system, as MNU-37 says. Reading comp.menu.separation, comp.menu.checkbox-item.mark and comp.menu.radio-item.mark as typed choices needs this platform's token output to write a component's choice as a typed enumeration, which it does not yet. Nor is the link item: MNU-53 to MNU-57 and what MNU-6, MNU-19 and MNU-24 say of it, with the fixtures links, links-rtl and links-trailing. Lagging behind MNU-58 (a link item's current, drawn with the selected fill) and MNU-36 (the groups as separate tiles under gap): it has neither yet. Not built yet: iconSpace (MNU-59) — this platform still keeps the mark and leading icon columns in every row of a surface where any item draws in them. Not built yet: the context trigger (MNU-60 to MNU-63) — this platform opens the menu from an anchor only.	<Menu visible anchorRef placement onDismiss items={[…]}>: items is an array whose element type is the union of the five kinds, told apart by a kind field ('item', 'checkbox-item', 'radio-item', 'submenu', 'group'). Presented on the overlay layer that TanreiProvider renders (not a Modal, which would make the rest of the screen unreachable) and placed by measuring the anchor (measureInWindow); Android's back button (BackHandler) is close. A press outside closes the menu and does not reach what is under it. Controlled: the caller sets visible to false from onDismiss and keeps each checkbox item's checked and each group's value. Ships the previous revision today (the check stroked as a path in a 16 box, a group's title starting where the labels start). Not built on this platform yet, among the rest of this spec: the submenu item kind and everything about it (MNU-42 to MNU-52), separation (MNU-35, MNU-36), the checkbox and radio looks of the mark and markIcon (MNU-38 to MNU-41) and their 17 fixtures; the selected fill and colors arrive through the tokens, the fill of a checked row with them: none at standard contrast in the default system, as MNU-37 says. Reading comp.menu.separation, comp.menu.checkbox-item.mark and comp.menu.radio-item.mark as typed choices needs this platform's token output to write a component's choice as a typed enumeration, which it does not yet. Nor is the link item: MNU-53 to MNU-57 and what MNU-6, MNU-19 and MNU-24 say of it, with the fixtures links, links-rtl and links-trailing. Lagging behind MNU-58 (a link item's current, drawn with the selected fill) and MNU-36 (the groups as separate tiles under gap): it has neither yet. Not built yet: iconSpace (MNU-59) — this platform still keeps the mark and leading icon columns in every row of a surface where any item draws in them. Not built yet: the context trigger (MNU-60 to MNU-63) — this platform opens the menu from an anchor only.

टोकन

टोकन	किसका एलियास	रिज़ॉल्व किया गया मान (लाइट)
--tanrei-comp-menu-checkbox-item-mark	—	0
--tanrei-comp-menu-container-gap-compact	comp.tree-view.container.gap.compact	8px
--tanrei-comp-menu-container-gap-regular	sys.space.space150	12px
--tanrei-comp-menu-container-height-compact	comp.tree-view.container.height.compact	32px
--tanrei-comp-menu-container-height-regular	—	48px
--tanrei-comp-menu-container-padding-block-compact	comp.tree-view.container.padding-block.compact	6px
--tanrei-comp-menu-container-padding-block-regular	—	8px
--tanrei-comp-menu-container-padding-inline-compact	comp.tree-view.container.padding-inline.compact	8px
--tanrei-comp-menu-container-padding-inline-regular	sys.space.space150	12px
--tanrei-comp-menu-container-shape	—	4px
--tanrei-comp-menu-control-box-shape	—	2px
--tanrei-comp-menu-control-box-size	—	18px
--tanrei-comp-menu-control-fill-inset	—	0px
--tanrei-comp-menu-control-fill-opacity	sys.state.selected-state-layer-opacity	0.16
--tanrei-comp-menu-control-mark-size	sys.icon.small	20px
--tanrei-comp-menu-control-mark-weight	sys.icon.mark.weight	500
--tanrei-comp-menu-control-outline-width	sys.border.thick	2px
--tanrei-comp-menu-control-ring-selected-width-share	—	0.5
--tanrei-comp-menu-control-ring-size	—	20px
--tanrei-comp-menu-control-ring-width	sys.border.thick	2px
--tanrei-comp-menu-current-container-color	sys.color.secondary-container	#262626 · 16%
--tanrei-comp-menu-current-control-mark-color	—	#000000 · 0%
--tanrei-comp-menu-current-control-color	—	#000000 · 0%
--tanrei-comp-menu-current-disabled-container-color	—	#1b1b1b · 12%
--tanrei-comp-menu-current-disabled-control-mark-color	—	#1b1b1b · 38%
--tanrei-comp-menu-current-disabled-control-color	—	#1b1b1b · 38%
--tanrei-comp-menu-current-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-menu-current-disabled-leading-icon-color	—	#1b1b1b · 38%
--tanrei-comp-menu-current-disabled-mark-color	—	#1b1b1b · 38%
--tanrei-comp-menu-current-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-menu-current-disabled-supporting-text-color	—	#1b1b1b · 38%
--tanrei-comp-menu-current-disabled-trailing-icon-color	—	#1b1b1b · 38%
--tanrei-comp-menu-current-disabled-trailing-text-color	—	#1b1b1b · 38%
--tanrei-comp-menu-current-focused-container-color	—	#262626 · 24.4%
--tanrei-comp-menu-current-focused-control-mark-color	—	#000000 · 0%
--tanrei-comp-menu-current-focused-control-color	—	#000000 · 0%
--tanrei-comp-menu-current-focused-label-color	—	#262626
--tanrei-comp-menu-current-focused-leading-icon-color	—	#262626
--tanrei-comp-menu-current-focused-mark-color	—	#000000 · 0%
--tanrei-comp-menu-current-focused-state-layer-color	—	#262626
--tanrei-comp-menu-current-focused-supporting-text-color	—	#262626
--tanrei-comp-menu-current-focused-trailing-icon-color	—	#262626
--tanrei-comp-menu-current-focused-trailing-text-color	—	#262626
--tanrei-comp-menu-current-hovered-container-color	—	#262626 · 22.7%
--tanrei-comp-menu-current-hovered-control-mark-color	—	#000000 · 0%
--tanrei-comp-menu-current-hovered-control-color	—	#000000 · 0%
--tanrei-comp-menu-current-hovered-label-color	—	#262626
--tanrei-comp-menu-current-hovered-leading-icon-color	—	#262626
--tanrei-comp-menu-current-hovered-mark-color	—	#000000 · 0%
--tanrei-comp-menu-current-hovered-state-layer-color	—	#262626
--tanrei-comp-menu-current-hovered-supporting-text-color	—	#262626
--tanrei-comp-menu-current-hovered-trailing-icon-color	—	#262626
--tanrei-comp-menu-current-hovered-trailing-text-color	—	#262626
--tanrei-comp-menu-current-label-color	sys.color.on-secondary-container	#262626
--tanrei-comp-menu-current-leading-icon-color	sys.color.on-secondary-container	#262626
--tanrei-comp-menu-current-mark-color	—	#000000 · 0%
--tanrei-comp-menu-current-pressed-container-color	—	#262626 · 24.4%
--tanrei-comp-menu-current-pressed-control-mark-color	—	#000000 · 0%
--tanrei-comp-menu-current-pressed-control-color	—	#000000 · 0%
--tanrei-comp-menu-current-pressed-label-color	—	#262626
--tanrei-comp-menu-current-pressed-leading-icon-color	—	#262626
--tanrei-comp-menu-current-pressed-mark-color	—	#000000 · 0%
--tanrei-comp-menu-current-pressed-state-layer-color	—	#262626
--tanrei-comp-menu-current-pressed-supporting-text-color	—	#262626
--tanrei-comp-menu-current-pressed-trailing-icon-color	—	#262626
--tanrei-comp-menu-current-pressed-trailing-text-color	—	#262626
--tanrei-comp-menu-current-state-layer-color	comp.menu.current.label.color	#262626
--tanrei-comp-menu-current-supporting-text-color	sys.color.on-secondary-container	#262626
--tanrei-comp-menu-current-trailing-icon-color	sys.color.on-secondary-container	#262626
--tanrei-comp-menu-current-trailing-text-color	sys.color.on-secondary-container	#262626
--tanrei-comp-menu-destructive-container-color	—	#000000 · 0%
--tanrei-comp-menu-destructive-control-mark-color	—	#000000 · 0%
--tanrei-comp-menu-destructive-control-color	—	#000000 · 0%
--tanrei-comp-menu-destructive-disabled-container-color	—	#000000 · 0%
--tanrei-comp-menu-destructive-disabled-control-mark-color	—	#1b1b1b · 38%
--tanrei-comp-menu-destructive-disabled-control-color	—	#1b1b1b · 38%
--tanrei-comp-menu-destructive-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-menu-destructive-disabled-leading-icon-color	—	#1b1b1b · 38%
--tanrei-comp-menu-destructive-disabled-mark-color	—	#000000 · 0%
--tanrei-comp-menu-destructive-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-menu-destructive-disabled-supporting-text-color	—	#1b1b1b · 38%
--tanrei-comp-menu-destructive-disabled-trailing-icon-color	—	#1b1b1b · 38%
--tanrei-comp-menu-destructive-disabled-trailing-text-color	—	#1b1b1b · 38%
--tanrei-comp-menu-destructive-focused-container-color	—	#cd262f · 10%
--tanrei-comp-menu-destructive-focused-control-mark-color	—	#000000 · 0%
--tanrei-comp-menu-destructive-focused-control-color	—	#000000 · 0%
--tanrei-comp-menu-destructive-focused-label-color	—	#cd262f
--tanrei-comp-menu-destructive-focused-leading-icon-color	—	#cd262f
--tanrei-comp-menu-destructive-focused-mark-color	—	#000000 · 0%
--tanrei-comp-menu-destructive-focused-state-layer-color	—	#cd262f
--tanrei-comp-menu-destructive-focused-supporting-text-color	—	#4b4b4b
--tanrei-comp-menu-destructive-focused-trailing-icon-color	—	#4b4b4b
--tanrei-comp-menu-destructive-focused-trailing-text-color	—	#4b4b4b
--tanrei-comp-menu-destructive-hovered-container-color	—	#cd262f · 8%
--tanrei-comp-menu-destructive-hovered-control-mark-color	—	#000000 · 0%
--tanrei-comp-menu-destructive-hovered-control-color	—	#000000 · 0%
--tanrei-comp-menu-destructive-hovered-label-color	—	#cd262f
--tanrei-comp-menu-destructive-hovered-leading-icon-color	—	#cd262f
--tanrei-comp-menu-destructive-hovered-mark-color	—	#000000 · 0%
--tanrei-comp-menu-destructive-hovered-state-layer-color	—	#cd262f
--tanrei-comp-menu-destructive-hovered-supporting-text-color	—	#4b4b4b
--tanrei-comp-menu-destructive-hovered-trailing-icon-color	—	#4b4b4b
--tanrei-comp-menu-destructive-hovered-trailing-text-color	—	#4b4b4b
--tanrei-comp-menu-destructive-label-color	sys.color.error	#cd262f
--tanrei-comp-menu-destructive-leading-icon-color	sys.color.error	#cd262f
--tanrei-comp-menu-destructive-mark-color	—	#000000 · 0%
--tanrei-comp-menu-destructive-pressed-container-color	—	#cd262f · 10%
--tanrei-comp-menu-destructive-pressed-control-mark-color	—	#000000 · 0%
--tanrei-comp-menu-destructive-pressed-control-color	—	#000000 · 0%
--tanrei-comp-menu-destructive-pressed-label-color	—	#cd262f
--tanrei-comp-menu-destructive-pressed-leading-icon-color	—	#cd262f
--tanrei-comp-menu-destructive-pressed-mark-color	—	#000000 · 0%
--tanrei-comp-menu-destructive-pressed-state-layer-color	—	#cd262f
--tanrei-comp-menu-destructive-pressed-supporting-text-color	—	#4b4b4b
--tanrei-comp-menu-destructive-pressed-trailing-icon-color	—	#4b4b4b
--tanrei-comp-menu-destructive-pressed-trailing-text-color	—	#4b4b4b
--tanrei-comp-menu-destructive-state-layer-color	comp.menu.destructive.label.color	#cd262f
--tanrei-comp-menu-destructive-supporting-text-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-menu-destructive-trailing-icon-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-menu-destructive-trailing-text-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-menu-disabled-container-shape	—	4px
--tanrei-comp-menu-disabled-opacity	—	1
--tanrei-comp-menu-divider-color	sys.color.outline-variant	#000000 · 8%
--tanrei-comp-menu-divider-space	sys.space.space50	4px
--tanrei-comp-menu-divider-thickness	sys.border.hairline	1px
--tanrei-comp-menu-expanded-container-color	sys.color.surface-container-high	#1b1b1b · 8%
--tanrei-comp-menu-expanded-control-mark-color	—	#000000 · 0%
--tanrei-comp-menu-expanded-control-color	—	#000000 · 0%
--tanrei-comp-menu-expanded-disabled-container-color	—	#1b1b1b · 8%
--tanrei-comp-menu-expanded-disabled-control-mark-color	—	#1b1b1b · 38%
--tanrei-comp-menu-expanded-disabled-control-color	—	#1b1b1b · 38%
--tanrei-comp-menu-expanded-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-menu-expanded-disabled-leading-icon-color	—	#1b1b1b · 38%
--tanrei-comp-menu-expanded-disabled-mark-color	—	#1b1b1b · 38%
--tanrei-comp-menu-expanded-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-menu-expanded-disabled-supporting-text-color	—	#1b1b1b · 38%
--tanrei-comp-menu-expanded-disabled-trailing-icon-color	—	#1b1b1b · 38%
--tanrei-comp-menu-expanded-disabled-trailing-text-color	—	#1b1b1b · 38%
--tanrei-comp-menu-expanded-focused-container-color	—	#1b1b1b · 10%
--tanrei-comp-menu-expanded-focused-control-mark-color	—	#000000 · 0%
--tanrei-comp-menu-expanded-focused-control-color	—	#000000 · 0%
--tanrei-comp-menu-expanded-focused-label-color	—	#1b1b1b
--tanrei-comp-menu-expanded-focused-leading-icon-color	—	#4b4b4b
--tanrei-comp-menu-expanded-focused-mark-color	—	#000000 · 0%
--tanrei-comp-menu-expanded-focused-state-layer-color	—	#1b1b1b
--tanrei-comp-menu-expanded-focused-supporting-text-color	—	#4b4b4b
--tanrei-comp-menu-expanded-focused-trailing-icon-color	—	#4b4b4b
--tanrei-comp-menu-expanded-focused-trailing-text-color	—	#4b4b4b
--tanrei-comp-menu-expanded-hovered-container-color	—	#1b1b1b · 8%
--tanrei-comp-menu-expanded-hovered-control-mark-color	—	#000000 · 0%
--tanrei-comp-menu-expanded-hovered-control-color	—	#000000 · 0%
--tanrei-comp-menu-expanded-hovered-label-color	—	#1b1b1b
--tanrei-comp-menu-expanded-hovered-leading-icon-color	—	#4b4b4b
--tanrei-comp-menu-expanded-hovered-mark-color	—	#000000 · 0%
--tanrei-comp-menu-expanded-hovered-state-layer-color	—	#1b1b1b
--tanrei-comp-menu-expanded-hovered-supporting-text-color	—	#4b4b4b
--tanrei-comp-menu-expanded-hovered-trailing-icon-color	—	#4b4b4b
--tanrei-comp-menu-expanded-hovered-trailing-text-color	—	#4b4b4b
--tanrei-comp-menu-expanded-label-color	sys.color.on-surface	#1b1b1b
--tanrei-comp-menu-expanded-leading-icon-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-menu-expanded-mark-color	—	#000000 · 0%
--tanrei-comp-menu-expanded-pressed-container-color	—	#1b1b1b · 10%
--tanrei-comp-menu-expanded-pressed-control-mark-color	—	#000000 · 0%
--tanrei-comp-menu-expanded-pressed-control-color	—	#000000 · 0%
--tanrei-comp-menu-expanded-pressed-label-color	—	#1b1b1b
--tanrei-comp-menu-expanded-pressed-leading-icon-color	—	#4b4b4b
--tanrei-comp-menu-expanded-pressed-mark-color	—	#000000 · 0%
--tanrei-comp-menu-expanded-pressed-state-layer-color	—	#1b1b1b
--tanrei-comp-menu-expanded-pressed-supporting-text-color	—	#4b4b4b
--tanrei-comp-menu-expanded-pressed-trailing-icon-color	—	#4b4b4b
--tanrei-comp-menu-expanded-pressed-trailing-text-color	—	#4b4b4b
--tanrei-comp-menu-expanded-state-layer-color	comp.menu.expanded.label.color	#1b1b1b
--tanrei-comp-menu-expanded-supporting-text-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-menu-expanded-trailing-icon-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-menu-expanded-trailing-text-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-menu-focused-container-shape	—	4px
--tanrei-comp-menu-focused-opacity	—	1
--tanrei-comp-menu-group-title-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-menu-group-title-padding-inline-compact	comp.menu.container.padding-inline.compact	8px
--tanrei-comp-menu-group-title-padding-inline-regular	comp.menu.container.padding-inline.regular	12px
--tanrei-comp-menu-group-gap	sys.space.space200	16px
--tanrei-comp-menu-hovered-container-shape	—	4px
--tanrei-comp-menu-hovered-opacity	—	1
--tanrei-comp-menu-leading-icon-size-compact	sys.icon.small	20px
--tanrei-comp-menu-leading-icon-size-regular	sys.icon.medium	24px
--tanrei-comp-menu-mark-size-compact	sys.icon.small	20px
--tanrei-comp-menu-mark-size-regular	sys.icon.medium	24px
--tanrei-comp-menu-mark-width	sys.border.thick	2px
--tanrei-comp-menu-motion-close-duration	sys.motion.role.appear.anchored.exit	250ms
--tanrei-comp-menu-motion-close-easing	sys.motion.easing.exit	cubic-bezier(0.3, 0, 1, 1)
--tanrei-comp-menu-motion-feedback-duration	sys.motion.role.feedback	450ms
--tanrei-comp-menu-motion-open-duration	sys.motion.role.appear.anchored.enter	300ms
--tanrei-comp-menu-motion-open-easing	sys.motion.easing.enter	cubic-bezier(0.2, 0, 0, 1)
--tanrei-comp-menu-motion-state-duration	sys.motion.role.state.large	250ms
--tanrei-comp-menu-motion-state-easing	sys.motion.easing.state	cubic-bezier(0.2, 0, 0, 1)
--tanrei-comp-menu-motion-submenu-delay	sys.motion.duration.short4	200ms
--tanrei-comp-menu-pressed-container-shape	—	4px
--tanrei-comp-menu-pressed-opacity	—	1
--tanrei-comp-menu-radio-item-mark	—	0
--tanrei-comp-menu-selected-container-color	sys.color.secondary-container	#262626 · 0%
--tanrei-comp-menu-selected-control-mark-color	sys.color.on-primary	#ffffff
--tanrei-comp-menu-selected-control-color	sys.color.primary	#1b1b1b
--tanrei-comp-menu-selected-disabled-container-color	—	#1b1b1b · 0%
--tanrei-comp-menu-selected-disabled-control-mark-color	—	#ffffff
--tanrei-comp-menu-selected-disabled-control-color	—	#1b1b1b · 38%
--tanrei-comp-menu-selected-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-menu-selected-disabled-leading-icon-color	—	#1b1b1b · 38%
--tanrei-comp-menu-selected-disabled-mark-color	—	#1b1b1b · 38%
--tanrei-comp-menu-selected-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-menu-selected-disabled-supporting-text-color	—	#1b1b1b · 38%
--tanrei-comp-menu-selected-disabled-trailing-icon-color	—	#1b1b1b · 38%
--tanrei-comp-menu-selected-disabled-trailing-text-color	—	#1b1b1b · 38%
--tanrei-comp-menu-selected-focused-container-color	—	#262626 · 10%
--tanrei-comp-menu-selected-focused-control-mark-color	—	#ffffff
--tanrei-comp-menu-selected-focused-control-color	—	#1b1b1b
--tanrei-comp-menu-selected-focused-label-color	—	#262626
--tanrei-comp-menu-selected-focused-leading-icon-color	—	#262626
--tanrei-comp-menu-selected-focused-mark-color	—	#1b1b1b
--tanrei-comp-menu-selected-focused-state-layer-color	—	#262626
--tanrei-comp-menu-selected-focused-supporting-text-color	—	#262626
--tanrei-comp-menu-selected-focused-trailing-icon-color	—	#262626
--tanrei-comp-menu-selected-focused-trailing-text-color	—	#262626
--tanrei-comp-menu-selected-hovered-container-color	—	#262626 · 8%
--tanrei-comp-menu-selected-hovered-control-mark-color	—	#ffffff
--tanrei-comp-menu-selected-hovered-control-color	—	#1b1b1b
--tanrei-comp-menu-selected-hovered-label-color	—	#262626
--tanrei-comp-menu-selected-hovered-leading-icon-color	—	#262626
--tanrei-comp-menu-selected-hovered-mark-color	—	#1b1b1b
--tanrei-comp-menu-selected-hovered-state-layer-color	—	#262626
--tanrei-comp-menu-selected-hovered-supporting-text-color	—	#262626
--tanrei-comp-menu-selected-hovered-trailing-icon-color	—	#262626
--tanrei-comp-menu-selected-hovered-trailing-text-color	—	#262626
--tanrei-comp-menu-selected-label-color	sys.color.on-secondary-container	#262626
--tanrei-comp-menu-selected-leading-icon-color	sys.color.on-secondary-container	#262626
--tanrei-comp-menu-selected-mark-color	sys.color.primary	#1b1b1b
--tanrei-comp-menu-selected-pressed-container-color	—	#262626 · 10%
--tanrei-comp-menu-selected-pressed-control-mark-color	—	#ffffff
--tanrei-comp-menu-selected-pressed-control-color	—	#1b1b1b
--tanrei-comp-menu-selected-pressed-label-color	—	#262626
--tanrei-comp-menu-selected-pressed-leading-icon-color	—	#262626
--tanrei-comp-menu-selected-pressed-mark-color	—	#1b1b1b
--tanrei-comp-menu-selected-pressed-state-layer-color	—	#262626
--tanrei-comp-menu-selected-pressed-supporting-text-color	—	#262626
--tanrei-comp-menu-selected-pressed-trailing-icon-color	—	#262626
--tanrei-comp-menu-selected-pressed-trailing-text-color	—	#262626
--tanrei-comp-menu-selected-state-layer-color	comp.menu.selected.label.color	#262626
--tanrei-comp-menu-selected-supporting-text-color	sys.color.on-secondary-container	#262626
--tanrei-comp-menu-selected-trailing-icon-color	sys.color.on-secondary-container	#262626
--tanrei-comp-menu-selected-trailing-text-color	sys.color.on-secondary-container	#262626
--tanrei-comp-menu-separation	sys.behavior.separation	0
--tanrei-comp-menu-shortcut-variant	—	0
--tanrei-comp-menu-submenu-offset	sys.space.space50	4px
--tanrei-comp-menu-surface-color	sys.color.surface-bright	#ffffff
--tanrei-comp-menu-surface-elevation	sys.elevation.level2	0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(0 0 0 / 0.04)
--tanrei-comp-menu-surface-max-width	—	320px
--tanrei-comp-menu-surface-min-width	—	160px
--tanrei-comp-menu-surface-offset	sys.space.space50	4px
--tanrei-comp-menu-surface-padding-block	sys.space.space50	4px
--tanrei-comp-menu-surface-padding-inline	sys.space.space50	4px
--tanrei-comp-menu-surface-shape	sys.shape.corner.medium	8px
--tanrei-comp-menu-surface-viewport-margin	sys.space.space100	8px
--tanrei-comp-menu-trailing-icon-size-compact	sys.icon.small	20px
--tanrei-comp-menu-trailing-icon-size-regular	sys.icon.medium	24px
--tanrei-comp-menu-unselected-container-color	—	#000000 · 0%
--tanrei-comp-menu-unselected-control-mark-color	—	#000000 · 0%
--tanrei-comp-menu-unselected-control-color	sys.color.outline	#848484
--tanrei-comp-menu-unselected-disabled-container-color	—	#000000 · 0%
--tanrei-comp-menu-unselected-disabled-control-mark-color	—	#1b1b1b · 38%
--tanrei-comp-menu-unselected-disabled-control-color	—	#1b1b1b · 38%
--tanrei-comp-menu-unselected-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-menu-unselected-disabled-leading-icon-color	—	#1b1b1b · 38%
--tanrei-comp-menu-unselected-disabled-mark-color	—	#000000 · 0%
--tanrei-comp-menu-unselected-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-menu-unselected-disabled-supporting-text-color	—	#1b1b1b · 38%
--tanrei-comp-menu-unselected-disabled-trailing-icon-color	—	#1b1b1b · 38%
--tanrei-comp-menu-unselected-disabled-trailing-text-color	—	#1b1b1b · 38%
--tanrei-comp-menu-unselected-focused-container-color	—	#1b1b1b · 10%
--tanrei-comp-menu-unselected-focused-control-mark-color	—	#000000 · 0%
--tanrei-comp-menu-unselected-focused-control-color	—	#848484
--tanrei-comp-menu-unselected-focused-label-color	—	#1b1b1b
--tanrei-comp-menu-unselected-focused-leading-icon-color	—	#4b4b4b
--tanrei-comp-menu-unselected-focused-mark-color	—	#000000 · 0%
--tanrei-comp-menu-unselected-focused-state-layer-color	—	#1b1b1b
--tanrei-comp-menu-unselected-focused-supporting-text-color	—	#4b4b4b
--tanrei-comp-menu-unselected-focused-trailing-icon-color	—	#4b4b4b
--tanrei-comp-menu-unselected-focused-trailing-text-color	—	#4b4b4b
--tanrei-comp-menu-unselected-hovered-container-color	—	#1b1b1b · 8%
--tanrei-comp-menu-unselected-hovered-control-mark-color	—	#000000 · 0%
--tanrei-comp-menu-unselected-hovered-control-color	—	#848484
--tanrei-comp-menu-unselected-hovered-label-color	—	#1b1b1b
--tanrei-comp-menu-unselected-hovered-leading-icon-color	—	#4b4b4b
--tanrei-comp-menu-unselected-hovered-mark-color	—	#000000 · 0%
--tanrei-comp-menu-unselected-hovered-state-layer-color	—	#1b1b1b
--tanrei-comp-menu-unselected-hovered-supporting-text-color	—	#4b4b4b
--tanrei-comp-menu-unselected-hovered-trailing-icon-color	—	#4b4b4b
--tanrei-comp-menu-unselected-hovered-trailing-text-color	—	#4b4b4b
--tanrei-comp-menu-unselected-label-color	sys.color.on-surface	#1b1b1b
--tanrei-comp-menu-unselected-leading-icon-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-menu-unselected-mark-color	—	#000000 · 0%
--tanrei-comp-menu-unselected-pressed-container-color	—	#1b1b1b · 10%
--tanrei-comp-menu-unselected-pressed-control-mark-color	—	#000000 · 0%
--tanrei-comp-menu-unselected-pressed-control-color	—	#848484
--tanrei-comp-menu-unselected-pressed-label-color	—	#1b1b1b
--tanrei-comp-menu-unselected-pressed-leading-icon-color	—	#4b4b4b
--tanrei-comp-menu-unselected-pressed-mark-color	—	#000000 · 0%
--tanrei-comp-menu-unselected-pressed-state-layer-color	—	#1b1b1b
--tanrei-comp-menu-unselected-pressed-supporting-text-color	—	#4b4b4b
--tanrei-comp-menu-unselected-pressed-trailing-icon-color	—	#4b4b4b
--tanrei-comp-menu-unselected-pressed-trailing-text-color	—	#4b4b4b
--tanrei-comp-menu-unselected-state-layer-color	comp.menu.unselected.label.color	#1b1b1b
--tanrei-comp-menu-unselected-supporting-text-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-menu-unselected-trailing-icon-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-menu-unselected-trailing-text-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-menu-group-title-typescale	sys.typescale.label-small	500 12px/1.3333
--tanrei-comp-menu-label-typescale	sys.typescale.label	500 14px/1.4286
--tanrei-comp-menu-supporting-text-typescale	sys.typescale.body-small	400 13px/1.5385
--tanrei-comp-menu-trailing-text-typescale	sys.typescale.label-small	500 12px/1.3333

फ़िक्स्चर

मानक रेंडरिंग। हर प्लैटफ़ॉर्म हर फ़िक्स्चर का स्नैपशॉट एक ही ID से लेता है, ताकि नतीजों की तुलना की जा सके।

density: regular (39)

actions

open: true items: 3 192 × 192 की विंडो में अलग से बनाया गया

icons-shortcut

open: true items: 3 193 × 192 की विंडो में अलग से बनाया गया

groups

open: true items: 2 192 × 249 की विंडो में अलग से बनाया गया

group-titles

open: true items: 2 192 × 361 की विंडो में अलग से बनाया गया

group-titles-icons

open: true items: 2 192 × 314 की विंडो में अलग से बनाया गया

supporting-text

open: true items: 2 288 × 155 की विंडो में अलग से बनाया गया

trailing-icon

open: true items: 2 253 × 145 की विंडो में अलग से बनाया गया

checkbox-checked

open: true items: 3 192 × 193 की विंडो में अलग से बनाया गया

checkbox-unchecked

open: true items: 2 192 × 145 की विंडो में अलग से बनाया गया

radio-checked

open: true items: 1 192 × 193 की विंडो में अलग से बनाया गया

destructive

open: true items: 2 192 × 145 की विंडो में अलग से बनाया गया

disabled

open: true items: 2 192 × 145 की विंडो में अलग से बनाया गया

checked-disabled

open: true items: 2 192 × 145 की विंडो में अलग से बनाया गया

destructive-disabled

open: true items: 2 192 × 145 की विंडो में अलग से बनाया गया

groups-divider

open: true separation: divider items: 2 192 × 250 की विंडो में अलग से बनाया गया

groups-gap

open: true separation: gap items: 2 192 × 265 की विंडो में अलग से बनाया गया

group-titles-gap

open: true separation: gap items: 2 192 × 377 की विंडो में अलग से बनाया गया

radio-none-checked

open: true items: 1 192 × 145 की विंडो में अलग से बनाया गया

radio-checked-disabled

open: true items: 1 192 × 145 की विंडो में अलग से बनाया गया

checkbox-check-mark

open: true items: 3 192 × 193 की विंडो में अलग से बनाया गया

radio-check-mark

open: true items: 1 192 × 193 की विंडो में अलग से बनाया गया

mark-icon-custom

open: true items: 3 192 × 193 की विंडो में अलग से बनाया गया

marks-icons-shortcut

open: true items: 2 257 × 314 की विंडो में अलग से बनाया गया

selected-supporting-text

open: true items: 1 343 × 165 की विंडो में अलग से बनाया गया

submenu

open: true items: 3 192 × 193 की विंडो में अलग से बनाया गया

submenu-open

open: true items: 3 480 × 345 की विंडो में अलग से बनाया गया

submenu-open-rtl

open: true direction: rtl items: 3 480 × 345 की विंडो में अलग से बनाया गया

submenu-two-levels

open: true items: 3 720 × 345 की विंडो में अलग से बनाया गया

submenu-icons-trailing-text

open: true items: 3 268 × 203 की विंडो में अलग से बनाया गया

submenu-disabled

open: true items: 3 192 × 193 की विंडो में अलग से बनाया गया

submenu-choices

open: true items: 2 480 × 297 की विंडो में अलग से बनाया गया

links

open: true items: 4 192 × 241 की विंडो में अलग से बनाया गया

links-current

open: true items: 3 192 × 193 की विंडो में अलग से बनाया गया

links-rtl

open: true direction: rtl items: 2 192 × 145 की विंडो में अलग से बनाया गया

links-trailing

open: true items: 4 263 × 241 की विंडो में अलग से बनाया गया

icon-space-auto

open: true items: 5 192 × 483 की विंडो में अलग से बनाया गया

icon-space-always

open: true iconSpace: always items: 5 215 × 483 की विंडो में अलग से बनाया गया

icon-space-never

open: true iconSpace: never items: 5 192 × 483 की विंडो में अलग से बनाया गया

japanese

open: true items: 2 327 × 206 की विंडो में अलग से बनाया गया

density: compact (1)

density-compact

open: true density: compact items: 5 201 × 287 की विंडो में अलग से बनाया गया

इससे जनरेट किया गया: specs/menu.spec.json, tokens/comp/menu.tokens.json, design/tokens/

दिशानिर्देश

link

कब इस्तेमाल करें

link

मेन्यू उन गौण क्रियाओं और सेटिंग के लिए इस्तेमाल करें जिन्हें स्क्रीन पर अपनी जगह की ज़रूरत नहीं है: किसी पंक्ति का “और”, टूलबार का ओवरफ़्लो, क्रम का चुनाव, किसी व्यू के विकल्प। लोग इसे खोलते हैं, एक चीज़ चुनते हैं और अपने काम पर लौट जाते हैं।

स्क्रीन की मुख्य क्रियाओं के लिए बटन इस्तेमाल करें, क्योंकि मेन्यू उन्हें छिपा देता है। जब चुनाव ही स्क्रीन का मुख्य काम हो, तो लिस्ट, रेडियो बटन या सिलेक्ट इस्तेमाल करें। जब लोगों को आगे बढ़ने से पहले जवाब देना ज़रूरी हो, तो डायलॉग इस्तेमाल करें। मेन्यू में सिर्फ़ उसके आइटम रहते हैं: कोई फ़ील्ड, स्लाइडर या स्विच नहीं, क्योंकि वे उन कुंजियों को ले लेते जिनकी मेन्यू को ज़रूरत है।

जो पंक्ति कहीं ले जाती है, वह एक लिंक आइटम है: आइटम को href दें। इसे जगहों के ऐसे छोटे सेट के लिए इस्तेमाल करें जो माँगे जाने तक रास्ते से हटा रहता है, जैसे ब्रेडक्रंब के ट्रेल के सिमटे हुए स्तर, भाषा का चुनाव या “और”। किसी साइट के मुख्य पेज, जो हमेशा नज़र में रहते हैं, नेविगेशन हैं: उन्हें नेविगेशन बार, नेविगेशन ड्रॉअर या लिंक की लिस्ट में रखें।

आइटम का प्रकार चुनना

link

प्रकार	यह क्या है	सक्रिय किए जाने के बाद	किसके लिए
आइटम	एक क्रिया, या href के साथ एक लिंक	अपना click एमिट करता है, फिर मेन्यू बंद हो जाता है। लिंक आइटम का गंतव्य उसके बाद खुलता है।	“कॉपी करें”, “नाम बदलें”, “शेयर करें”। “हटाएँ” या “छोड़ें” के लिए destructive सेट करें: वह त्रुटि के रंग में बनता है। जाने की किसी जगह के लिए उसे href दें।
चेकबॉक्स आइटम	वह विकल्प जो अपने आप में चालू या बंद है	अपना checked बदलता है और अपना change एमिट करता है।	“ग्रिड दिखाएँ”, “रूलर दिखाएँ”: वे सेटिंग जो एक-दूसरे पर असर नहीं डालतीं।
रेडियो आइटम	अपने ग्रुप के कई विकल्पों में से एक चुनाव	अपने ग्रुप का value सेट करता है और ग्रुप अपना change एमिट करता है। चेक किया हुआ रेडियो आइटम कुछ एमिट नहीं करता।	“नाम के अनुसार क्रमबद्ध करें”, “तारीख़ के अनुसार क्रमबद्ध करें”: एक सवाल का एक जवाब।
सबमेन्यू	वह आइटम जो अपने बग़ल में एक और स्तर खोलता है	अपना सबमेन्यू खोलता है और अपना toggle एमिट करता है। मेन्यू खुला रहता है।	“हाल की फ़ाइल खोलें”, “शेयर करें”, “यहाँ ले जाएँ”: आइटम का वह दूसरा सेट जो मेन्यू को बहुत लंबा कर देता।
ग्रुप	संबंधित आइटम का एक सिलसिला, चाहें तो शीर्षक के साथ	कुछ नहीं: वह फ़ोकस नहीं लेता।	संबंधित आइटम को अलग करना, और एक सवाल के रेडियो आइटम को साथ रखना।

टैप, क्लिक या Enter से सक्रिय किया गया चेकबॉक्स या रेडियो आइटम मेन्यू को बंद कर देता है, किसी क्रिया की तरह। Space से सक्रिय किए जाने पर वह मेन्यू को खुला छोड़ता है, ताकि कीबोर्ड इस्तेमाल करने वाला व्यक्ति एक ही बार में कई सेटिंग बदल सके।

ग्रुप, शीर्षक और अलगाव

link

• मेन्यू किसी ग्रुप को उसके बग़ल की चीज़ से अलग करता है, ऊपर या नीचे के सिरे पर कभी नहीं: डिवाइडर से, या गैप से। गैप के साथ हर ग्रुप, और ग्रुप के बाहर के आइटम की हर लगातार पंक्ति-शृंखला, अपनी अलग शीट है, और शीटों के बीच ख़ाली जगह रहती है। डिवाइडर या शीटें आप ख़ुद नहीं रखते।
• दोनों में से कौन-सा इस्तेमाल हो, यह डिज़ाइन सिस्टम चुनता है, और यह चुनाव हर उस कंपोनेंट के लिए एक ही है जो अपने भागों को अलग करता है: डिफ़ॉल्ट सिस्टम में डिवाइडर। separation एक मेन्यू और उसके सबमेन्यू के लिए तय करता है: auto (डिफ़ॉल्ट) डिज़ाइन सिस्टम के अनुसार चलता है, और divider या gap उनमें से एक का नाम लेता है, सिस्टम ने चाहे जो चुना हो। गैप के साथ कोई सेपरेटर नहीं दिया जाता, और ग्रुप फिर भी ग्रुप के रूप में दिए जाते हैं।
• title वाला ग्रुप उसे अपने आइटम के ऊपर एक हल्की हेडिंग के रूप में बनाता है, जो वहाँ से शुरू होती है जहाँ से पंक्तियों का कॉन्टेंट शुरू होता है, और ग्रुप का नाम उसी से आता है। रेडियो आइटम के ग्रुप को ऐसा शीर्षक दें जो सवाल पूछे, जैसे “क्रमबद्ध करें”।
• रेडियो आइटम ग्रुप में ही रहते हैं। ग्रुप के बाहर का रेडियो आइटम कभी चेक नहीं होता, और डीबग बिल्ड उसकी रिपोर्ट करते हैं।
• ग्रुप के भीतर दूसरा ग्रुप नहीं हो सकता। भीतरी ग्रुप के आइटम बाहरी ग्रुप के आइटम के रूप में बनते हैं।

निशान और आइकन के कॉलम

link

चेकबॉक्स या रेडियो आइटम का निशान पंक्ति की शुरुआत में निशान के कॉलम में होता है, और आरंभिक आइकन उसके बाद आइकन के कॉलम में। iconSpace तय करता है कि कौन-सी पंक्तियाँ उस कॉलम की जगह रखें जिसमें वे कुछ नहीं बनातीं:

• auto (डिफ़ॉल्ट) हर सेक्शन के लिए तय करता है: सेक्शन एक ग्रुप है, या किसी भी ग्रुप के बाहर लगातार आए आइटमों की एक कड़ी। जब तक उसके सेक्शन का कोई दूसरा आइटम किसी कॉलम में कुछ बनाता है, पंक्ति उस कॉलम की जगह रखती है, ताकि एक सेक्शन के लेबल एक ही रेखा से शुरू हों। जिस सेक्शन में न कोई निशान हो न कोई आइकन, वह अपने लेबल वहाँ से शुरू करता है जहाँ से पंक्ति की सामग्री शुरू होती है, उनसे पहले कोई ख़ाली जगह छोड़े बिना।
• always हर पंक्ति पर दोनों कॉलम रखता है, ताकि मेन्यू के सभी लेबल एक ही रेखा से शुरू हों।
• never कॉलम केवल उसी पंक्ति को देता है जो उसमें कुछ बनाती है, ताकि हर लेबल अपने ही निशान या आइकन के ठीक बाद शुरू हो।

हर सरफ़ेस अपने लिए ख़ुद तय करता है, और सबमेन्यू अपने मेन्यू के iconSpace के अनुसार चलता है। ग्रुप का शीर्षक वहाँ से शुरू होता है जहाँ से पंक्तियों की सामग्री शुरू होती है, उसकी पंक्तियाँ चाहे जो रखें। ट्री व्यू और नेविगेशन ड्रॉअर में भी यही iconSpace है, उन्हीं मानों और उसी डिफ़ॉल्ट के साथ।

सघनता

link

density तय करता है कि एक पंक्ति कितनी जगह लेती है। regular (डिफ़ॉल्ट: 48 की पंक्ति, 24 के ग्लिफ़) उस प्रोडक्ट के लिए है जिसे लोग छूकर भी और पॉइंटर से भी इस्तेमाल करते हैं। compact (32 की पंक्ति, 20 के ग्लिफ़, ट्री व्यू की कॉम्पैक्ट पंक्ति) माउस से इस्तेमाल होने वाले उस टूल के लिए है जिसके मेनू लंबे हैं और बार-बार खुलते हैं। दोनों में टेक्स्ट का आकार वही रहता है। छूने पर पंक्ति कभी टच टारगेट से नीची नहीं होती, इसलिए फ़ोन पर कॉम्पैक्ट मेनू की पंक्तियाँ भी 48 की रहती हैं। हर सबमेनू अपने मेनू की सघनता लेता है।

लिंक

link

लिंक आइटम प्लैटफ़ॉर्म का अपना लिंक है, इसलिए ब्राउज़र का कॉन्टेक्स्ट मेन्यू, नए टैब में खोलना और होवर पर दिखने वाला पता, सब काम करते हैं। उसका अपना कोई रूप नहीं है: वह हर स्टेट में अगली पंक्ति की क्रिया की तरह बनता है।

• सक्रिय करना। क्लिक, टैप, Enter या Space आइटम का click एमिट करती है, फिर मेन्यू बंद होता है, फिर गंतव्य खुलता है। Space लिंक आइटम को सक्रिय करती है, जैसे वह मेन्यू की हर दूसरी पंक्ति को सक्रिय करती है। बाक़ी जगह Space किसी लिंक को सक्रिय नहीं करती।
• राउटर। नेविगेशन अपने हाथ में लेने के लिए आइटम का click रद्द करें। मेन्यू फिर भी बंद होता है, और कुछ और नहीं खुलता।
• दूसरे टैब। मॉडिफ़ायर कुंजी के साथ क्लिक या Enter, और मिडिल क्लिक, ब्राउज़र के हैं। मेन्यू कोई close एमिट नहीं करता और खुला रहता है, ताकि उसके कई लिंक एक के बाद एक खोले जा सकें।
• नया संदर्भ। target: new एक नया टैब या विंडो खोलता है। आइटम अंतिम आइकन के कॉलम में आइकन सेट के open_in_new पर ख़त्म होता है, बशर्ते trailingIcon आपके अपने किसी ग्लिफ़ का नाम न ले, और targetLabel यह बात सहायक तकनीक को बताता है। शॉर्टकट या अंतिम टेक्स्ट निशान से पहले अपना कॉलम बनाए रखता है।
• वह पेज जिस पर आप हैं। current उस पेज के लिंक आइटम को चिह्नित करता है जिस पर व्यक्ति है। वह मौजूदा पेज के रूप में दिया जाता है (वेब पर aria-current="page") और हर कॉन्ट्रास्ट स्कीम में अपने ही फ़िल के साथ बनता है, बिना चेक के और बिना ज़्यादा भारी लेबल के: वह बताता है कि व्यक्ति कहाँ है, कोई ऐसा चुनाव नहीं जो उसने किया हो। इसे आप सेट करते हैं, मेन्यू कभी नहीं करता। href के बिना इसे अनदेखा किया जाता है।
• अक्षम। अक्षम लिंक आइटम किसी भी तरीक़े से खोला नहीं जा सकता। ऐरो कुंजियों से उस तक फिर भी पहुँचा जा सकता है, जैसे किसी भी अक्षम आइटम तक।
• सिर्फ़ आइटम वाला प्रकार। चेकबॉक्स आइटम, रेडियो आइटम और सबमेन्यू आइटम कोई गंतव्य नहीं लेते: वे कोई स्टेट रखते हैं या एक और स्तर खोलते हैं।

सबमेन्यू

link

सबमेन्यू आइटम वह पंक्ति है जो आइकन सेट के chevron_right पर ख़त्म होती है, और उसके चाइल्ड अगला स्तर हैं: किसी भी प्रकार के आइटम, ग्रुप समेत। वह कोई क्रिया नहीं है और उसका कोई शॉर्टकट नहीं होता।

• खुलना। दबाना, टैप, Enter, Space या पंक्ति के अंत की ओर वाली ऐरो कुंजी सबमेन्यू को तुरंत खोलती है और फ़ोकस को उसके पहले सक्षम आइटम पर ले जाती है। आइटम पर टिका हुआ पॉइंटर उसे थोड़ी देरी के बाद खोलता है और फ़ोकस को आइटम पर ही छोड़ता है।
• उस तक जाते हुए। जब पॉइंटर आइटम से उसके खुले सबमेन्यू की ओर बढ़ता है, तो रास्ते में पड़ने वाले आइटम न होवर होते हैं, न फ़ोकस लेते हैं, इसलिए तिरछा रास्ता सबमेन्यू को बंद नहीं करता।
• एक स्तर बंद करना। पंक्ति के शुरू की ओर वाली ऐरो कुंजी, या Escape, उस स्तर को बंद करती है जिसमें फ़ोकस है और फ़ोकस को उसके आइटम पर लौटाती है। Escape पूरे मेन्यू को तभी बंद करती है जब कोई सबमेन्यू खुला न हो। पैरेंट के किसी दूसरे आइटम पर जाना भी सबमेन्यू को बंद करता है। एक सरफ़ेस में ज़्यादा से ज़्यादा एक सबमेन्यू खुला रहता है।
• सब कुछ बंद करना। किसी भी स्तर की कोई क्रिया, Tab, हर सरफ़ेस के बाहर दबाना, और फ़ोकस का इन सबसे बाहर चले जाना, पूरे मेन्यू को एक ही close के साथ बंद करते हैं।
• यह कहाँ खुलता है। उस सरफ़ेस के बग़ल में जिसमें इसका आइटम है, अंत की ओर, और इसकी पहली पंक्ति आइटम की पंक्ति की सीध में; जहाँ उस ओर जगह नहीं है, वहाँ दूसरी ओर। जो विंडो दोनों के लिए बहुत सँकरी है, उसमें यह अपने पैरेंट के ऊपर रखा जाता है और पैरेंट की एक पट्टी खुली छोड़ता है: उस पट्टी पर दबाने से सबमेन्यू बंद हो जाता है। मेन्यू कभी अपने कॉन्टेंट की जगह सबमेन्यू का कॉन्टेंट नहीं रखता।
• open और toggle। सबमेन्यू आइटम का open उसका अपना है। जब व्यक्ति सबमेन्यू को खोलता या बंद करता है, तो मेन्यू उसे सेट करता है और आइटम toggle एमिट करता है। open में आपका अपना बदलाव, और पूरे मेन्यू का बंद होना, कोई toggle एमिट नहीं करते।
• गहराई। मेन्यू के नीचे सबमेन्यू के दो स्तरों तक ही रहें। तीसरा फिर भी दिखता है, और डीबग बिल्ड उसकी रिपोर्ट करते हैं, जैसे वे बिना आइटम वाले सबमेन्यू की रिपोर्ट करते हैं।
• ग्रुप का value सिर्फ़ अपनी ही सरफ़ेस के रेडियो आइटम तक पहुँचता है, और हर सरफ़ेस निशान और आइकन के अपने कॉलम ख़ुद तय करती है।

कॉन्टेक्स्ट मेन्यू

link

कॉन्टेक्स्ट मेन्यू वे ऐक्शन देता है जो उस चीज़ पर लागू होते हैं जिसकी ओर व्यक्ति इशारा करता है, और वहीं देता है जहाँ वह इशारा करता है। यह वही मेन्यू है, वही आइटम, कुंजियाँ और सबमेन्यू, बस किसी बटन से नहीं, बल्कि क्षेत्र के किसी बिंदु पर खुलता है।

• क्षेत्र। trigger को context पर सेट करें और anchor में क्षेत्र की id दें: कैनवस, सूची, टेबल की पंक्ति, कोई दस्तावेज़। क्षेत्र बटन नहीं है, इसलिए मेन्यू उस पर पॉपअप की स्थिति नहीं लिखता।
• कैसे माँगा जाता है। राइट-क्लिक (Mac पर Control दबाकर क्लिक या दो उँगलियों से क्लिक भी), टच या पेन को आधा सेकंड बिना हिलाए दबाए रखना, फ़ोकस वाले एलिमेंट पर Shift+F10 या ContextMenu कुंजी, या स्क्रीन रीडर का कॉन्टेक्स्ट मेन्यू वाला कमांड। मेन्यू बिंदु, वह एलिमेंट जिसके बारे में माँगा गया, और माँगने का तरीक़ा (pointer, long-press या keyboard) लेकर contextRequest भेजता है। ऐंकर से खोलने की तरह, open आप सेट करते हैं।
• कहाँ खुलता है। अपने एक कोने को उस बिंदु पर रखकर, बिना किसी दूरी के: डिफ़ॉल्ट रूप से बिंदु के नीचे और पंक्ति के अंत की ओर, जैसा placement बताए। विंडो के किनारे के पास यह हर अक्ष पर अलग-अलग बिंदु की दूसरी ओर खुलता है, ताकि बिंदु ढके नहीं। पेज स्क्रॉल होने पर यह क्षेत्र के साथ चलता है। कुंजी से माँगने पर यह फ़ोकस वाले एलिमेंट के साथ खुलता है, जैसे ऐंकर के साथ।
• ब्राउज़र का अपना मेन्यू। मेन्यू जिस अनुरोध का जवाब देता है, उसके लिए ब्राउज़र का कॉन्टेक्स्ट मेन्यू रद्द कर देता है। जहाँ आपका मेन्यू काम नहीं करता, जैसे किसी फ़ील्ड, लिंक या चुने हुए टेक्स्ट पर, वहाँ contextRequest रद्द करें, तो अनुरोध ब्राउज़र पर छोड़ा जाता है।
• फ़ोकस और बंद होना। फ़ोकस पहले सक्षम आइटम पर जाता है, और बंद होने पर उस एलिमेंट पर लौटता है जिस पर मेन्यू माँगते समय फ़ोकस था। मेन्यू के बाहर कहीं भी दबाने से यह बंद होता है, क्षेत्र के अंदर भी; कहीं और राइट-क्लिक करने से यह बंद होकर वहाँ फिर से माँगा जाता है।
• इसमें क्या रखें। सिर्फ़ वे ऐक्शन जो इशारा की गई चीज़ पर लागू होते हैं, सबसे ज़्यादा इस्तेमाल होने वाले पहले। इनमें से हर एक को अपने प्रोडक्ट में कहीं और भी दें: जो लोग माँगना नहीं जानते, उन्हें कॉन्टेक्स्ट मेन्यू कभी नहीं दिखता।
• iOS पर देर तक दबाने से नीचे का टेक्स्ट भी चुना जा सकता है। जहाँ क्षेत्र का टेक्स्ट चुना नहीं जाना चाहिए, वहाँ उसकी स्टाइल में यह बताएँ (user-select: none, -webkit-touch-callout: none)।

खुलना, फ़ोकस और बंद होना

link

मेन्यू एक ऑपरेट किया जाने वाला ओवरले है, जो मोडल नहीं है। लोग इसके भीतर काम करते हैं, इसलिए यह फ़ोकस लेता है और उसे लौटाता है। स्क्रीन पर और कुछ भी रोका नहीं जाता।

• खुलना। ऐंकर के सक्रिय होने पर आप open सेट करते हैं। सरफ़ेस प्लैटफ़ॉर्म की ओवरले लेयर में प्रकट होती है, और ऐंकर से सटाकर वैसे रखी जाती है जैसा placement कहता है: डिफ़ॉल्ट रूप से उसके नीचे, शुरुआती किनारों की सीध मिलाकर। जब उस ओर जगह नहीं होती तो वह दूसरी ओर पलट जाती है, स्क्रीन के भीतर रहने के लिए खिसकती है, बहुत ऊँची होने पर स्क्रॉल होती है, और ऐंकर के हिलने पर उसके साथ चलती है।
• फ़ोकस का भीतर जाना। फ़ोकस पहले सक्षम आइटम पर जाता है। इसके बाद ऐरो कुंजियाँ, Home, End और टाइपअहेड फ़ोकस को एक आइटम से दूसरे पर ले जाते हैं: सिरे पर पहुँचकर फ़ोकस दूसरे सिरे पर आ जाता है, और ग्रुप उसे नहीं रोकते। किसी आइटम पर आता हुआ पॉइंटर भी फ़ोकस को वहीं ले जाता है, इसलिए कुंजियाँ वहीं से आगे बढ़ती हैं जहाँ पॉइंटर था।
• मोडल नहीं। मेन्यू फ़ोकस को भीतर बाँधकर नहीं रखता, बाक़ी स्क्रीन को निष्क्रिय नहीं करता और कोई स्क्रिम नहीं बनाता। Tab मेन्यू से बाहर जाती है और उसे बंद कर देती है।
• बंद होना। मेन्यू बंद किए जाने को कहता है और बताता है कि क्यों। कारणों के नाम हर प्लैटफ़ॉर्म पर वही हैं, प्लैटफ़ॉर्म की अपनी केसिंग में:

कारण	कब
escape	Escape दबाई गई।
back	प्लैटफ़ॉर्म का बैक, जैसे Android का बैक बटन या जेस्चर।
outside	सरफ़ेस और ऐंकर के बाहर दबाया गया। कॉन्टेक्स्ट मेन्यू के लिए, सरफ़ेस के बाहर कहीं भी, क्षेत्र के अंदर भी।
tab	Tab या Shift+Tab दबाई गई। इसके बाद फ़ोकस ऐंकर से आगे बढ़ता है, जैसे वह ऐंकर से बढ़ता। कॉन्टेक्स्ट मेन्यू के लिए, फ़ोकस उस एलिमेंट से आगे बढ़ता है जिस पर मेन्यू माँगते समय फ़ोकस था।
focus-out	फ़ोकस किसी और तरीक़े से मेन्यू से बाहर गया।
item	कोई आइटम सक्रिय किया गया।

• फ़ोकस का लौटना। जब मेन्यू बंद होता है और फ़ोकस उसके भीतर था, तो फ़ोकस ऐंकर पर लौटता है। कॉन्टेक्स्ट मेन्यू फ़ोकस उस एलिमेंट पर लौटाता है जिस पर मेन्यू माँगते समय फ़ोकस था; जहाँ किसी पर फ़ोकस नहीं था, वहाँ फ़ोकस बस मेन्यू से हट जाता है।

मेन्यू को कौन बंद करता है, यह प्लैटफ़ॉर्म के अनुसार है। वेब और React Native पर आप close इवेंट से open (visible) को वापस false करते हैं। Compose पर आप onDismissRequest से expanded को false करते हैं, जिसके साथ एक TanreiMenuCloseReason आता है। Flutter पर मेन्यू कारण के साथ onClose को कॉल करता है और अपने कंट्रोलर के ज़रिए ख़ुद बंद हो जाता है। SwiftUI पर मेन्यू isPresented में false लिखता है, इसलिए कारण आगे नहीं दिया जाता।

बाहर दबाने का असर नीचे की चीज़ तक भी पहुँचता है या नहीं, यह भी प्लैटफ़ॉर्म के अनुसार है। वेब और Flutter पर वह पहुँचता है। SwiftUI, Compose और React Native पर बाहर दबाना सिर्फ़ मेन्यू को बंद करता है।

करें

link

• लेबल छोटे रखें, और क्रियाओं के लेबल क्रिया-शब्द के साथ लिखें: “लिंक कॉपी करें”, “फ़ाइल हटाएँ”।
• क्रिया का कीबोर्ड शॉर्टकट shortcut में दें, तटस्थ कुंजी-नामों में (mod+c), और कुंजियों को अपने प्रॉडक्ट में बाँधें। trailingText को बाक़ी हर चीज़ के लिए रखें: अंतिम टेक्स्ट कभी शॉर्टकट के रूप में नहीं दिया जाता।
• विनाशकारी क्रिया को सबसे अंत में रखें, अपने अलग ग्रुप में या किसी ग्रुप के बाद, ताकि वह अलग रहे।
• जो आइटम कभी-कभी उपलब्ध होता है, उसे अक्षम होने पर भी अपनी जगह रहने दें, ताकि मेन्यू का आकार न बदले। लोग ऐरो कुंजियों से उस तक फिर भी पहुँच सकते हैं।

न करें

link

• स्क्रीन की मुख्य क्रिया को मेन्यू में न रखें।
• एक-दूसरे को बाहर करने वाले विकल्पों के लिए चेकबॉक्स आइटम इस्तेमाल न करें। ग्रुप में रेडियो आइटम इस्तेमाल करें।
• एक ही आइटम का मेन्यू न बनाएँ। उस क्रिया को बटन के रूप में दिखाएँ।
• जिस क्रिया को लोग अक्सर इस्तेमाल करते हैं, उसे सबमेन्यू में न रखें, और सबमेन्यू के दो स्तरों से गहरे न जाएँ।
• किसी क्रिया पर अंतिम chevron_right इस्तेमाल न करें। वह सबमेन्यू आइटम का निशान है।
• किसी साइट का मुख्य नेविगेशन लिंक के मेन्यू के रूप में न बनाएँ। मेन्यू माँगे जाने पर आता है और चला जाता है।

सुलभता

link

रोल

menu

लेबलिंग

The menu is named by its anchor (a context menu by the name the product gives it, and by none where it gives none), and a submenu by its submenu item's label. Each item's label is its name and its supporting text its description; its shortcut is exposed as the item's keyboard shortcut where the platform has one, and otherwise given as text in its description (KBS-10); trailing text is description only. A link item is a menu item like any other, named by its label; while it opens a new context its targetLabel ends its description. Checkbox and radio items expose their checked state, whatever their mark looks like. A submenu item exposes that it opens a menu and whether that menu is open. A group is named by its title. Icons, the mark and the submenu indicator are decorative.

न्यूनतम टार्गेट

दिखने वाला आकार छोटा होने पर भी हिट एरिया न्यूनतम टार्गेट साइज़ को पूरा करता है। minimum 32px · pointer 44px · spacing 8px · touch 48px

कीबोर्ड

कुंजियाँ	क्रिया
Enter, Space / Down Arrow on the anchor	The product opens the menu; focus moves to the first enabled item.
Shift+F10 / the ContextMenu key on the area / an element inside it (trigger context)	The menu asks to be opened against that element (contextRequest); the product opens it, and focus moves to the first enabled item.
Down Arrow / Up Arrow	Moves focus to the next or previous item of the level that holds focus, wrapping at the ends.
Home / End	Moves focus to the first or last item of that level.
Printable characters	Moves focus to the next item of that level whose label begins with the characters typed.
Right Arrow (Left Arrow in a right-to-left layout) on a submenu item	Opens the submenu and moves focus to its first enabled item.
Left Arrow (Right Arrow in a right-to-left layout) in a submenu	Closes that submenu and returns focus to its submenu item.
Enter	Activates the focused item and closes the menu and its submenus, a link item's destination opening after that; on a submenu item, opens the submenu instead.
Space	Activates the focused item, a link item as Enter does; a checkbox or radio item leaves the menu open; on a submenu item, opens the submenu.
Enter with a modifier key, on a link item (the web)	What the browser does with a link: another tab or window, a download. The menu emits no close and stays open, with focus on the item (MNU-54).
Escape	Closes the innermost open submenu and returns focus to its submenu item; with no submenu open, closes the menu and returns focus to the anchor (a context menu: to the element that had focus when it was asked for).
Tab / Shift+Tab	Closes the menu and every submenu, and moves focus on from the anchor.

टिप्पणियाँ

• The anchor is the product's own button, icon-only Button or field. The menu does not draw it; it reads its position, returns focus to it, and sets its expanded state where the platform has one (aria-haspopup and aria-expanded on the web).
• A context menu (trigger context) is the same menu opened at a point of an area instead of from a button: a secondary click, a long press, Shift+F10 or the ContextMenu key, as the WAI-ARIA menu pattern names for a context-specific menu. The area is not a button, so it carries no popup state; the menu cancels the platform's own context menu only where it answers the request, and a product that cancels contextRequest — over a field, a link, selected text it does not handle — leaves the platform's menu in place. Every action a context menu offers is also reachable elsewhere in the product, because a context menu is found only by those who know to ask for it (MNU-60 to MNU-63).
• Five item kinds: item (an action), checkbox-item, radio-item, submenu and group. A checkbox item's checked is its own; which radio item is checked is its group's, by value; a submenu item's open is its own. A group may hold items of any kind except another group; a submenu may hold items of every kind.
• A link item is the platform's own link exposed as a menu item: on the web an anchor with the menu item role. Assistive technology reads a menu by its items — how many, which one, the arrow keys — and that reading holds only while every child of the menu is a menu item; so the role stays, and what makes the row a link stays underneath it: its address, the browser's context menu and new-tab gestures, a crawler that follows it. It is the one link form that Space activates, because it is operated as a menu item and looks like the action beside it. A menu of nothing but links to a site's main pages, always in view, is navigation and belongs in a navigation landmark of links; the menu is for a short set that is out of the way until asked for (the folded levels of a trail, a choice of language, "more").
• Focus: the menu is an operated overlay that is not modal. It moves focus in when it opens and returns it to the anchor when it closes, but does not keep it: Tab leaves the menu and closes it, at whatever level focus is. A submenu takes focus when it is opened by a key or a press and returns it to its submenu item when it closes alone.
• Submenus follow the WAI-ARIA menu pattern: the arrow key that points to where the submenu opens, Enter and Space open it and move focus in; the opposite arrow key and Escape close it and return focus to its item; type-ahead, Home, End and the vertical arrow keys work inside the level that holds focus. A pointer opens a submenu by resting on its item, and may then cross other items on its way to the submenu without closing it (MNU-45); touch opens it with a tap. In a window too narrow to set two surfaces side by side the submenu is laid over its parent, never swapped in for it, so the keys, the roles and the reading order are the same at every size (MNU-47).
• Depth: one level of submenus where possible, never more than two. Each level costs a person a precise sideways movement and hides the level before it on a small screen; a set that needs more belongs in a dialog, a sheet or a page. A debug build reports a third level; nothing stops it from working (MNU-52).
• A checked item is told from an unchecked one by its mark, which differs in shape (an empty and a filled box, a thin and a heavy ring, a check or none), never by the row's fill alone: the fill supports the mark and is not held to a contrast of its own. It is still meant to be seen: in the default system a checked row's fill is a layer of the row's content color over the sheet, so it differs from the sheet and from a hovered row by the same step in every scheme (MNU-37), and the content on it keeps at least 4.5:1 in every state. The control looks are drawings in the mark column; the menu holds no checkbox and no radio button.
• Under gap no separator is exposed between groups; the groups themselves, and their titles, carry the structure to assistive technology, as they do under divider.
• A menu holds only its items. A field, slider or switch inside a menu would take arrow keys and typing that the menu needs.
• Text size does not clip an item: items grow at 200% text size, and the surface scrolls when it no longer fits the visible part of the window.
• An item's shortcut is drawn by the keyboard shortcut component (KBS-13), which writes the keys for the keyboard the person uses and only shows them: the product binds them. Trailing text is never read as a shortcut; a product that typed its shortcut there keeps the text but not the keyboard shortcut semantics until it moves the keys to shortcut.
• How a state looks is a value decision of the active design system; components read the state's tokens and never compute the effect themselves.
• WCAG 2.5.8 (target size): for touch every row is at least the touch target high in both densities (MNU-12). The compact density is lower than the pointer target for a fine pointer, by design: it is the density of a tool used with a mouse, it stays above the 24 by 24 the criterion asks, and its rows reach across the surface's whole width. A product that cannot accept that uses regular.

इससे जनरेट किया गया: specs/menu.spec.json, tokens/sys/measure.tokens.json

कंपोनेंट क्या सँभालता है

link

• सरफ़ेस एक मेन्यू के रूप में दी जाती है। क्रियाएँ मेन्यू आइटम हैं, चेकबॉक्स आइटम मेन्यू आइटम चेकबॉक्स हैं और रेडियो आइटम मेन्यू आइटम रेडियो हैं, हर एक अपने चेक वाले स्टेट, अपनी जगह और मेन्यू के साइज़ के साथ।
• हर आइटम का नाम उसके लेबल से आता है और उसका विवरण उसके सहायक टेक्स्ट से। आइटम का shortcut उसके कीबोर्ड शॉर्टकट के रूप में दिया जाता है, जहाँ प्लैटफ़ॉर्म में वह प्रॉपर्टी है (वेब पर aria-keyshortcuts), और नहीं तो उसकी कुंजियों के पूरे लिखे नाम उसके विवरण का हिस्सा होते हैं। अंतिम टेक्स्ट हमेशा सिर्फ़ विवरण का हिस्सा होता है। आइकन और निशान छिपे रहते हैं: बॉक्स, रिंग और चेक चित्र हैं, और चेक वाला स्टेट आइटम का अपना है।
• लिंक आइटम एक मेन्यू आइटम के रूप में दिया जाता है, लिंक के रूप में नहीं: मेन्यू अपने आइटम, उनकी गिनती और ऐरो कुंजियों से पढ़ा जाता है, और यह तभी तक सच है जब तक हर पंक्ति एक मेन्यू आइटम है। भीतर से वह तब भी प्लैटफ़ॉर्म का लिंक है। जब वह नया संदर्भ खोलता है, तो उसका targetLabel उसके विवरण के अंत में आता है, और उसका निशान छिपा रहता है। मौजूदा लिंक आइटम मौजूदा पेज के रूप में भी दिया जाता है।
• ग्रुप अपने शीर्षक के नाम वाले ग्रुप के रूप में दिया जाता है। डिवाइडर ऐसे सेपरेटर हैं जो फ़ोकस नहीं लेते; जहाँ ग्रुप गैप से अलग किए जाते हैं, वहाँ कोई सेपरेटर नहीं होता। शीर्षक फ़ोकस नहीं लेते और आइटम के रूप में नहीं पढ़े जाते।
• सबमेन्यू आइटम ऐसे आइटम के रूप में दिया जाता है जो एक मेन्यू खोलता है, अपने expanded स्टेट के साथ, अक्षम रहते हुए भी। उसकी सरफ़ेस अपने आप में एक मेन्यू है, जिसका नाम आइटम के लेबल से आता है, और हर सरफ़ेस अपनी जगहें ख़ुद गिनती है।
• ऐंकर को बताया जाता है कि वह एक मेन्यू खोलता है और मेन्यू खुला है या नहीं, जहाँ प्लैटफ़ॉर्म में वह प्रॉपर्टी है (वेब पर aria-haspopup, aria-controls और aria-expanded)।
• कॉन्टेक्स्ट मेन्यू अपने क्षेत्र को जैसा है वैसा छोड़ता है: क्षेत्र बटन नहीं है और उसे यह नहीं बताया जाता कि वह मेन्यू खोलता है। मेन्यू राइट-क्लिक, देर तक दबाने, Shift+F10, ContextMenu कुंजी या सहायक तकनीक के कॉन्टेक्स्ट मेन्यू वाले कमांड से खुलता है, और उसका नाम सिर्फ़ वह aria-label है जो आप देते हैं, क्योंकि प्लैटफ़ॉर्म के अपने कॉन्टेक्स्ट मेन्यू का भी कोई नाम नहीं होता।
• खुलने पर फ़ोकस पहले सक्षम आइटम पर जाता है। बंद होने पर फ़ोकस ऐंकर पर लौटता है, अगर वह मेन्यू के भीतर था। Up Arrow और Down Arrow सिरों पर घूमकर दूसरे सिरे पर पहुँचती हैं, Home और End सिरों पर ले जाती हैं, और टाइप करने पर फ़ोकस उस अगले आइटम पर जाता है जिसका लेबल टाइप किए गए अक्षरों से शुरू होता है। Enter सक्रिय करती है और बंद करती है। चेकबॉक्स या रेडियो आइटम पर Space मेन्यू को खुला छोड़ती है। Escape बंद करती है और फ़ोकस लौटाती है। Tab बंद करती है और ऐंकर से आगे बढ़ती है। सबमेन्यू में पंक्ति के शुरू की ओर वाली ऐरो कुंजी और Escape सिर्फ़ उसी स्तर को बंद करती हैं और फ़ोकस को उसके आइटम पर लौटाती हैं; पंक्ति की दिशा वाली जो ऐरो कुंजियाँ कुछ नहीं करतीं, वे मेन्यू के पीछे के पेज तक कभी नहीं पहुँचतीं।
• अक्षम आइटम तक ऐरो कुंजियों से फिर भी पहुँचा जा सकता है, पर वे सक्रिय नहीं होते।
• फ़ोकस रिंग आइटम के भीतर बनती है, इसलिए सरफ़ेस उसे काट नहीं सकती। वह सिर्फ़ कीबोर्ड फ़ोकस के लिए दिखती है। किसी आइटम पर आता हुआ पॉइंटर उसे होवर किया हुआ दिखाता है, फ़ोकस किया हुआ नहीं।
• हर आइटम कम से कम न्यूनतम टार्गेट जितना ऊँचा है, और पूरी पंक्ति उसका हिट एरिया है।
• आइटम बड़े टेक्स्ट के साथ बढ़ते हैं, और जब सरफ़ेस स्क्रीन में नहीं समाती तो वह स्क्रॉल होती है।
• जब तक आइकन फ़ॉन्ट किसी ग्लिफ़ वाले निशान को, जैसे चेक को, बना नहीं सकता, तब तक मेन्यू उसकी जगह कुछ नहीं बनाता, “check” शब्द तो कभी नहीं। वह कॉलम की चौड़ाई बनाए रखता है और चेक वाला स्टेट फिर भी देता है, और फ़ॉन्ट के लोड होते ही निशान दिखाता है।
• डीबग बिल्ड इन बातों की रिपोर्ट करते हैं: बिना लेबल का आइटम, ग्रुप के बाहर का रेडियो आइटम, ग्रुप का ऐसा मान जो उसके किसी रेडियो आइटम का नाम नहीं लेता, एक ही मान वाले दो रेडियो आइटम, ग्रुप के भीतर ग्रुप, ऐसा आइटम जिसमें शॉर्टकट और अंतिम टेक्स्ट दोनों हों, ऐसा separation या iconSpace जिसे मेन्यू परिभाषित नहीं करता, सबमेन्यू का तीसरा स्तर और बिना आइटम वाला सबमेन्यू। वे इनकी भी रिपोर्ट करते हैं: ऐसा लिंक आइटम जो targetLabel के बिना नया संदर्भ खोलता है, चेकबॉक्स आइटम, रेडियो आइटम या सबमेन्यू आइटम पर href, ऐसा href जो किसी स्क्रिप्ट का नाम लेता है या पढ़ा नहीं जा सकता, ऐसा target जिसे मेन्यू परिभाषित नहीं करता, और बिना href वाले आइटम पर current। वे ऐसे trigger की भी रिपोर्ट करते हैं जिसे मेन्यू परिभाषित नहीं करता।

प्लैटफ़ॉर्म की ज्ञात कमियाँ:

• SwiftUI, Compose, Flutter और React Native में लिंक आइटम नहीं हैं: वहाँ आइटम अभी href नहीं लेता।
• SwiftUI, Compose, Flutter और React Native में कॉन्टेक्स्ट ट्रिगर नहीं है: वहाँ मेन्यू सिर्फ़ ऐंकर से खुलते हैं।
• SwiftUI, Compose, Flutter और React Native में न सबमेन्यू हैं, न separation, न iconSpace, न markIcon, और न चेक की हुई पंक्ति का फ़िल। जिस मेन्यू में कोई भी आइटम निशान या आइकन के कॉलम में कुछ बनाता है, उसकी हर पंक्ति पर वे उस कॉलम की जगह रखते हैं। वे अब भी चेक को 16 के बॉक्स में अपने ही निशान के रूप में बनाते हैं, और ग्रुप का शीर्षक वहाँ से शुरू करते हैं जहाँ से लेबल शुरू होते हैं।
• m3-like और cupertino में शीर्षक कहाँ से शुरू होता है, यह Tanrei के नियम के अनुसार है और मूल सिस्टम से मिलाकर नापा नहीं गया है।
• Web: मेन्यू प्लैटफ़ॉर्म के बंद करने के अनुरोध को, जैसे Android का बैक जेस्चर, नहीं सुनता, इसलिए back कभी एमिट नहीं होता।
• Web: aria-haspopup और aria-expanded ऐंकर पर सेट किए जाते हैं। कस्टम एलिमेंट वाले ऐंकर पर, जैसे सिर्फ़ आइकन वाला <tanrei-button>, वे उसके शैडो रूट के भीतर के बटन पर जाते हैं। aria-controls और मेन्यू का नाम, जो ऐंकर से आता है, शैडो रूट को पार नहीं कर सकते।
• Web: सरफ़ेस स्क्रिप्ट से रखी जाती है, CSS anchor positioning से नहीं।
• Web: सबमेन्यू आइटम aria-controls से अपनी सरफ़ेस की ओर इशारा नहीं कर सकता, क्योंकि वह शैडो रूट के भीतर नहीं पहुँच सकता। इसकी जगह सरफ़ेस एक्सेसिबिलिटी ट्री में आइटम की वंशज है।
• Web, macOS पर WebKit: खुले सबमेन्यू का आइटम दबाए जाने पर दबाए हुए स्टेट का रंग लेने की जगह अपना होवर वाला रंग बनाए रखता है।
• SwiftUI में मेन्यू, मेन्यू आइटम या सेपरेटर का कोई रोल नहीं है, शॉर्टकट की कोई प्रॉपर्टी नहीं है, और यह कहने का कोई तरीक़ा नहीं है कि ऐंकर एक मेन्यू खोलता है या मेन्यू खुला है। हर आइटम एक बटन है जिसका मान उसकी जगह है (“2 of 3”, सिर्फ़ अंग्रेज़ी में), चेकबॉक्स आइटम एक टॉगल है, और रेडियो आइटम चेक किया हुआ रहने तक चयनित रहता है।
• SwiftUI अक्षम बटन को कभी कीबोर्ड फ़ोकस नहीं देता, इसलिए ऐरो कुंजियाँ अक्षम आइटम तक पहुँचने की जगह उसे लाँघ जाती हैं।
• SwiftUI मेन्यू को एक पॉपओवर के रूप में पेश करता है, जो अपनी जगह ख़ुद तय करता है। टोकन सिर्फ़ ओर चुनते हैं: पॉपओवर ऐंकर से और विंडो के किनारों से अपनी ही दूरी रखता है, अपनी सीध ख़ुद मिलाता है, और अपने ही मोशन के साथ बंद होता है। iOS 26 पर वह सरफ़ेस को अपने बड़े कोनों तक काट देता है और अपनी शैडो बनाता है। यह किसी डिवाइस पर कैसा दिखता है, यह अभी जाँचा नहीं गया है।
• SwiftUI: Tab मेन्यू को बंद करती है और फ़ोकस को ऐंकर पर लौटाती है, पर फ़ोकस उसी कीस्ट्रोक में उससे आगे नहीं बढ़ सकता।
• SwiftUI रेडियो आइटम का मान सिर्फ़ उस .tag(_:) से पढ़ता है जो ख़ुद TanreiMenuOption पर लगाया गया हो।
• SwiftUI: ऐरो कुंजियाँ, Home, End, टाइपअहेड, Escape और Tab नियमों के रूप में टेस्ट किए गए हैं, असली कीबोर्ड के साथ अभी नहीं।
• React Native मेन्यू को TanreiProvider की ओवरले लेयर में बनाता है, इसलिए उसके ऊपर एक TanreiProvider होना ज़रूरी है। Tab मेन्यू को बंद करती है और फ़ोकस को ऐंकर पर लौटाती है, पर उसी कीस्ट्रोक में उससे आगे नहीं बढ़ सकती। अगली Tab आगे बढ़ती है।
• React Native: खुले मेन्यू के पीछे के एलिमेंट के साथ स्क्रीन रीडर क्या करता है, और फ़ोकस का मेन्यू से बाहर जाना, अभी किसी डिवाइस पर जाँचे नहीं गए हैं।
• React Native में मेन्यू आइटम चेकबॉक्स या मेन्यू आइटम रेडियो का कोई रोल नहीं है और शॉर्टकट की कोई प्रॉपर्टी नहीं है। हर आइटम एक मेन्यू आइटम है, चेकबॉक्स और रेडियो आइटम चेक वाला स्टेट रखते हैं, और अंतिम टेक्स्ट विवरण के हिस्से के रूप में पढ़ा जाता है।
• React Native आपके ऐंकर पर प्रॉपर्टी सेट नहीं कर सकता। उसे accessibilityState={{ expanded: open }} ख़ुद दें।
• React Native उस ऐंकर के साथ नहीं चलता जो मेन्यू खुला रहते हिलता है। वह ऐंकर को तब नापता है जब मेन्यू खुलता है और जब विंडो का साइज़ बदलता है।
• React Native: ऐरो कुंजियाँ, टाइपअहेड, Escape, Tab, और Enter के मुक़ाबले Space, अभी हार्डवेयर कीबोर्ड वाले किसी डिवाइस पर जाँचे नहीं गए हैं।
• Compose में मेन्यू, मेन्यू आइटम या सेपरेटर का कोई रोल नहीं है और शॉर्टकट की कोई प्रॉपर्टी नहीं है। सरफ़ेस एक कलेक्शन है, क्रिया का कोई रोल नहीं है, चेकबॉक्स आइटम एक चेकबॉक्स है और रेडियो आइटम एक रेडियो बटन, और अंतिम टेक्स्ट विवरण के हिस्से के रूप में पढ़ा जाता है। मेन्यू ऐंकर का expanded स्टेट सेट नहीं कर सकता।
• Compose: मेन्यू खुला रहते ऐंकर पर दबाना बाहर दबाना गिना जाता है। वह मेन्यू को outside के साथ बंद करता है और ऐंकर तक नहीं पहुँचता।
• Compose: पॉपअप का विंडो फ़ोकस, बाहर असल में दबाना, बैक बटन, फ़ोकस का ऐंकर पर लौटना, Tab का उससे आगे बढ़ना, और मेन्यू पर TalkBack सिर्फ़ Robolectric में टेस्ट किए गए हैं, किसी डिवाइस पर अभी नहीं।
• Flutter में ग्रुप या सेपरेटर का कोई रोल नहीं है, वह मेन्यू को उसके ऐंकर से नाम नहीं दे सकता और न यह कह सकता है कि ऐंकर एक मेन्यू खोलता है, और वह आइटम को न जगह देता है, न सेट का साइज़। ग्रुप अपने शीर्षक के नाम वाला एक कंटेनर है। ऐंकर को expanded स्टेट ज़रूर मिलता है।
• Flutter: TalkBack, VoiceOver और वेब का स्क्रीन रीडर मेन्यू के लिए क्या पढ़कर सुनाते हैं, और खुले मेन्यू पर Android का बैक जेस्चर, अभी किसी डिवाइस पर जाँचे नहीं गए हैं।

आपको क्या करना है

link

• मेन्यू को उसके ऐंकर से नाम दें। आइकन बटन वाले ऐंकर को “और” या “क्रमबद्ध करें” जैसा लेबल दें। React Native पर वही नाम मेन्यू के accessibilityLabel के रूप में दें।
• Compose और React Native पर ऐंकर पर यह बताएँ कि मेन्यू खुला है या नहीं। मेन्यू इसे वहाँ सेट नहीं कर सकता।
• जब मेन्यू कहे तब उसे बंद करें, और उसके बंद होने पर फ़ोकस को ख़ुद न हिलाएँ। मेन्यू फ़ोकस को ऐंकर पर लौटाता है।
• कॉन्टेक्स्ट मेन्यू को aria-label से नाम दें, जैसे “कैनवस”, और उसके हर ऐक्शन को अपने प्रोडक्ट में कहीं और भी दें।
• हर आइटम को लेबल दें, उन आइटम को भी जो आइकन दिखाते हैं। लेबल ही नाम है, और टाइपअहेड उसी से मिलान करता है।
• रेडियो आइटम के ग्रुप को ऐसा शीर्षक दें जो बताए कि चुनाव किस बारे में है।
• हर सबमेन्यू आइटम को लेबल दें: वह आइटम को और उसके खोले जाने वाले सबमेन्यू को नाम देता है।
• नया टैब खोलने वाले लिंक आइटम को अपने प्रॉडक्ट की भाषा में targetLabel दें, जैसे “नए टैब में खुलता है”। Tanrei अपना कोई शब्द साथ नहीं देता।