होम कंपोनेंटनेविगेशन ड्रॉअर

नेविगेशन ड्रॉअर

प्रॉडक्ट के गंतव्यों को शुरुआती किनारे के एक पैनल में, सेक्शन और ग्रुप में बाँटकर दिखाता है; बड़ी स्क्रीन पर कॉन्टेंट के बग़ल में और छोटी स्क्रीन पर उसके ऊपर, और सिमटकर आइकन का एक कॉलम बन सकता है।

अंतिम अपडेट: 26 अक्टूबर 2026

content_copy

Markdown में देखें

श्रेणी: नेविगेशन
टोकन: comp.navigation-drawer
स्तर: संयोजित
इनसे बना है: Modal layer

अवलोकन

Web: tanrei-navigation-drawer; schedule
SwiftUI: TanreiNavigationDrawer; schedule
Jetpack Compose: TanreiNavigationDrawer; schedule
Flutter: TanreiNavigationDrawer; schedule
React Native: NavigationDrawer; schedule

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

संशोधित स्पेक, जो अभी हर प्लैटफ़ॉर्म पर नहीं है

यह पेज नेविगेशन ड्रॉअर को वैसा बताता है जैसा स्पेक में वह अभी है। collapsible ड्रॉअर सिमटकर आइकन का एक कॉलम बन जाता है, जो नेविगेशन रेल की जगह लेता है: समेटा हुआ ड्रॉअर वही फैला हुआ ड्रॉअर है जिसके लेबल हट गए हैं और जिसकी हर पंक्ति अपने आइकन के बाद काट दी गई है, और उसका मेन्यू बटन उसे फिर चौड़ा कर देता है, जबकि हर आइकन अपनी जगह रहता है। गंतव्य का badge टेक्स्ट अब trailingText है, जो ज़्यादा हल्का बनता है, और trailing स्लॉट में एक ग्लिफ़ रखा जाता है; badge अब आइकन पर लगा बैज है। group आइटम अपने भीतर के गंतव्यों को खोलते और बंद करते हैं। पंक्तियों की ऊँचाई 48 है, जो मेन्यू के आइटम की ऊँचाई है। responsive के साथ विंडो की चौड़ाई तय करती है कि ड्रॉअर किस रूप में पेश हो। href वाला गंतव्य एक लिंक है, और revealSelected और scrollOffset ड्रॉअर को किसी साइट का साइडबार बनाते हैं। वेब कंपोनेंट यह सब पहले से करता है, और डेमो भी। SwiftUI, Compose, Flutter और React Native ऊपर “पीछे” के रूप में चिह्नित हैं: जब तक वे बराबरी पर नहीं आते, वे पिछला संशोधन देते हैं, जिसमें पंक्तियाँ 44 की हैं, badge पंक्ति के अंत का टेक्स्ट है, समेटा हुआ रूप, ग्रुप, लिंक वाले गंतव्य और रिस्पॉन्सिव प्रस्तुति नहीं हैं, और नेविगेशन रेल एक अलग कंपोनेंट है। उनके उदाहरण वही संशोधन दिखाते हैं। कॉम्पैक्ट density, गंतव्य भी बनने वाले ग्रुप (selectableGroups) और फ़िल्टर का फ़ील्ड (filterable) इससे भी नए हैं, और अभी सिर्फ़ वेब पर हैं।

दो सेक्शन वाला standard ड्रॉअर

समेटने योग्य ड्रॉअर: इसका मेन्यू बटन इसे आइकन के कॉलम में समेट देता है, जहाँ हर सेल अपना नाम टूलटिप में दिखाता है

add

लिंक वाले गंतव्य: ड्रॉअर का value मौजूदा पेज का नाम लेता है, और reveal-selected उस ग्रुप को खोल देता है जिसमें वह है

अपनी पंक्तियाँ फ़िल्टर करने वाला ड्रॉअर: फ़ील्ड में टाइप करें, या उस तक पहुँचने के लिए पेज पर कहीं भी / दबाएँ

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

गंतव्य भी बनने वाले ग्रुप: selectable-groups के साथ ग्रुप की पंक्ति उसे चुनती है और उसका शेवरॉन उसे खोलता और बंद करता है

इस्तेमाल

नेविगेशन ड्रॉअर में पाँच तरह के आइटम होते हैं। destination एक पंक्ति है, जिसमें एक वैकल्पिक आइकन, एक लेबल और अंत में वैकल्पिक अंतिम कॉन्टेंट होता है; href के साथ यह एक लिंक है। group वह पंक्ति है जो अपने भीतर के गंतव्यों और ग्रुप को खोलती और बंद करती है। section गंतव्यों और ग्रुप को एक वैकल्पिक title (वेब पर headline) के नीचे इकट्ठा करता है, और उसके पहले एक वैकल्पिक divider हो सकता है; सेक्शन एक-दूसरे के भीतर नहीं रखे जाते, और ग्रुप में सेक्शन नहीं रखे जाते। header-button (पहला वाला मेन्यू बटन है) और main-action हेडर में रहते हैं। वेब पर ये <tanrei-navigation-drawer-item>, <tanrei-navigation-drawer-group> और <tanrei-navigation-drawer-section> चाइल्ड हैं, और header-button और main-action स्लॉट में सिर्फ़ आइकन वाले <tanrei-button> और एक <tanrei-main-action-button>। जो प्लैटफ़ॉर्म पीछे हैं, वे गंतव्य और सेक्शन अपने तरीक़े से लेते हैं: SwiftUI पर TanreiNavigationDrawerItem और TanreiNavigationDrawerSection व्यू और Compose पर इन्हीं नामों के कॉल, Flutter के children: में TanreiNavigationDrawerDestination और TanreiNavigationDrawerSection ऑब्जेक्ट, और React Native पर items ऐरे की गंतव्य और सेक्शन वाली एंट्री, जहाँ सेक्शन की पहचान उसके अपने items से होती है।

चयन ड्रॉअर का होता है, गंतव्य के मान के आधार पर, गंतव्य चाहे जहाँ भी हो। change और reselect वैसे ही काम करते हैं जैसे नेविगेशन बार में। Compose में ड्रॉअर के स्तर का कोई मान नहीं है: मौजूदा आइटम को आप selected चिह्नित करते हैं, और उसका onClick change और reselect दोनों का काम करता है। Flutter इंडेक्स से चुनता है, जो सेक्शन के पार पढ़ने के क्रम में गिना जाता है।

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

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

density डिफ़ॉल्ट रूप से regular है, या compact: 32 ऊँची पंक्तियाँ, 16 के ग्लिफ़ और आइकन का पतला कॉलम, ऐसे टूल के लिए जो पॉइंटर से चलता है और जिसके ड्रॉअर में बहुत सी जगहें हैं। कॉम्पैक्ट डेंसिटी आज वेब पर है।

filterable पंक्तियों के ऊपर फ़िल्टर का एक फ़ील्ड बनाता है। व्यक्ति जो टाइप करता है, ड्रॉअर सिर्फ़ उन पंक्तियों तक सिमट जाता है जिनके लेबल में वह है, और उन्हें रखने वाले ग्रुप तब तक खुले रहते हैं जब तक फ़िल्टर लगा है; फ़ील्ड ख़ाली करने पर ड्रॉअर पहले जैसा हो जाता है। filterValue वह टेक्स्ट है, जिसे व्यक्ति के टाइप करते समय ड्रॉअर ख़ुद सेट करता है और फिर filterChange फ़ायर करता है; पेज दोबारा बनाते समय फ़िल्टर लौटाने के लिए आप भी उसे सेट करते हैं। फ़ील्ड के शब्द आपके हैं: filterLabel उसका नाम है, और filterPlaceholder, filterCountText (“मेल खाने वाले: {count}”), filterEmptyText और filterClearLabel ख़ाली छोड़ने पर आपके शब्दों से लिए जाते हैं। फ़िल्टर आज वेब पर है।

ड्रॉअर के दो वेरिएंट हैं, और एक ही प्रॉडक्ट आम तौर पर दोनों इस्तेमाल करता है: जहाँ विंडो काफ़ी चौड़ी है वहाँ standard, और जहाँ नहीं है वहाँ modal।

Standard एक लेआउट रीजन है, ओवरले नहीं। खुला होने पर यह कॉन्टेंट के बग़ल में अपनी चौड़ाई लेता है, और बंद होने पर कुछ नहीं लेता। यह कोई स्क्रिम नहीं बनाता और फ़ोकस को कभी अपने भीतर नहीं रोकता।
Modal एक ऑपरेट किया जाने वाला ओवरले है, और वह भी मोडल। यह स्क्रिम के साथ कॉन्टेंट के ऊपर सरककर आता है, बंद होने तक फ़ोकस को भीतर रखता है, और व्यक्ति के कोई गंतव्य चुनने के बाद अपने आप बंद हो जाता है।

responsive के साथ ड्रॉअर यह चुनाव विंडो की चौड़ाई से ख़ुद करता है (नीचे “विंडो की चौड़ाई के अनुसार चलना” देखें)।

open दोनों वेरिएंट को दिखाता या छिपाता है। मोडल ड्रॉअर तब भी बंद होता है जब व्यक्ति स्क्रिम या Escape दबाता है, प्लैटफ़ॉर्म की बैक क्रिया इस्तेमाल करता है, या उसे उसके किनारे की ओर ड्रैग करता है, और तब वह close एमिट करता है। वेब पर ड्रॉअर open को ख़ुद वापस false कर देता है, जैसे डायलॉग करता है। बाक़ी जगहों पर आप बंद होने की सूचना से उसे सिंक में रखते हैं: Flutter और React Native पर onClose, SwiftUI पर isPresented बाइंडिंग, और Compose पर ड्रॉअर स्टेट, जिसका confirmValueChange हर बंद होने की ख़बर पाता है।

<tanrei-button variant="text" id="menu" label="मेन्यू"><span slot="icon">menu</span></tanrei-button>

<!-- Modal: शैडो रूट में एक <dialog>, जो showModal() से खुलता है। Standard एक <nav> है, जिसका नाम label से आता है। -->
<tanrei-navigation-drawer variant="modal" label="मेल" value="inbox">
  <tanrei-navigation-drawer-section headline="मेल">
    <tanrei-navigation-drawer-item value="inbox" label="इनबॉक्स" icon="inbox" trailing-text="24"></tanrei-navigation-drawer-item>
    <tanrei-navigation-drawer-item value="sent" label="भेजे गए" icon="send"></tanrei-navigation-drawer-item>
  </tanrei-navigation-drawer-section>
  <tanrei-navigation-drawer-section headline="लेबल" divider>
    <tanrei-navigation-drawer-item value="work" label="काम" icon="label" trailing-text="नया"></tanrei-navigation-drawer-item>
  </tanrei-navigation-drawer-section>
</tanrei-navigation-drawer>

<!-- समेटने योग्य: पहला हेडर बटन मेन्यू बटन है। ड्रॉअर उसका जवाब ख़ुद देता है और expandedchange फ़ायर करता है। -->
<tanrei-navigation-drawer collapsible open label="वर्कस्पेस" value="home">
  <tanrei-button slot="header-button" variant="text" label="मेन्यू"><span slot="icon">menu</span></tanrei-button>
  <tanrei-main-action-button slot="main-action" label="नया प्रोजेक्ट"><span slot="icon">add</span></tanrei-main-action-button>
  <span slot="header">वर्कस्पेस</span>
  <tanrei-navigation-drawer-item value="home" label="होम" icon="home"></tanrei-navigation-drawer-item>
  <!-- ग्रुप: उसकी पंक्ति उसे खोलती और बंद करती है, और toggle फ़ायर करती है। -->
  <tanrei-navigation-drawer-group label="प्रोजेक्ट" icon="folder">
    <tanrei-navigation-drawer-item value="atlas" label="Atlas" icon="deployed_code"></tanrei-navigation-drawer-item>
  </tanrei-navigation-drawer-group>
  <!-- आइकन पर बैज, दोनों रूपों में; अंतिम कॉन्टेंट सिर्फ़ फैले हुए रूप में। -->
  <tanrei-navigation-drawer-item value="inbox" label="इनबॉक्स" icon="inbox" badge badge-count="3" badge-label="3 अपठित"></tanrei-navigation-drawer-item>
  <!-- नया टैब खोलने वाला लिंक: फैली हुई पंक्ति open_in_new पर ख़त्म होती है, और target-label उसके नाम के बाद पढ़ा जाता है। -->
  <tanrei-navigation-drawer-item label="सहायता केंद्र" icon="help" href="/help" target="new" target-label="नए टैब में खुलता है"></tanrei-navigation-drawer-item>
</tanrei-navigation-drawer>

<!-- साइट का साइडबार: हर गंतव्य एक लिंक है, और हर पेज ड्रॉअर को value के रूप में अपना पता देता है।
     responsive के साथ विंडो की चौड़ाई प्रस्तुति चुनती है; reveal-selected उन ग्रुप को खोलता है जिनमें वह पेज है। -->
<tanrei-navigation-drawer id="sidebar" label="दस्तावेज़" value="/components/tabs/" reveal-selected responsive open>
  <tanrei-navigation-drawer-item label="शुरुआत करें" href="/getting-started/"></tanrei-navigation-drawer-item>
  <tanrei-navigation-drawer-group label="कंपोनेंट">
    <tanrei-navigation-drawer-item label="बटन" href="/components/button/"></tanrei-navigation-drawer-item>
    <tanrei-navigation-drawer-item label="टैब" href="/components/tabs/" trailing-text="नया"></tanrei-navigation-drawer-item>
  </tanrei-navigation-drawer-group>
</tanrei-navigation-drawer>

<!-- अपनी पंक्तियाँ फ़िल्टर करने वाला साइडबार: पेज पर कहीं भी "/" दबाने से फ़ोकस फ़ील्ड में जाता है। शब्द आपके हैं। -->
<tanrei-navigation-drawer id="filtered" label="दस्तावेज़" value="/components/tabs/" reveal-selected open
  filterable filter-label="नेविगेशन फ़िल्टर करें" filter-placeholder="फ़िल्टर करें"
  filter-count-text="मेल खाने वाले: {count}" filter-empty-text="कोई नतीजा नहीं" filter-clear-label="मिटाएँ">
  <tanrei-navigation-drawer-group label="कंपोनेंट">
    <tanrei-navigation-drawer-item label="बटन" href="/components/button/"></tanrei-navigation-drawer-item>
    <tanrei-navigation-drawer-item label="टैब" href="/components/tabs/"></tanrei-navigation-drawer-item>
  </tanrei-navigation-drawer-group>
</tanrei-navigation-drawer>

<script type="module">
  import '@tanrei/web/components/navigation-drawer';
  import '@tanrei/web/components/button';
  const drawer = document.querySelector('tanrei-navigation-drawer');
  document.querySelector('#menu').addEventListener('click', () => (drawer.open = true));
  // ड्रॉअर change फ़ायर करने से पहले अपना value ख़ुद सेट करता है। फिर मोडल ड्रॉअर अपने आप बंद हो जाता है।
  drawer.addEventListener('change', (e) => showFolder(e.detail.value));
  // close मोडल ड्रॉअर के हर बंद होने के बाद आता है: स्क्रिम, Escape, ड्रैग या कोई गंतव्य।
  drawer.addEventListener('close', onDrawerClosed);
  // समेटने योग्य ड्रॉअर तब तक वह रूप ले चुका होता है जो उसके मेन्यू बटन ने माँगा।
  document.querySelector('[collapsible]').addEventListener('expandedchange', (e) => savePreference(e.detail.expanded));

  const sidebar = document.querySelector('#sidebar');
  // लिंक का change रद्द किया जा सकता है और अपने साथ उसका href लाता है: क्लाइंट-साइड राउटर यहाँ नेविगेशन अपने हाथ में लेता है।
  // अलग-अलग दस्तावेज़ों वाली साइट कुछ नहीं सुनती, और अगला पेज value बताता है।
  sidebar.addEventListener('change', (e) => {
    e.preventDefault();
    router.navigate(e.detail.href);
  });
  // रिस्पॉन्सिव ड्रॉअर बताता है कि विंडो की चौड़ाई ने उसे क्या बनाया: standard, column या modal।
  sidebar.addEventListener('presentationchange', (e) => showMenuButton(e.detail.presentation === 'modal'));

  // व्यक्ति ने फ़िल्टर का जो टेक्स्ट छोड़ा, वह अगले पेज के लिए रखा जाता है (ड्रॉअर कुछ भी नहीं सहेजता)।
  const filtered = document.querySelector('#filtered');
  filtered.addEventListener('filterchange', (e) => sessionStorage.setItem('filter', e.detail.value));
  filtered.filterValue = sessionStorage.getItem('filter') ?? '';
</script>

import {
  NavigationDrawer,
  NavigationDrawerGroup,
  NavigationDrawerItem,
  NavigationDrawerSection,
} from '@tanrei/react';

// मोडल ड्रॉअर अपने आप बंद होता है (onClose): open को वहीं सिंक में रखें।
<NavigationDrawer
  variant="modal"
  label="मेल"
  open={open}
  value={folder}
  onChange={(e) => setFolder(e.detail.value)}
  onClose={() => setOpen(false)}
>
  <NavigationDrawerSection headline="मेल">
    <NavigationDrawerItem value="inbox" label="इनबॉक्स" icon="inbox" trailingText="24" />
    <NavigationDrawerItem value="sent" label="भेजे गए" icon="send" />
  </NavigationDrawerSection>
</NavigationDrawer>

// साइट का साइडबार: गंतव्य लिंक हैं, और पेज बताता है कि कौन-सा मौजूदा है।
<NavigationDrawer
  label="दस्तावेज़"
  open
  responsive
  revealSelected
  value={pathname}
  onChange={(e) => {
    e.preventDefault(); // क्लाइंट-साइड राउटर नेविगेशन अपने हाथ में लेता है
    navigate(e.detail.href);
  }}
  onPresentationChange={(e) => setPresentation(e.detail.presentation)}
>
  <NavigationDrawerGroup label="कंपोनेंट">
    <NavigationDrawerItem label="बटन" href="/components/button/" />
    <NavigationDrawerItem label="टैब" href="/components/tabs/" trailingText="नया" />
  </NavigationDrawerGroup>
  <NavigationDrawerItem label="सोर्स कोड" href="https://example.com/tanrei" target="new" targetLabel="नए टैब में खुलता है" />
</NavigationDrawer>

// अपनी पंक्तियाँ फ़िल्टर करने वाला साइडबार: व्यक्ति के टाइप करते समय ड्रॉअर filterValue ख़ुद सेट करता है।
<NavigationDrawer
  label="दस्तावेज़"
  open
  filterable
  filterLabel="नेविगेशन फ़िल्टर करें"
  filterPlaceholder="फ़िल्टर करें"
  filterCountText="मेल खाने वाले: {count}"
  filterEmptyText="कोई नतीजा नहीं"
  filterClearLabel="मिटाएँ"
  filterValue={filter}
  onFilterChange={(e) => setFilter(e.detail.value)}
>
  <NavigationDrawerGroup label="कंपोनेंट">
    <NavigationDrawerItem label="बटन" href="/components/button/" />
    <NavigationDrawerItem label="टैब" href="/components/tabs/" />
  </NavigationDrawerGroup>
</NavigationDrawer>

import Tanrei

// Standard: कॉन्टेंट के बग़ल में। isPresented इसे दिखाता और छिपाता है; गंतव्य चुनने पर selection लिखा जाता है।
HStack(spacing: 0) {
    TanreiNavigationDrawer(variant: .standard, isPresented: $sidebarShown, selection: $folder,
                           accessibilityLabel: "मेल", onReselect: { _ in scrollToTop() }) {
        TanreiNavigationDrawerSection("मेल") {
            TanreiNavigationDrawerItem("इनबॉक्स", icon: "inbox", value: "inbox", badge: "24")
            TanreiNavigationDrawerItem("भेजे गए", icon: "send", value: "sent")
        }
        TanreiNavigationDrawerSection("लेबल", divider: true) {
            TanreiNavigationDrawerItem("काम", icon: "label", value: "work")
        }
    } header: {
        Text("मेल")
    }
    FolderView(folder)
}

// Modal: जिस कॉन्टेंट को यह ढकता है, उस पर एक मॉडिफ़ायर। बंद होने पर बाइंडिंग में false लिखा जाता है।
FolderView(folder)
    .tanreiNavigationDrawer(isPresented: $menuShown, selection: $folder, accessibilityLabel: "मेल") { … }

import io.github.chnotchy.tanrei.components.TanreiNavigationDrawer
import io.github.chnotchy.tanrei.components.TanreiNavigationDrawerItem
import io.github.chnotchy.tanrei.components.TanreiNavigationDrawerSection
import io.github.chnotchy.tanrei.components.rememberTanreiDrawerState
import io.github.chnotchy.tanrei.tokens.TanreiNavigationDrawerVariant

// ड्रॉअर स्क्रीन को लपेटता है। drawerState स्पेक का open है; confirmValueChange स्पेक का close सुनता है।
val drawerState = rememberTanreiDrawerState()
TanreiNavigationDrawer(
    variant = if (wide) TanreiNavigationDrawerVariant.Standard else TanreiNavigationDrawerVariant.Modal,
    drawerState = drawerState,
    contentDescription = "मेल",
    drawerContent = {
        // मौजूदा आइटम को आप selected चिह्नित करते हैं। मोडल ड्रॉअर onClick के बाद अपने आप बंद हो जाता है।
        TanreiNavigationDrawerSection(heading = "मेल") {
            TanreiNavigationDrawerItem(selected = folder == "inbox", onClick = { folder = "inbox" }, label = "इनबॉक्स", icon = "inbox", badge = "24")
            TanreiNavigationDrawerItem(selected = folder == "sent", onClick = { folder = "sent" }, label = "भेजे गए", icon = "send")
        }
        TanreiNavigationDrawerSection(heading = "लेबल", divider = true) {
            TanreiNavigationDrawerItem(selected = folder == "work", onClick = { folder = "work" }, label = "काम", icon = "label", badge = "नया")
        }
    },
) {
    FolderScreen(folder, onMenu = { drawerState.open() })
}

import 'package:tanrei/tanrei.dart';

// Standard: एक लेआउट रीजन, Row में कॉन्टेंट के बग़ल में सबसे पहले।
Row(
  children: <Widget>[
    TanreiNavigationDrawer(
      open: sidebarOpen,
      selectedIndex: current, // सेक्शन के पार पढ़ने के क्रम में गिना जाता है
      onDestinationSelected: (int index) => setState(() => current = index), // change और reselect
      semanticLabel: 'मेल',
      children: const <TanreiNavigationDrawerChild>[
        TanreiNavigationDrawerSection(
          heading: 'मेल',
          children: <TanreiNavigationDrawerChild>[
            TanreiNavigationDrawerDestination(icon: 'inbox', label: 'इनबॉक्स', badge: '24'),
            TanreiNavigationDrawerDestination(icon: 'send', label: 'भेजे गए'),
          ],
        ),
        TanreiNavigationDrawerSection(
          heading: 'लेबल',
          divider: true,
          children: <TanreiNavigationDrawerChild>[
            TanreiNavigationDrawerDestination(icon: 'label', label: 'काम', badge: 'नया'),
          ],
        ),
      ],
    ),
    const Expanded(child: Page()),
  ],
),

// Modal: विंडो को भरने वाले Stack का आख़िरी चाइल्ड। onClose से open को false करें।
Stack(
  children: <Widget>[
    const Positioned.fill(child: Page()),
    TanreiNavigationDrawer(
      variant: TanreiNavigationDrawerVariant.modal,
      open: menuOpen,
      onClose: () => setState(() => menuOpen = false),
      selectedIndex: current,
      onDestinationSelected: (int index) => setState(() => current = index),
      semanticLabel: 'मेल',
      children: destinations,
    ),
  ],
),

import { useState } from 'react';
import { NavigationDrawer } from '@tanrei/react-native';

const [open, setOpen] = useState(false);
const [folder, setFolder] = useState('inbox');

// कंट्रोल्ड: onClose से open को false करें। मोडल ड्रॉअर एक पारदर्शी Modal में पेश किया जाता है।
<NavigationDrawer
  variant={wide ? 'standard' : 'modal'}
  open={open}
  onClose={() => setOpen(false)}
  accessibilityLabel="मेल"
  value={folder}
  onValueChange={setFolder}
  items={[
    { heading: 'मेल', items: [
      { value: 'inbox', label: 'इनबॉक्स', icon: 'inbox', badge: '24' },
      { value: 'sent', label: 'भेजे गए', icon: 'send' },
    ] },
    { heading: 'लेबल', divider: true, items: [{ value: 'work', label: 'काम', icon: 'label', badge: 'नया' }] },
  ]}
/>

स्पेक

बिना आइकन के गंतव्य, किसी सेक्शन के बाहर

संरचना

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

भाग	विवरण
1 `container`	The panel at the start edge, the full height of its parent: expanded, the full drawer; collapsed, the icon column. Standard: part of the layout. Modal: above the content, its end corners rounded. Its color reaches under the system insets at its start, top and bottom.
2 `outline`	The end edge of a standard drawer, and of a collapsible modal drawer's column, which sets it apart from the content beside it.
3 `scrim` · वैकल्पिक	The modal layer's scrim (MDL-1): it dims everything behind a modal drawer; a press on it closes the drawer.
4 `header` · वैकल्पिक	The top of the drawer, which stays in place while the items scroll: the header buttons (a menu button first) stacked in the icon column, the header slot's content beside the first of them while expanded, and the main action below them.
5 `header-button` · वैकल्पिक	An icon-only Button in the header (an item of the header-button kind), on the icon column. While the drawer is collapsible, the first one is its menu button: it widens and narrows the drawer, and carries its expanded state. It stays the Button it is in both forms, with the Button's own size and shape (a circle in the default system).
6 `main-action` · वैकल्पिक	The screen's main action (an item of the main-action kind), below the header buttons: its icon alone while the drawer is collapsed, its icon and label while expanded, its glyph in the same place in both.
7 `filter`	The filter field, while filterable is true and the drawer is expanded: a Text input of type search below the header, with the search glyph at its start and, at its end, the key hint while it is empty and does not have focus, or a clear button while it holds text. It stays in place while the items scroll.
8 `filter.status`	The line at the top of the results while a filter is applied: how many rows match, in the product's filterCountText, unless filterCountHidden; or, where no row matches, the product's filterEmptyText. Takes no focus and no state.
9 `section` · वैकल्पिक	A group of items (an item of the section kind) under an optional heading: its divider, its heading and its items, in that order. Not interactive, and never collapsed away.
10 `heading` · वैकल्पिक	A section's heading: text that names the items under it. Not interactive. Collapsed, its row keeps its height and its text is not drawn.
11 `divider` · वैकल्पिक	A divider component the drawer draws before a section whose divider is true, across the drawer's inner width in either form.
12 `group` · वैकल्पिक	An expandable group of destinations (an item of the group kind): a row that opens and closes, and the destinations and groups it holds, whose rows start further in than its own while it is open. Collapsed, one cell.
13 `group.chevron` · वैकल्पिक	The icon set's expand_more at the end of a group's row, turned half a turn while the group is open. Hidden from assistive technology.
14 `item`	One destination (an item of the destination kind), or a group's row: a cell across the drawer's width, which is its hit area and has the same height and place in both forms. A destination is a button, or a link while it has an href; the two are drawn alike.
15 `item.container`	The destination's box: a row with the corners of a menu's item, never a capsule in the default system. Expanded, the row across the drawer's inner width, a nested one starting further in; collapsed, the same row with its label gone: the box around its icon, as tall as before and with the same corners. It carries hover, focus and press, and is filled as the active indicator while the destination is selected; the fill changes in place and never grows in width.
16 `item.icon-indicator`	The box behind the icon alone, the icon centered in it. The default system leaves it transparent; a system that marks a collapsed destination behind its glyph only (Material's) fills it there and leaves the collapsed item container clear.
17 `item.icon` · वैकल्पिक	The destination's glyph (its icon), centered on the icon column in both forms. Outlined when unselected, filled when selected.
18 `item.label`	The destination's name: beside the icon while expanded (its label, wrapping). Collapsed, no label is drawn unless collapsedLabels asks for the short label under the icon, on one line. Its label is always its accessible name.
19 `item.trailing` · वैकल्पिक	The end of an expanded row: the trailing slot's content (a glyph such as open_in_new) or else the destination's trailing text (a count such as "24", a word such as "New"), quieter than the label. Not interactive; part of the destination's description.
20 `item.badge` · वैकल्पिक	A Tanrei badge anchored to the icon in both forms, drawn from the destination's badge, badgeCount and badgeLabel: a dot or a count (the badge component).
21 `focus-ring`	Gap-then-ring indicator around the item container, shown for keyboard focus.

माप

लंबाई	टोकन	मान (px)
`container` width	`tanrei.comp.navigation-drawer.container.width`	240
`container` padding-inline	`tanrei.comp.navigation-drawer.container.padding-inline`	12

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

प्रॉपर्टी

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
`variant`	`standard` \| `modal`	`"standard"`	Standard sits beside the content and takes its width in the layout; modal lays itself over the content with a scrim and holds focus until it closes. One product uses both: standard where the window is wide enough, modal where it is not. A design system may add values. Ignored while responsive is true, when the window's width chooses.
`open`	`boolean`	`false`	Whether the drawer is shown: for a standard drawer, whether it takes its place in the layout (in the form collapsible and expanded choose); for a modal one, whether it is presented over the content (while collapsible, its collapsed column stays in the layout when it is not). While responsive is true it only says whether the drawer is shown over the content in the presentations that are modal, and every change of presentation sets it back to false.
`collapsible`	`boolean`	`false`	Gives the drawer a collapsed form, the icon column. A standard drawer then shows the form expanded chooses; a modal one shows its column in the layout while closed and widens over the content while open. While false the drawer is always expanded and lays its rows out for that form alone.
`expanded`	`boolean`	`true`	The form of a collapsible standard drawer: true for the full drawer, false for the icon column. Ignored while collapsible is false, and by a modal drawer, whose form follows open. It is the user's choice: a change of the window's width never writes it, so a responsive drawer returns to it when the window is wide again.
`collapsedLabels`	`always` \| `selected` \| `never`	`"never"`	Which cells draw their short label under the icon while the drawer is collapsed: none of them (the default: a collapsed drawer is the expanded one with its labels gone), only the selected one's, or all of them, for a product or a design system whose collapsed column is labelled. A label that is not drawn is still the destination's accessible name.
`density`	`regular` \| `compact`	`"regular"`	How much room a row takes, in a tree view's words. regular (a 48 row with a 24 glyph in the default system, a menu item's row) is the drawer of a product used by touch as well as by pointer. compact (a 32 row with a 16 glyph, a tree view's compact row) is for a tool used with a pointer whose drawer lists many places. It sets the rows, the section headings, the paddings, the glyphs, the nesting indent and the collapsed column alike — never the gap between the icon and the label — so both forms follow it; for touch a row is never lower than the touch target in either. A design system may add values.
`chevron`	`start` \| `end` \| `none`	`"start"`	Where a group's chevron is drawn, as the tree view's: start, before its icon (every row then keeps the chevron's room, so the icons of a level stand in one column); end, at the very end of the row, after its trailing content; none, no chevron — the arrow keys still open and close a group, and with a pointer a press on the group's icon does, the icon showing openIcon while the group is open (NVD-68). A collapsible drawer draws start as end, so that every icon keeps its point in both forms.
`guides`	`none` \| `shown` \| `hover`	`"none"`	Whether an open group draws a line down beside what it holds, as the tree view's: none; shown, always; hover, while the pointer is over the drawer or focus is in it, fading in and out (NVD-73).
`indent`	`number`	`null`	How much further a level's rows begin than their group's, as the tree view's: null (auto, the default) lines a row's first part (its chevron, icon or label) up with where its group's label begins, and steps by comp.navigation-drawer.item.nest-indent where the group has neither a start chevron nor an icon; a number steps by that many units of the layout at every level, 0 none (NVD-69). On the web the attribute takes auto or a number.
`highlight`	`indented` \| `full`	`"indented"`	How far the selected fill and the hover and press layers of a nested row reach, as the tree view's: indented, from where the row begins (its indent) to the end; full, across the drawer's whole inner width at every level (NVD-70).
`iconSpace`	`auto` \| `always` \| `never`	`"auto"`	Whether a row without an icon keeps the icon's room, as the tree view's: auto, where another row of its level has an icon, so that the labels of a level line up; always; never (NVD-71).
`expandable`	`boolean`	`true`	Whether groups open and close at all, as the tree view's. While false every group is shown open, draws no chevron, has no toggle and is not exposed as expandable: its row names the list of its items (NVD-72). It is not collapsible, which narrows the drawer itself.
`labelWrap`	`boolean`	`false`	Lets a row's label wrap onto more lines, as the tree view's. While false (the default) a label is one line, cut with an ellipsis, and its full text is shown in a tooltip on hover and keyboard focus wherever it is cut (NVD-75).
`supportingWrap`	`boolean`	`false`	Lets a row's supporting text wrap, as labelWrap lets its label.
`responsive`	`boolean`	`false`	Lets the window's width choose the drawer's presentation (NVD-53): beside the content where the window is wide, its collapsed column beside the content where it is narrower (while collapsible), and over the content alone where it is narrow. While true the drawer ignores variant, shows itself in a wide window whatever open says, and closes whenever the width changes its presentation.
`value`	`string`	`""`	The value of the selected destination (selection is the drawer's, by a destination's value), wherever it stands, in a section, in a group or neither. Empty selects none. The selected destination is the place the product is showing, and it is exposed as the current page: in a product whose pages are separate documents nothing is selected by a press, and each page sets value to the destination that is that page (a link's href stands as its value while it has none, NVD-59).
`revealSelected`	`boolean`	`false`	Opens the groups that hold the selected destination when the drawer first appears and whenever value changes, so that the place the product is showing is drawn and not only the closed group that holds it (NVD-58). A site's sidebar sets it; while false a closed group stays closed and its row shows the selection (NVD-47). The user may still close such a group afterwards.
`selectableGroups`	`boolean`	`false`	Lets a group be a destination as well as a row that opens and closes: a setting of the product's, off by default. While true a group that has a value or an href is a place of its own (NVD-66) — a section's overview page in a site, a folder that is shown when it is chosen — which the drawer's value selects, whose activation emits change or reselect and which an href makes a link; its chevron becomes a control of its own that opens and closes it, and the rest of its row chooses it (NVD-67). A group without either still only opens and closes. While false every group only opens and closes, whatever value or href it has.
`scrollOffset`	`number`	`0`	How far the drawer's items are scrolled from their start, in the units of the layout. The product may set it, before the drawer first appears included, and the drawer scrolls there at once; reading it gives the present distance. It is the handle by which a product keeps a long drawer where the user left it from one page to the next (NVD-61, NVD-62); the drawer stores nothing itself.
`stickyParents`	`boolean`	`false`	Keeps the rows of the open groups that the rows at the top of the drawer belong to pinned there while their items scroll under them, as the tree view's (on by default there, off here) and as VS Code's sticky scroll (NVD-77). Not applied while the drawer is collapsed.
`stickyMax`	`number`	`2`	At most how many group rows are pinned, one per level, the innermost winning, as VS Code keeps its innermost scopes (NVD-77).
`loadingLabel`	`string`	`""`	What the loading row under a group that is fetching its items says ("Loading…"), and its accessible name, as the tree view's: Tanrei ships no words of its own.
`filterable`	`boolean`	`false`	Draws a filter field above the items: what a person types there narrows the drawer to the rows whose label holds it, opening for the time being the groups that hold them, and the drawer comes back as it was when the field is emptied. Off by default: a product that filters on a server, ranks, or matches in another way leaves it off and gives the drawer the items that match, as before.
`filterValue`	`string`	`""`	The filter text: what the filter field holds. The drawer sets it when the person types and emits filterChange; the product may set it too (a filter given back when a page is rendered again). Empty, or only white space, applies no filter.
`filterLabel`	`string`	`""`	Names the filter field for assistive technology, in the product's language: what it narrows ("Filter navigation", "Filter files"). Required while filterable is true. It names this one field, so it is not one of the product's words set once.
`filterPlaceholder`	`string`	`""`	The hint the filter field shows while it is empty ("Filter"), in the product's language. Never a replacement for filterLabel. The product's: Tanrei has no words for it. Empty reads the product's words; with neither, the field shows no hint.
`filterEmptyText`	`string`	`""`	What the drawer draws at the top of the results and says while a filter is applied and no row matches ("No matches"), in the product's language. The product's: Tanrei has no words for it. Empty reads the product's words; with neither, nothing is drawn in its place and it is reported.
`filterCountText`	`string`	`""`	What the drawer draws quietly at the top of the results (NVD-90) and says to assistive technology once the result of a filter has settled (NVD-91), with {count} where the number of rows that match goes ("Matches: {count}"), in the product's language. filterCountHidden leaves it undrawn and still said. The product's: Tanrei has no words for it. Empty reads the product's words; with neither, no count is drawn or said and it is reported.
`filterCountHidden`	`boolean`	`false`	Does not draw the count at the top of the results (NVD-90); it is still said to assistive technology (NVD-91). The words for a filter that matches nothing are drawn either way. A drawer whose results are counted elsewhere on the screen, or where the rows left say enough, turns it on.
`filterClearLabel`	`string`	`""`	The accessible name of the filter field's clear button ("Clear"), in the product's language. Required while the field can hold text. Empty reads the product's words.
`filterShortcut`	`strings`	`/`	The key that moves focus to the filter field from anywhere in the window, in the keyboard shortcut component's key names, one chord (["/"], the default). While filterable is true the drawer draws it as a hint in the empty field, exposes it as the field's keyboard shortcut and answers it itself while it is shown (NVD-87); an app shell answers it for a drawer it has closed over its content (APS-33). Pressed while focus is in a field, or with a key held down, it does nothing. An empty list draws no hint and binds nothing: a product that already gives "/" another meaning sets its own chord or none.
`label`	`string`	`""`	Names the drawer for assistive technology ("Mail"): the navigation landmark on the web, and the modal drawer as a whole on every platform.

स्लॉट

स्लॉट	विवरण
`header`	Content the product puts in the header beside the first header button (a title, an account switcher); the drawer does not restyle it. Drawn only while the drawer is expanded; collapsed, its row keeps its height.

इवेंट

इवेंट	विवरण
`change`	The user activated a destination that is not the selected one, or a group that is one (NVD-66); carries its value and, for a link, its href. For a link it comes before the link is followed, only for an activation that follows it in place (NVD-60), and a product that cancels it follows the link itself.
`reselect`	The user activated the destination that is already selected; carries its value and, for a link, its href, as change does.
`close`	A modal drawer closed, or asks its controlled owner to close it: by the scrim, Escape, the platform's back action, a drag toward its edge, its menu button, or after a destination was activated.
`expandedChange`	The user asked a collapsible drawer for its other form, with its menu button or a group's cell in the collapsed drawer; carries true to expand and false to collapse. For a collapsible modal drawer, true asks it to open.
`presentationChange`	A responsive drawer decided its presentation for the first time, or the window's width changed it; carries standard (beside the content), column (its collapsed column beside the content, widening over it) or modal (over the content alone). A product shows its own menu button while the presentation is modal.
`filterChange`	The person changed the filter text — typing, deleting, pasting, dictating, an input method committing text, the clear button or Escape; carries the new text. Not emitted when the product sets filterValue. It is the product's cue to keep the text where it keeps a page's state.

आइटम

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

`destination`

One destination of the drawer: an icon, a label, optional trailing content at the end of its row and an optional badge on its icon. Collapsed, its icon alone. With an href it is a link to that address and not a button.

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
`value`	`string`	`""`	What identifies the destination. The drawer's value selects the destination whose value equals it; change and reselect carry it. Unique within the drawer. Empty on a link, its href stands as its value.
`href`	`string`	`""`	The address the destination leads to. Not empty, the destination is a link and not a button (NVD-59): it is followed as the platform follows a link, and the drawer does not select it by itself (NVD-60). Empty, the destination is a button and the product moves on change. As the Button's href (a control with a destination is a link).
`target`	`same` \| `new`	`"same"`	Where a link 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 expanded row marks with the glyph open_in_new at its end unless the product put trailing content there, and says through targetLabel (NVD-63). A link that opens elsewhere is never selected by a press (NVD-60). Ignored without href.
`targetLabel`	`string`	`""`	What assistive technology reads after the link'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.
`label`	`string`	`""`	Its name, drawn beside the icon while the drawer is expanded and always its accessible name. Required.
`supportingText`	`string`	`""`	A few words about the row ("3 new", "shared with the team"), under its label or after it (supportingPosition), quieter than the label, read as its description after its name. Empty draws none (NVD-74).
`supportingPosition`	`below` \| `inline`	`"below"`	Where the supporting text stands, as the tree view's: below, on a line of its own under the label; inline, after the label on its line (NVD-74).
`shortLabel`	`string`	`""`	What the collapsed drawer draws under the icon, on one line ("Files" for "My files"), where collapsedLabels asks for labels. Empty draws the label, truncated if it does not fit. It should be a part of the label, which stays the accessible name.
`icon`	`string`	`""`	The name of its glyph in the system's icon set, drawn in the destination's own icon style: outlined while unselected, filled while selected. Empty draws no icon; give every destination of a drawer an icon, or none, and every top-level one an icon in a collapsible drawer.
`disabled`	`boolean`	`false`	Makes it unavailable. It keeps its place, draws its disabled look, cannot be activated and leaves the focus order.
`trailingText`	`string`	`""`	Short text at the end of the expanded row, a count or a word ("24", "New"), quieter than the label. Empty draws none; the trailing slot's content, when there is any, is drawn instead.
`badge`	`boolean`	`false`	Draws a Tanrei badge (the badge component) on the icon, in both forms, from badgeCount and badgeLabel.
`badgeCount`	`number`	`null`	The badge's count, as the badge component's count: null draws the dot, 0 draws nothing, above 0 the number (above 999 as 999+). Ignored while badge is false.
`badgeLabel`	`string`	`""`	The badge's label, as the badge component's: what assistive technology reads after the destination's name and state ("3 unread"). A dot needs one. Ignored while badge is false.

स्लॉट	विवरण
`trailing`	Content at the end of the expanded row, in place of trailingText: a glyph (open_in_new for a destination that opens elsewhere), a short text. Not interactive. A count belongs in trailingText, and a badge on the icon (badge): a Badge needs an anchor, and the end of the row has none. A fixture item's content is a glyph drawn here.

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
आइटम	`tanrei-navigation-drawer-item`	`TanreiNavigationDrawerItem`	`TanreiNavigationDrawerItem`	`TanreiNavigationDrawerDestination`	`NavigationDrawerDestination`
`value` · प्रॉपर्टी	`value`	`value`	`selected`	`children`	`value`
`href` · प्रॉपर्टी	`href`	`destination`	`href`	`href`	`href`
`target` · प्रॉपर्टी	`target`	`target`	`target`	`target`	`target`
`targetLabel` · प्रॉपर्टी	`targetLabel`	`targetLabel`	`targetLabel`	`targetSemanticLabel`	`targetLabel`
`label` · प्रॉपर्टी	`label`	`title`	`label`	`label`	`label`
`supportingText` · प्रॉपर्टी	`supportingText`	`supportingText`	`supportingText`	`supportingText`	`supportingText`
`supportingPosition` · प्रॉपर्टी	`supportingPosition`	`supportingPosition`	`supportingPosition`	`supportingPosition`	`supportingPosition`
`shortLabel` · प्रॉपर्टी	`shortLabel`	`shortTitle`	`shortLabel`	`shortLabel`	`shortLabel`
`icon` · प्रॉपर्टी	`icon`	`icon`	`icon`	`icon`	`icon`
`disabled` · प्रॉपर्टी	`disabled`	`disabled`	`enabled`	`enabled`	`disabled`
`trailingText` · प्रॉपर्टी	`trailingText`	`trailingText`	`trailingText`	`trailingText`	`trailingText`
`badge` · प्रॉपर्टी	`badge`	`badge`	`badge`	`badge`	`badge`
`badgeCount` · प्रॉपर्टी	`badgeCount`	`count`	`count`	`count`	`count`
`badgeLabel` · प्रॉपर्टी	`badgeLabel`	`label`	`contentDescription`	`semanticLabel`	`label`
टिप्पणियाँ	`icon` is the glyph's name; none, no icon. `short-label`, `trailing-text`, `badge-count` and `badge-label` are attributes; the trailing slot is `trailing`. `badge` is the boolean of the icon badge; a destination's trailing text is `trailing-text`. `href` makes the destination a link: the cell is an `<a href>` in the item's shadow root. `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, all as `<tanrei-button>`'s. Space is not handled on it. With no `value` attribute the item's `value` property reads its `href` attribute as written (not the resolved URL).	`TanreiNavigationDrawerItem(_ title: String, shortTitle: String = "", icon: String? = nil, value: Value, trailingText: String = "", badge: TanreiNavigationBadge? = nil) { trailing }`, with the bar's `TanreiNavigationBadge(count:, label:)`. `disabled` follows `.disabled(_:)`. `destination: URL? = nil` makes it a SwiftUI `Link` (the link trait), opened by the environment's `openURL` after the selection callback, which an app that routes addresses itself answers with its own `OpenURLAction`; `target: TanreiLinkTarget = .same` and `targetLabel` (the accessibility hint), as the Button's.	`TanreiNavigationDrawerItem(selected, onClick, label, shortLabel = "", icon = null, trailingText = "", badge = null, enabled = true, trailing = null)`; `icon` is the glyph's name, `null` for none; `badge` is the bar's `TanreiNavigationBadge(count, contentDescription)`; `trailing` is a composable slot. `enabled` is the inverse flag. `href: String? = null` makes it a link: opened through `LocalUriHandler.current` after `onClick` (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.	`TanreiNavigationDrawerDestination(icon:, label:, shortLabel: '', trailingText: '', trailing: null, badge: null, enabled: true)`; `icon` is the glyph's name, null for none; `badge: TanreiNavigationBadge(count:, semanticLabel:)`, as the bar's; `trailing` is a widget. Its value is its index among the destinations of `children`. `href: Uri? = null` makes it a link (`Semantics(link: true)` with the address as its `linkUrl`), opened by the nearest `TanreiLinkOpener` after `onDestinationSelected`; `target` is a `TanreiLinkTarget` and `targetSemanticLabel` the semantics hint, as the Button's.	An entry of `items`: `{ value, label, shortLabel?, icon?, trailingText?, trailing?, badge?: { count?, label? }, disabled? }`, where `icon` is the glyph's name and `trailing` a React node; the badge has the navigation bar's shape. `href?: string` makes it a link (`accessibilityRole="link"`); `onValueChange` receives the value and the href, and `Linking.openURL(href)` follows it unless the product handles it; `target` is `"same" \| "new"` and `targetLabel` the `accessibilityHint`, as the Button's.

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

A group of destinations under a row that opens and closes it: an icon, a label and a chevron. It holds destinations and groups, not sections, and their rows start further in than its own. While the drawer's selectableGroups is true and it has a value or an href, it is a destination as well (NVD-66): its row chooses it and its chevron opens and closes it.

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
`label`	`string`	`""`	Its name, drawn in its row and used as the accessible name of its row and of the list of its items. Required.
`shortLabel`	`string`	`""`	What the collapsed drawer draws under its icon where collapsedLabels asks for labels; empty draws the label, as a destination's.
`icon`	`string`	`""`	The name of its glyph in the system's icon set, drawn as a destination's icon.
`openIcon`	`string`	`""`	A second glyph, drawn in the icon's place while the group is open (folder_open beside folder), as the tree view's. Ignored while icon is empty.
`supportingText`	`string`	`""`	A few words about the group ("3 new", "shared with the team"), under its label or after it (supportingPosition), quieter than the label, read as its description after its name. Empty draws none (NVD-74).
`supportingPosition`	`below` \| `inline`	`"below"`	Where the supporting text stands, as the tree view's: below, on a line of its own under the label; inline, after the label on its line (NVD-74).
`trailingText`	`string`	`""`	Short text at the end of the group's expanded row (a count), before an end chevron, as a destination's; the trailing slot's content, when there is any, is drawn instead.
`disabled`	`boolean`	`false`	Makes its row unavailable: it keeps its place and its open state, draws its disabled look, cannot be toggled and leaves the focus order. Its items keep their own disabled.
`open`	`boolean`	`false`	Whether its items are shown under its row while the drawer is expanded.
`loading`	`boolean`	`false`	Says that the product is fetching the group's items: while the group is open a loading row is drawn under it, after any items it already holds, and the list of its items is exposed as busy (NVD-76).
`value`	`string`	`""`	What identifies the group as a destination, read only while the drawer's selectableGroups is true (NVD-66): the drawer's value selects the group whose value equals it, as it selects a destination, and change and reselect carry it. Unique among the drawer's destinations and groups. Empty on a link, its href stands as its value; empty with no href, the group is not a destination and only opens and closes.
`href`	`string`	`""`	The address the group leads to as a destination, read only while the drawer's selectableGroups is true: not empty, its row is a link and not a button (NVD-59, NVD-60), opened where the person is. Ignored while selectableGroups is false.

स्लॉट	विवरण
`trailing`	Content at the end of the group's expanded row, before an end chevron, in place of trailingText: a glyph of the icon set, as a destination's trailing slot. Not interactive. A count belongs in trailingText.

इवेंट	विवरण
`toggle`	The user opened or closed the group from its row, or from its cell in the collapsed drawer, or the drawer opened it to show the selected destination (NVD-58); carries its new open state.

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
आइटम	`tanrei-navigation-drawer-group`	`TanreiNavigationDrawerGroup`	`TanreiNavigationDrawerGroup`	`TanreiNavigationDrawerGroup`	`NavigationDrawerGroup`
`label` · प्रॉपर्टी	`label`	`title`	`label`	`label`	`label`
`shortLabel` · प्रॉपर्टी	`shortLabel`	`shortTitle`	`shortLabel`	`shortLabel`	`shortLabel`
`icon` · प्रॉपर्टी	`icon`	`icon`	`icon`	`icon`	`icon`
`openIcon` · प्रॉपर्टी	`openIcon`	`openIcon`	`openIcon`	`openIcon`	`openIcon`
`supportingText` · प्रॉपर्टी	`supportingText`	`supportingText`	`supportingText`	`supportingText`	`supportingText`
`supportingPosition` · प्रॉपर्टी	`supportingPosition`	`supportingPosition`	`supportingPosition`	`supportingPosition`	`supportingPosition`
`trailingText` · प्रॉपर्टी	`trailingText`	`trailingText`	`trailingText`	`trailingText`	`trailingText`
`disabled` · प्रॉपर्टी	`disabled`	`disabled`	`enabled`	`enabled`	`disabled`
`open` · प्रॉपर्टी	`open`	`isExpanded`	`expanded`	`expanded`	`open`
`loading` · प्रॉपर्टी	`loading`	`loading`	`loading`	`loading`	`loading`
`value` · प्रॉपर्टी	`value`	`value`	`selected`	`value`	`value`
`href` · प्रॉपर्टी	`href`	`destination`	`href`	`href`	`href`
`toggle` · इवेंट	`toggle`	`isExpanded`	`onExpandedChange`	`onExpansionChanged`	`onToggle`
टिप्पणियाँ	Holds `<tanrei-navigation-drawer-item>` and `<tanrei-navigation-drawer-group>` children. Its row is a `<button aria-expanded aria-controls>` and its items a nested list labelled by it; `open` is reflected. `toggle` bubbles, with `detail.open`; the drawer's own `expandedchange` is a different event. While the drawer's `selectable-groups` is set and the group has a `value` or an `href`, its row is the destination — an `<a href>` or a `<button>` with `aria-current="page"` while selected — and its chevron a second `<button aria-expanded aria-controls>` after it, named by the group's label; a group without either keeps the one row button. The group's `value` property reads its `href` attribute while it has no `value`, as an item's does.	`TanreiNavigationDrawerGroup(_ title: String, shortTitle: String = "", icon: String? = nil, isExpanded: Binding<Bool>) { items }`, as SwiftUI's `DisclosureGroup` binds its state; toggling writes the binding. `disabled` follows `.disabled(_:)`.	`TanreiNavigationDrawerGroup(label, expanded, onExpandedChange, shortLabel = "", icon = null, enabled = true) { … }`; the row has `Modifier.semantics { expand() / collapse() }` and the expanded state. `enabled` is the inverse flag.	`TanreiNavigationDrawerGroup(label:, icon:, shortLabel: '', expanded:, onExpansionChanged:, enabled: true, children: [...])`, controlled, with `ExpansionTile`'s callback name; its row carries `Semantics(expanded:)`.	An entry `{ label, shortLabel?, icon?, disabled?, open, onToggle, groupItems: (NavigationDrawerDestination \| NavigationDrawerGroup)[] }`; its `groupItems` array tells it from a section's `items`.

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

A group of destinations and groups under an optional heading, with an optional divider before it. It is not interactive and does not nest.

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
`title`	`string`	`""`	The text that names the items under it, exposed as a heading. Empty draws no heading row.
`divider`	`boolean`	`false`	Draws a divider (the divider component) before the section, to set it apart from what is above it.

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
आइटम	`tanrei-navigation-drawer-section`	`TanreiNavigationDrawerSection`	`TanreiNavigationDrawerSection`	`TanreiNavigationDrawerSection`	`NavigationDrawerSection`
`title` · प्रॉपर्टी	`headline`	`heading`	`heading`	`heading`	`heading`
`divider` · प्रॉपर्टी	`divider`	`divider`	`divider`	`divider`	`divider`
टिप्पणियाँ	Holds `<tanrei-navigation-drawer-item>` and `<tanrei-navigation-drawer-group>` children. It draws a `<tanrei-divider>` before itself while `divider` is set, and its heading as a heading element (`role="heading"`, level 2 unless a web-only `heading-level` says otherwise).	`TanreiNavigationDrawerSection(_ heading: String = "", divider: Bool = false) { items }`, as SwiftUI's `Section`; the heading carries the header trait.	`TanreiNavigationDrawerSection(heading = "", divider = false) { … }`, a composable whose content lambda holds its items; the heading has `Modifier.semantics { heading() }` and the divider is a `TanreiDivider`.	`TanreiNavigationDrawerSection(heading: '', divider: false, children: [...])`; the heading is wrapped in `Semantics(header: true)` and the divider is a `TanreiDivider`.	An entry `{ heading?, divider?, items: (NavigationDrawerDestination \| NavigationDrawerGroup)[] }`; its `items` array tells it from a destination.

`header-button`

An icon-only Button in the header, on the icon column (a menu button): a Button of the text variant and the medium size with an icon and no label, unless the product sets otherwise, which the drawer lays out and does not restyle, resize or reshape in either form. While the drawer is collapsible the first one is its menu button.

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
`label`	`string`	`""`	Its accessible name, as the Button's label. Required.

स्लॉट	विवरण
`icon`	Its glyph, as the Button's icon slot. A fixture item's content is this glyph.

इवेंट	विवरण
`click`	The button was activated, as the Button's click.

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
आइटम	`tanrei-button`	`TanreiButton`	`TanreiButton`	`TanreiButton`	`Button`
`label` · प्रॉपर्टी	`label`	`label`	`contentDescription`	`semanticLabel`	`accessibilityLabel`
`click` · इवेंट	`click`	`action`	`onClick`	`onPressed`	`onPress`
टिप्पणियाँ	An icon-only `<tanrei-button>` child with `slot="header-button"`; the glyph is its content.	An icon-only `TanreiButton` in the `headerButtons` view builder; the drawer adds the expanded value to the first.	An icon-only `TanreiButton` in the `headerButtons` lambda; the drawer adds the expanded state to the first one's semantics.	An icon-only `TanreiButton` in `headerButtons:`; the drawer wraps the first in `Semantics(expanded:)`.	An icon-only `Button` element in `headerButtons`; the drawer adds `accessibilityState.expanded` to the first.

`main-action`

The screen's main action, below the header buttons: the Main Action Button component, whose extended the drawer sets from its own form (collapsed to its icon while the drawer is collapsed). The drawer lays it out and does not restyle it.

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
`label`	`string`	`""`	Its label, drawn while the drawer is expanded and always its accessible name, as the Main Action Button's. Required.

स्लॉट	विवरण
`icon`	Its glyph, as the Main Action Button's icon slot. A fixture item's content is this glyph.

इवेंट	विवरण
`click`	The button was activated, as the Main Action Button's click.

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
आइटम	`tanrei-main-action-button`	`TanreiMainActionButton`	`TanreiMainActionButton`	`TanreiMainActionButton`	`MainActionButton`
`label` · प्रॉपर्टी	`label`	`title`	`text`	`label`	`label`
`click` · इवेंट	`click`	`action`	`onClick`	`onPressed`	`onPress`
टिप्पणियाँ	A `<tanrei-main-action-button>` child with `slot="main-action"`; the glyph is its `icon` slot. The drawer sets its `extended` (the inverse `collapsed` attribute).	A `TanreiMainActionButton` in the `mainAction` view builder; the drawer sets its `isExtended` from its own form.	A `TanreiMainActionButton` in the `mainAction` lambda; the drawer passes its form as `expanded`.	A `TanreiMainActionButton` as `mainAction:`; the drawer sets its `isExtended` from its own form.	A `MainActionButton` element as `mainAction`; the drawer sets its `extended`.

स्टेट

व्यवहार

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

ID	आवश्यकता
`NVD-1`	WHEN the user activates a destination by pointer, touch, Enter or Space (Enter only for a destination that is a link, and for a link only an activation that NVD-60 counts) THE navigation drawer SHALL emit change exactly once with the destination's value WHILE it is not the selected destination, and reselect exactly once with its value WHILE it is.
`NVD-2`	WHILE a destination's disabled is true THE navigation drawer SHALL NOT emit change or reselect for it, SHALL NOT make it focusable and SHALL expose it as disabled to assistive technology.
`NVD-3`	THE navigation drawer SHALL draw the destination whose value equals the drawer's value, in a section, in a group or neither, from the selected parts and every other destination from the unselected parts: WHILE the drawer is expanded, from selected (comp.navigation-drawer.selected.item.container.color, comp.navigation-drawer.selected.item.icon-indicator.color, comp.navigation-drawer.selected.item.icon.color, comp.navigation-drawer.selected.item.label.color, comp.navigation-drawer.selected.item.trailing-text.color, comp.navigation-drawer.selected.item.trailing-icon.color) and unselected; WHILE it is collapsed, from collapsed-selected (comp.navigation-drawer.collapsed-selected.item.container.color, comp.navigation-drawer.collapsed-selected.item.icon-indicator.color, comp.navigation-drawer.collapsed-selected.item.icon.color, comp.navigation-drawer.collapsed-selected.item.label.color) and collapsed-unselected. IF no destination's value equals a value that is not empty THE navigation drawer SHALL draw every destination unselected, and in debug builds report the value.
`NVD-4`	WHILE a destination or a group's row is hovered, keyboard-focused or pressed THE navigation drawer SHALL render its item container, icon indicator, icon, label, trailing content 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.
`NVD-5`	WHEN a destination or a group's row receives keyboard focus THE navigation drawer SHALL show the focus ring around its item container without animation; focus gained by pointer or touch SHALL NOT show it.
`NVD-6`	THE navigation drawer SHALL make each cell (a destination's or a group's row) its hit area, across the drawer's full width inside its insets, however deep it is nested (NVD-13), and the cell's height with half of comp.navigation-drawer.container.gap.regular above and below it, in both forms, and SHALL NOT let it fall below sys.target.pointer high for a fine pointer WHILE density is regular, nor below sys.target.touch for touch; a system whose geometry gives less SHALL still extend the hit area without changing the drawn cell. WHILE density is compact, for a fine pointer the hit area SHALL be the cell and half of the gap above and below it, the one place where a cell of the drawer is lower than the pointer target (still above the 24 of WCAG 2.5.8); WHERE input is touch, or the platform cannot tell the input type, a compact cell SHALL be drawn at least sys.target.touch high, because cells whose hit areas touch cannot extend them over each other. Hover and press over any part of the hit area SHALL answer on the item container.
`NVD-7`	WHILE a destination's or a group's disabled is true THE navigation drawer SHALL render its item container, icon indicator, icon, label, trailing content and opacity from the disabled component tokens of its condition.
`NVD-8`	WHEN a destination or a group's row is pressed by pointer, touch, Enter or Space THE navigation drawer SHALL show its pressed state without delay and SHALL keep it visible for at least sys.motion.duration.press-hold, even when the press ends sooner.
`NVD-9`	WHILE a destination or a group's row is pressed THE navigation drawer SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole item container at once; ripple grows the pressed state layer, clipped to the item container, from the point of contact (from the center for keyboard activation); dim applies the pressed opacity to the whole destination and draws no state layer; none draws no answer to the press. Under ripple and dim only the item container color stays with the state under the press; icon indicator, icon, label, trailing content and opacity still come from the pressed tokens. Under none every part stays with the state under the press. The ripple grows over comp.navigation-drawer.motion.feedback-duration with comp.navigation-drawer.motion.state-easing, fades over comp.navigation-drawer.motion.state-duration with comp.navigation-drawer.motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced.
`NVD-10`	THE navigation drawer SHALL ease its item container and icon indicator corners and a modal drawer's end 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.
`NVD-11`	THE navigation drawer SHALL be comp.navigation-drawer.container.width wide while expanded and comp.navigation-drawer.collapsed.container.width.regular wide while collapsed, beside the start inset, and the full height of its parent, filled with its variant's container color (comp.navigation-drawer.container.color.standard or comp.navigation-drawer.container.color.modal), raised by its variant's elevation (comp.navigation-drawer.container.elevation.standard, comp.navigation-drawer.container.elevation.modal), with its end corners rounded by its variant's shape (comp.navigation-drawer.container.shape.standard, comp.navigation-drawer.container.shape.modal) and square start corners, and edged at its end by comp.navigation-drawer.outline.width of its variant's outline color (comp.navigation-drawer.outline.color.standard, comp.navigation-drawer.outline.color.modal); right-to-left layouts SHALL put it at the right edge, mirrored.
`NVD-12`	THE navigation drawer SHALL lay out, comp.navigation-drawer.container.padding-inline from its start and end and comp.navigation-drawer.container.padding-block from its top and bottom (measured to the first and last cell, not to their hit areas), its header (NVD-38) and then, comp.navigation-drawer.header.gap below it (at the padding WHILE the header is empty), its items in reading order: destinations, groups and sections, a section laying out its divider, its heading and its items in that order, and an open group its row and then its items; it SHALL put comp.navigation-drawer.container.gap.regular between two cells, and WHILE the items are taller than the space below the header it SHALL scroll them and keep the header in place, in both forms.
`NVD-13`	WHILE the drawer is expanded THE navigation drawer SHALL draw each destination as an item container that ends comp.navigation-drawer.container.padding-inline inside the drawer's end edge and starts comp.navigation-drawer.container.padding-inline inside its start edge, further in by the row's indent (NVD-69) WHILE highlight is indented and at that same place at every level WHILE highlight is full (NVD-70), its content starting the row's indent further in either way; comp.navigation-drawer.item.container.height.regular high unless its label's lines need more, with corners comp.navigation-drawer.item.container.shape, holding in reading order: its icon, centered on the icon column's center line (half of comp.navigation-drawer.collapsed.container.width.regular from the drawer's start edge, the row's indent further, and a chevron's room and comp.navigation-drawer.item.gap further WHILE chevron is start) and on the cell's icon line (NVD-31), with its icon indicator centered behind it and taking no space; a group's start chevron before it WHILE chevron is start (NVD-68); its label in comp.navigation-drawer.item.label.typescale.regular, comp.navigation-drawer.item.gap after the icon or the icon's room (NVD-71), or comp.navigation-drawer.item.padding-inline.regular from where the row's content starts WHILE it has neither, on one line unless labelWrap is true (NVD-75), and its supporting text (NVD-74); and its trailing content (NVD-43) at the end, before an end chevron, comp.navigation-drawer.item.gap after the label and comp.navigation-drawer.item.padding-inline.regular from the item container's end. Right-to-left layouts SHALL mirror it.
`NVD-14`	THE navigation drawer SHALL draw each icon at comp.navigation-drawer.item.icon.size.regular with the family and fill of its condition (selected for the selected destination, unselected for every other), sys.icon.weight, and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max.
`NVD-15`	WHILE a destination has trailing content (its trailingText, or its trailing slot's content) THE navigation drawer SHALL expose it as part of the destination's description, after its name, its state and its badge's description, and not as an element of its own, and SHALL keep drawing it WHILE the destination is disabled.
`NVD-16`	WHILE a section's title is not empty THE navigation drawer SHALL draw it as the section's heading in comp.navigation-drawer.heading.typescale and comp.navigation-drawer.heading.color, in a row at least comp.navigation-drawer.heading.height.regular high with the text vertically centered and starting where the destinations' labels start WHILE they have no icon (comp.navigation-drawer.item.padding-inline.regular inside the drawer's inner edge), and SHALL expose it as a heading that is not focusable; WHILE the drawer is collapsed it SHALL keep the row at its height, draw no text in it and hide it from assistive technology; WHILE the title is empty the section SHALL draw no heading row. THE navigation drawer SHALL set the heading's letter-spacing by the script of its text, as every title is set (PRS-20): no negative letter-spacing WHERE its language is Chinese, Japanese or Korean, and none WHERE its script joins its letters or stacks marks on them.
`NVD-17`	WHILE a section's divider is true THE navigation drawer SHALL draw a divider component before the section, across the drawer's inner width in either form, and leave it as the divider component draws it; IF a section holds a section, or a group holds a section, THE navigation drawer SHALL render the inner section's items in its place, and in debug builds report that sections do not nest and do not go inside a group.
`NVD-18`	WHILE variant is standard THE navigation drawer SHALL take its width in the layout, in its current form (NVD-30), WHILE open is true and no width and no presence to assistive technology or focus WHILE open is false; WHEN open changes it SHALL slide in or out while the content beside it resizes, over comp.navigation-drawer.motion.enter-duration with comp.navigation-drawer.motion.enter-easing when opening and comp.navigation-drawer.motion.exit-duration with comp.navigation-drawer.motion.exit-easing when closing, and at once where motion is reduced. A standard drawer SHALL draw no scrim, SHALL NOT keep focus inside it and SHALL NOT emit close.
`NVD-19`	WHEN open becomes true WHILE variant is modal THE navigation drawer SHALL, WHILE collapsible is false, slide in from its start edge over the content and fade its modal layer's scrim in comp.navigation-drawer.scrim.color and comp.navigation-drawer.scrim.blur in over the rest of the window in step (MDL-1, MDL-7), over comp.navigation-drawer.motion.enter-duration with comp.navigation-drawer.motion.enter-easing (at once where motion is reduced), and WHILE collapsible is true widen from its column as NVD-40 says; in both cases it SHALL move focus to the selected destination (or the group row that shows it, NVD-47) or else to its first focusable element, SHALL keep focus inside the drawer while it is open, and SHALL make everything behind it inert to pointer, touch, keyboard and assistive technology, as its modal layer does (MDL-2, MDL-3, MDL-4).
`NVD-20`	WHEN the user presses the scrim, presses Escape, uses the platform's back action (as its modal layer answers them, MDL-6), activates the menu button (NVD-37), or drags the drawer toward its start edge past half its width or flings it that way, WHILE variant is modal and open is true, THE navigation drawer SHALL close and emit close exactly once; on the web it SHALL set open to false itself, as a dialog does, and a controlled platform SHALL leave open to the caller, who sets it from close. A fling is a release faster than the platform's minimum fling velocity (Android's ViewConfiguration.getScaledMinimumFlingVelocity, Flutter's kMinFlingVelocity) or, where the platform names none (the web, SwiftUI, React Native), 0.5 points per millisecond, and the drawer follows a drag only beyond the platform's touch slop (Android's ViewConfiguration.getScaledTouchSlop, Flutter's kTouchSlop) or, where the platform names none, 8 points, as BSH-9 says for the bottom sheet. A release's velocity is the pointer's over its last moves: WHERE the pointer has not moved for longer than the time after which the platform's velocity tracker takes a pointer as stopped (40 milliseconds in Android's VelocityTracker, Jetpack Compose's VelocityTracker and Flutter's VelocityTracker) or, where the platform names none (the web, SwiftUI, React Native), 40 milliseconds before the release THE navigation drawer SHALL take the release as having no velocity, so that a drag that stops where it is wanted and is let go there is no fling, however fast it moved before it stopped.
`NVD-21`	WHEN the user activates a destination WHILE variant is modal THE navigation drawer SHALL emit change or reselect as NVD-1 says, and then close and emit close as NVD-20 says; an activation of a link that NVD-60 does not count, which opens the link somewhere else, SHALL leave the drawer open.
`NVD-22`	WHEN a modal drawer closes THE navigation drawer SHALL, WHILE collapsible is false, slide out and fade its scrim out over comp.navigation-drawer.motion.exit-duration with comp.navigation-drawer.motion.exit-easing, and WHILE collapsible is true narrow back to its column as NVD-40 says (at once where motion is reduced), and SHALL return focus to the element that had it when the drawer opened, or, WHERE that element is gone, to where the platform puts focus by default, as its modal layer does (MDL-5).
`NVD-23`	THE navigation drawer SHALL expose each destination as one element named by its label in both forms, with its selected state and its position among the items of its level, and its icon hidden: a link WHILE its href is not empty (NVD-59) and a button otherwise. On the web it is an anchor or a button inside a navigation landmark named by the drawer's label, the selected destination carrying aria-current="page"; on Apple platforms, Android, Flutter and React Native a button, or a link, with the selected state. The selected destination is the place the product is showing, in a product of one screen and in a site of many pages alike: THE navigation drawer SHALL have no second state and no second mark for a current page, and SHALL expose exactly one destination, or none, as current. It SHALL expose groups as NVD-46 says. WHILE variant is modal and open is true THE navigation drawer SHALL also be a modal dialog named by the drawer's label (the web's dialog element; the modal trait or pane title elsewhere).
`NVD-24`	WHILE a destination's label is not empty THE navigation drawer SHALL expose it as the destination's accessible name, over a name the product gives the destination on the element (aria-label or aria-labelledby); WHILE a destination's label is empty and the product gives the destination a name of its own on the element — aria-label, or aria-labelledby naming an element — THE navigation drawer SHALL expose that name as its accessible name; WHILE a destination's label is empty and the product gives it none THE navigation drawer SHALL still render it, and in debug builds report that it has no accessible name; WHILE the drawer's label is empty, variant is modal and the product gives the drawer no name of its own on the element — aria-label, or aria-labelledby naming an element — it SHALL report that the dialog has no name.
`NVD-25`	THE navigation drawer SHALL extend its container under the system insets at its start, top and bottom and SHALL place its header, destinations and sections inside them.
`NVD-26`	WHEN variant or density names a value that the active design system does not have THE navigation drawer SHALL render with that axis's default value's tokens, and in debug builds report the unknown value.
`NVD-27`	WHILE the text size is enlarged THE navigation drawer SHALL keep both its widths, grow each cell and section heading with its text in both forms alike (their heights are minimums, NVD-31), keep one-line labels, one-line supporting text and short labels on one line and cut them (NVD-75), and SHALL NOT scale its icons, icon indicators or trailing glyphs; WHERE the platform offers a large-content viewer for bar items (iOS) a long press on a collapsed destination SHALL show its icon and label enlarged.
`NVD-28`	WHEN open changes from false to true WHILE variant is standard THE navigation drawer SHALL move focus to the selected destination or else to its first focusable element, and WHEN open then changes to false while focus is inside it SHALL return focus to the element that had it when the drawer opened, or, WHERE that element is gone, to where the platform puts focus by default; Tab and Shift+Tab SHALL move focus out of an open standard drawer without closing it (a standard drawer is a layout region, not an overlay).
`NVD-29`	IF two destinations have the same value THE navigation drawer SHALL treat the first of them in reading order as the one the drawer's value selects, and in debug builds report the repeated value.
`NVD-30`	WHILE collapsible is false THE navigation drawer SHALL be expanded and ignore expanded; WHILE collapsible is true and variant is standard it SHALL be expanded WHILE expanded is true and collapsed WHILE expanded is false; WHILE collapsible is true and variant is modal it SHALL be collapsed, in the layout, WHILE open is false, and expanded over the content WHILE open is true (NVD-40), ignoring expanded.
`NVD-31`	WHILE collapsible is true THE navigation drawer SHALL give every cell the same height and the same place in both forms, so that each icon, each header button and the main action's glyph is drawn at exactly the same point expanded, collapsed and while moving between them: a cell's icon line SHALL lie below its top by the larger of half the expanded row's height (NVD-13) and comp.navigation-drawer.collapsed.item.container.padding-block.regular plus half of comp.navigation-drawer.item.icon-indicator.height.regular, and the cell SHALL reach below that line by the larger of half the expanded row's height and half of comp.navigation-drawer.item.icon-indicator.height.regular plus, WHILE collapsedLabels is not never, comp.navigation-drawer.collapsed.item.gap and one line of comp.navigation-drawer.collapsed.item.label.typescale, plus comp.navigation-drawer.collapsed.item.container.padding-block.regular; both forms SHALL center the icon on that line. A section heading's row, and the header slot's row, SHALL keep their heights in both forms. The one exception is an open group, whose items the collapsed drawer does not draw (NVD-47): the cells after it move up while the drawer collapses and back while it expands. WHILE collapsible is false a cell SHALL be the expanded row alone.
`NVD-32`	WHILE the drawer is collapsed THE navigation drawer SHALL draw only the cells that are not inside a group (top-level destinations and groups, in a section or not), each as an item container comp.navigation-drawer.collapsed.item.container.width.regular wide, centered in the icon column, with corners comp.navigation-drawer.collapsed.item.container.shape, each at most half its height, holding, comp.navigation-drawer.collapsed.item.container.padding-block.regular below its top, the icon indicator, comp.navigation-drawer.item.icon-indicator.width.regular wide and comp.navigation-drawer.item.icon-indicator.height.regular high with corners comp.navigation-drawer.item.icon-indicator.shape, its icon centered in it on the cell's icon line; and WHILE its short label is drawn (NVD-33), comp.navigation-drawer.collapsed.item.gap below the icon indicator, the short label centered on one line in comp.navigation-drawer.collapsed.item.label.typescale, truncated at its end with an ellipsis inside comp.navigation-drawer.collapsed.item.container.padding-inline, and comp.navigation-drawer.collapsed.item.container.padding-block.regular below it. It SHALL draw no trailing content. Every part is laid out in every system; a transparent color hides a part without changing the layout.
`NVD-33`	WHILE the drawer is collapsed and collapsedLabels is never THE navigation drawer SHALL draw no short label, so that a collapsed cell is its expanded row with the label and trailing content gone; WHILE it is selected it SHALL draw only the short label of the cell drawn selected (the selected destination, or the group that shows it, NVD-47); WHILE it is always it SHALL draw every cell's short label. Every destination's label SHALL remain its accessible name.
`NVD-34`	THE navigation drawer SHALL draw a collapsed cell's shortLabel, or its label WHILE shortLabel is empty, and SHALL keep its label as its accessible name in both forms; IF shortLabel is not empty and is not a part of label (ignoring case) THE navigation drawer SHALL still draw it, and in debug builds report that the visible name is not part of the accessible name.
`NVD-35`	WHEN the drawer changes form (NVD-30) THE navigation drawer SHALL, over comp.navigation-drawer.motion.expand-duration with comp.navigation-drawer.motion.expand-easing: move its end edge between comp.navigation-drawer.collapsed.container.width.regular and comp.navigation-drawer.container.width, a standard drawer's content beside it resizing with it; keep every icon, header button and the main action's glyph in place (NVD-31); change each item container between its two sizes and corners as one shape around the same icon line (WHERE the two forms give it the same height and corners, as the default system does, its end edge alone moves), and cross-fade its color and those of its icon indicator, icon and label from one form's condition to the other's; clip the expanded labels, trailing content, headings' text and the header slot at the moving edge and fade them out over the first half of the change when collapsing, and in over the second half when expanding; and fade the short labels in over the second half when collapsing, and out over the first half when expanding. It SHALL NOT stretch, reshape or recolor a header button on the way (NVD-38). WHERE motion is reduced it SHALL change form at once.
`NVD-36`	WHEN the drawer changes form THE navigation drawer SHALL keep focus where it is, and SHALL take what the collapsed form does not draw (the header slot's content, the headings' text, trailing content, the chevron of a group that is a destination, the items inside groups) out of the focus order and away from assistive technology WHILE it is collapsed; IF focus is on such content when the drawer collapses THE navigation drawer SHALL move it to the menu button (NVD-37), or else to the first focusable element of the drawer. A destination's role, name and state SHALL be the same in both forms.
`NVD-37`	WHILE collapsible is true THE navigation drawer SHALL treat its first header button as its menu button and expose it as expanded or collapsed, controlling the drawer (aria-expanded and aria-controls on the web; the expanded state elsewhere); WHEN the user activates it, after the button's own click, THE navigation drawer SHALL emit expandedChange exactly once with the form asked for (true to expand, false to collapse) WHILE variant is standard or the drawer is not open, and on the web apply it itself (expanded for a standard drawer, open for a modal one); WHILE a modal drawer is open it SHALL close as NVD-20 says instead. WHILE collapsible is true and the drawer has no header button it SHALL report in debug builds that its user cannot change its form.
`NVD-38`	THE navigation drawer SHALL lay out its header from the top: its header buttons stacked in the icon column, each centered on its center line, comp.navigation-drawer.header.item-gap apart, and each drawn as the Button it is in both forms and while the drawer moves between them: the Button's own size, shape (a circle in the default system) and colors, never stretched to a row's width, never given an item container's shape and never filled as an active indicator; WHILE expanded, the header slot's content in the first header button's row, comp.navigation-drawer.item.gap after it (from comp.navigation-drawer.container.padding-inline WHILE there is no header button), vertically centered, the row as tall as the taller of the two, the slot's box giving what it holds comp.navigation-drawer.header.typescale and comp.navigation-drawer.header.color as an inherited text style, so that plain text placed there is drawn in the system's title style and an element that sets its own style keeps it; and then the main action (NVD-39), comp.navigation-drawer.header.item-gap below. A header-button or main-action item SHALL go to the header wherever it stands among the items, and the header's content SHALL come first in reading and focus order and keep its own semantics.
`NVD-39`	WHILE the drawer holds a main-action item THE navigation drawer SHALL draw it as the Main Action Button it is, collapsed to its icon (extended false) WHILE the drawer is collapsed and extended with its label WHILE the drawer is expanded, changing with the drawer over comp.navigation-drawer.motion.expand-duration; it SHALL place the button so that the center of its glyph lies on the icon column's center line, the line the destinations' icons are centered on (NVD-13, NVD-31), in both forms, at every size of the button, in every density and design system and in either layout direction: the icon column's center line lying a chevron's room and comp.navigation-drawer.item.gap further from the start WHILE chevron is start (NVD-68): WHILE the drawer is collapsed the button's start SHALL lie half the column's width less half the button's height (the side of its collapsed square, comp.main-action-button.container.height.medium for medium, and so on) from the drawer's start edge, and WHILE it is expanded half the column's width less the button's padding before a leading glyph and half that glyph (comp.main-action-button.container.padding-inline-start-with-icon.medium and comp.main-action-button.icon.size.medium for medium, and so on), each read from the button's own tokens for its size and never measured or written as a number; WHEN the drawer changes form the button's start SHALL move between the two over comp.main-action-button.motion.resize-duration with comp.main-action-button.motion.resize-easing, the motion with which the button moves its glyph between the middle and its side (MAB-14), at once where motion is reduced. A button whose collapsed square is wider than the icon column (a large one in the default system's columns) SHALL still be placed so, reaching past the column's start edge, and in debug builds THE navigation drawer SHALL report it; a button whose glyph is trailing SHALL be placed so while collapsed and, while expanded, start where it starts collapsed, and in debug builds THE navigation drawer SHALL report that its glyph leaves the column while expanded. Its label SHALL remain its accessible name in both forms. IF the drawer holds more than one main-action item THE navigation drawer SHALL draw the first, and in debug builds report the rest.
`NVD-40`	WHILE variant is modal and collapsible is true THE navigation drawer SHALL take its column's width in the layout and draw the column as a standard drawer's (comp.navigation-drawer.container.color.standard, comp.navigation-drawer.container.elevation.standard, comp.navigation-drawer.outline.color.standard) WHILE open is false; WHEN open becomes true it SHALL widen over the content, without resizing it, from the column to comp.navigation-drawer.container.width in the modal variant's container, elevation, shape and outline, and fade its modal layer's scrim in comp.navigation-drawer.scrim.color and comp.navigation-drawer.scrim.blur in over the rest of the window (MDL-1), both over comp.navigation-drawer.motion.expand-duration with comp.navigation-drawer.motion.expand-easing, changing its parts as NVD-35 says; WHEN it closes it SHALL narrow back to the column and fade the scrim out over the same time; WHERE motion is reduced it SHALL do both at once. While it widens and while it narrows its container color, elevation, end corners and outline SHALL change between the column's and the modal variant's over the same motion, in step with its width, so that no frame changes its look at once: its first frame opening is drawn as the column at rest, and its last frame closing as the column at rest, which then stays where it is. WHEN it first appears with open true it SHALL draw itself open in its first frame, at comp.navigation-drawer.container.width over its full scrim, without widening from a column it never showed. NVD-19 to NVD-22 apply to it while it is open.
`NVD-41`	WHEN the selected destination changes THE navigation drawer SHALL change the new destination's item container to its selected color and the previous one's to its unselected color in place, each at its full size and shape throughout, and change icon, label and trailing content colors and icon fill, over comp.navigation-drawer.motion.state-duration with comp.navigation-drawer.motion.state-easing, in either form; it SHALL NOT grow, shrink, slide or otherwise resize an item container to show a selection. THE icon indicator, which the default system leaves transparent, SHALL grow in width from its center to its full width, at its full height throughout, on the new destination and fade out on the previous one, over comp.navigation-drawer.motion.selection-duration with comp.navigation-drawer.motion.selection-easing; WHILE the drawer is collapsed and collapsedLabels is selected the short labels SHALL appear and disappear over the same time without moving any cell (NVD-31); WHERE motion is reduced it SHALL show the new selection at once.
`NVD-42`	WHILE a destination's badge is true THE navigation drawer SHALL draw a Tanrei badge anchored to its icon in both forms, above the icon indicator, as the badge component draws one whose count is the destination's badgeCount and whose label is its badgeLabel, SHALL keep it while the destination is disabled, and SHALL expose the badge's description (badgeLabel, or the displayed count when it is empty) as part of the destination's own description, after its name and state.
`NVD-43`	WHILE a destination's trailing slot holds content THE navigation drawer SHALL draw it at the end of the expanded row: a glyph at comp.navigation-drawer.item.trailing-icon.size.regular in its condition's trailing icon color (comp.navigation-drawer.unselected.item.trailing-icon.color, comp.navigation-drawer.selected.item.trailing-icon.color), anything else as it draws itself; WHILE the slot is empty and trailingText is not empty it SHALL draw trailingText there, on one line and never truncated, in comp.navigation-drawer.item.trailing-text.typescale and its condition's trailing text color (comp.navigation-drawer.unselected.item.trailing-text.color, comp.navigation-drawer.selected.item.trailing-text.color); IF both are given it SHALL draw the slot's content and in debug builds report trailingText. IF the slot holds a focusable element THE navigation drawer SHALL keep it out of the focus order, and in debug builds report that trailing content is not interactive.
`NVD-44`	THE navigation drawer SHALL draw a group's row as a destination's in either form (NVD-13, NVD-32), with its icon, label and short label, its trailing content (NVD-43, a group's trailing slot and trailingText as a destination's), and its chevron where chevron puts it (NVD-68): the icon set's expand_more at comp.navigation-drawer.item.trailing-icon.size.regular in its condition's trailing icon color, turned half a turn WHILE the group is open; WHILE the group is open and the drawer expanded it SHALL draw the group's items below its row, each one's row starting one step of indent further in (NVD-69, NVD-70); WHEN open changes it SHALL reveal or hide those items, moving the cells below, and turn the chevron, over comp.navigation-drawer.motion.disclosure-duration with comp.navigation-drawer.motion.disclosure-easing, at once where motion is reduced. A group's row SHALL answer hover, focus and press, show its focus ring, and follow press-hold, pressed-feedback, corner smoothing and focus style exactly as a destination does (NVD-4 to NVD-10), from the unselected condition unless NVD-47 says otherwise.
`NVD-45`	WHEN the user activates, WHILE expandable is true and the drawer is expanded, a group's row by pointer, touch, Enter or Space and the group is not a destination (NVD-66), or activates the chevron of a group that is one (NVD-67), or the icon of a group while chevron is none (NVD-68), THE navigation drawer SHALL emit the group's toggle exactly once with its new open state, SHALL NOT emit change, reselect or close, and on the web SHALL set the group's open itself (a controlled platform leaves it to the caller); WHEN focus is on a closed group's row and the user presses the arrow key toward the end of the line (Right in a left-to-right layout) it SHALL open the group, and on an open group's row the arrow key toward the start SHALL close it; WHEN focus is on an item inside an open group and the user presses the arrow key toward the start, it SHALL move focus to that group's row. WHILE a group's disabled is true THE navigation drawer SHALL NOT emit toggle, change or reselect for it, SHALL NOT make its row or its chevron focusable and SHALL expose it as disabled.
`NVD-46`	THE navigation drawer SHALL expose a group's row as one button named by its label, with its expanded or collapsed state and its icon and chevron hidden, controlling its items, and its items as a list named by the group's label inside the drawer's list: on the web a button with aria-expanded and aria-controls and a nested list labelled by it; on Apple platforms a button whose value is expanded or collapsed, as a disclosure group reads; on Android the expanded state with the expand and collapse actions; in Flutter the expanded semantics flag; in React Native accessibilityState.expanded. WHILE a group is a destination (NVD-66) THE navigation drawer SHALL instead expose its row as that destination, as NVD-23 says (a link while it has an href and a button otherwise, named by its label, with its selected state), and its chevron as one more button, named by the group's label, with the group's expanded or collapsed state and controlling its items, which stay a list named by the group's label: on the web the row is the link or button with aria-current and the chevron a button with aria-expanded and aria-controls, each its own Tab stop, as the disclosure navigation menu with top-level links of the WAI-ARIA Authoring Practices is; on the other platforms the row carries the selected state and the chevron the expanded state with the expand and collapse actions. WHILE expandable is false, NVD-72 says instead what a group's row is. WHILE a group is closed, or the drawer collapsed, its items SHALL be neither exposed nor focusable. WHILE a group's label is not empty THE navigation drawer SHALL expose it as its row's accessible name, over a name the product gives the group on the element (aria-label or aria-labelledby); WHILE a group's label is empty and the product gives the group a name of its own on the element — aria-label, or aria-labelledby naming an element — THE navigation drawer SHALL expose that name as its row's accessible name; WHILE a group's label is empty and the product gives it none THE navigation drawer SHALL still render it, and in debug builds report that it has no accessible name.
`NVD-47`	WHILE the selected destination is inside a closed group, or inside a group WHILE the drawer is collapsed, THE navigation drawer SHALL draw the row that shows it (the outermost closed group that holds it; collapsed, its top-level group) from its form's selected condition; WHILE the drawer is collapsed it SHALL draw each top-level group as one cell and none of its items; WHEN the user activates the cell of a group that is not a destination (NVD-66) WHILE the drawer is collapsed THE navigation drawer SHALL emit expandedChange with true, and the group's toggle with true WHILE it is closed, SHALL on the web apply both itself, and SHALL move focus to the group's row once the drawer is expanded.
`NVD-48`	IF groups nest more than three levels deep THE navigation drawer SHALL still render them, indenting each level's content by comp.navigation-drawer.item.nest-indent.regular, and in debug builds report the depth.
`NVD-49`	WHILE the drawer is collapsed and a top-level destination or group has no icon THE navigation drawer SHALL still draw its cell, with an empty icon indicator and, WHERE NVD-33 draws one, its short label, and in debug builds report that a collapsible drawer needs an icon on every top-level destination and group.
`NVD-50`	THE navigation drawer 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 navigation drawer is shown THE navigation drawer SHALL draw itself for the new direction at once, without a motion of its own, keeping its expanded or collapsed form, its open state, the selected destination and its focus.
`NVD-51`	WHERE the layout direction is right-to-left THE navigation drawer SHALL draw a destination's and a group's icon 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 NVD-13 gives. THE navigation drawer 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. A group's chevron (expand_more, NVD-44) is not marked and is never mirrored; the product's own content in a trailing slot is the product's to mirror, and a header button's and the main action's glyphs are mirrored by those components (BTN-19, MAB-22).
`NVD-52`	THE navigation drawer SHALL lay out a destination's and a group's label and short label, a section's heading, a destination's trailing text and the header's text 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 navigation drawer SHALL still place each and align its lines by the layout direction, not by the text's own, and SHALL cut a short label that does not fit (NVD-32) at the end of its own direction, so that a left-to-right label in a right-to-left layout loses its right end and never its beginning.
`NVD-53`	WHILE responsive is true THE navigation drawer SHALL choose its presentation from the width of the window it is in, and SHALL ignore variant: WHILE the window is at least comp.navigation-drawer.breakpoint.expanded wide it SHALL be a standard drawer that is shown whatever open says (the standard presentation: NVD-18's place in the layout, in the form NVD-30 gives a standard drawer); WHILE the window is narrower than that, at least comp.navigation-drawer.breakpoint.collapsed wide, and collapsible is true, it SHALL be a collapsible modal drawer (the column presentation: its column in the layout, widening over the content WHILE open is true, NVD-40); and otherwise it SHALL be a modal drawer that is not collapsible (the modal presentation: nothing in the layout, shown over the content WHILE open is true, NVD-19 to NVD-22). In each presentation THE navigation drawer SHALL draw and behave exactly as the drawer whose variant and collapsible it stands for, from that variant's tokens. WHILE responsive is false THE navigation drawer SHALL NOT read the window's width.
`NVD-54`	WHEN the window's width takes a responsive drawer from one presentation to another THE navigation drawer SHALL draw the new presentation at once, without the motions of NVD-18, NVD-35 and NVD-40; SHALL enter it closed — WHERE open is true it SHALL emit close exactly once, the web setting open to false itself and a controlled platform leaving it to the caller (NVD-20); SHALL keep expanded, which only the user's request (NVD-37) and the product change, so that the standard presentation returns in the form it was left in; SHALL keep value and every group's open; and SHALL emit presentationChange exactly once with the new presentation (standard, column or modal). It SHALL also emit presentationChange exactly once WHEN the presentation is first decided. IF keyboard focus is on something the new presentation does not show THE navigation drawer SHALL move it to the menu button (NVD-37), or else to the first focusable element it still shows, and WHERE it shows nothing SHALL leave focus to the platform; focus that an open modal presentation kept inside the drawer SHALL be free to leave once the drawer is standard.
`NVD-55`	THE navigation drawer SHALL hold three things apart WHILE responsive is true: the presentation, which it derives from the window's width alone, never stores, never writes into variant, open or expanded, and exposes read-only; open, which is transient, false unless the product or the menu button has just asked, and false again after every change of presentation and every close (NVD-20, NVD-21); and expanded, the user's choice of form for the standard presentation, which THE navigation drawer SHALL NOT persist beyond its own lifetime — a product that wants the choice remembered stores what expandedChange carries and sets expanded from it. WHEN a responsive drawer first appears THE navigation drawer SHALL draw the presentation of the current width in its first frame, without motion and without emitting close; WHERE it is rendered before the width is known (a page rendered on a server) it SHALL render no modal presentation open, SHALL make nothing inert, and SHALL decide both only once the width is known.
`NVD-56`	WHILE the drawer is collapsed and a cell draws no short label (NVD-33), and WHILE it is expanded and a row's label or supporting text is cut (NVD-75), THE navigation drawer SHALL show that cell's label (and, where its supporting text is cut, its supporting text after it), WHEN the cell is hovered with a fine pointer or receives keyboard focus, as the platform shows the name of a control that is an icon alone (a plain tooltip beside the cell, toward the content, on the web and on desktop; nothing more than the large-content viewer of NVD-27 on a touch platform), and SHALL NOT add it to the cell's accessible name or description, which already hold it.
`NVD-57`	WHEN the navigation drawer first appears in the layout with a selected destination, and WHEN value changes while it is shown, THE navigation drawer SHALL bring the row that shows the selection (the selected destination, or the group's row NVD-47 names) into view: IF that row is not wholly inside the space its items scroll in THE navigation drawer SHALL scroll them so that the row is centered in that space, as far as the scroll range allows, and otherwise it SHALL NOT scroll at all, so that a drawer whose selection is already in view stays where it is from one page to the next. It SHALL do so at once, without motion, WHEN the drawer first appears in its first frame (in the order NVD-62 gives), and SHALL NOT move keyboard focus. A modal presentation is brought there WHEN it opens, by the focus NVD-19 gives.
`NVD-58`	WHILE revealSelected is true THE navigation drawer SHALL, WHEN it first appears with a selected destination and WHEN value changes to a destination, draw every closed group that holds that destination open — and, WHERE the selected destination is a group (NVD-66), that group as well, so that a site's sidebar shows the pages of the section whose page is shown — whatever its open said (a state the product gave back included, NVD-62), and SHALL emit each such group's toggle exactly once with true, the web setting the group's open itself and a controlled platform leaving its open to the caller, as NVD-45 says; WHEN the drawer first appears it SHALL draw them open in its first frame, without the motion of NVD-44, and afterwards with it. It SHALL NOT emit change, reselect or close for it, and SHALL NOT open again a group the user closes afterwards until value changes: that group's row then shows the selection (NVD-47). WHILE the drawer is collapsed it SHALL open them all the same, for the form in which they are drawn. WHILE revealSelected is false THE navigation drawer SHALL leave every group as its open says.
`NVD-59`	WHILE a destination's href is not empty THE navigation drawer SHALL make it a link to that address and not a button. On the web it SHALL be an anchor element with that address, whose behaviours are the browser's own — following it on a plain click, a touch or Enter; opening it in another tab or window by a modified click or a middle click; the link's context menu; dragging it; copying its address; showing its address on hover — and THE navigation drawer SHALL NOT prevent, replace or imitate any of them; Space SHALL NOT activate a link. On other platforms it SHALL be the platform's own link (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. THE navigation drawer SHALL draw a link exactly as it draws a button destination, from the same tokens in every state and both forms (NVD-3, NVD-4, NVD-7 to NVD-9, NVD-13, NVD-32), SHALL draw no look of its own for a link the user has visited, and SHALL give its hit area (NVD-6) to the link. WHILE a link's value is empty THE navigation drawer SHALL take its href as its value, for value, change, reselect and NVD-29. WHILE a link's disabled is true it SHALL keep the link role with the disabled state and no destination, and SHALL open nothing by any means the platform gives a link (NVD-2; on the web the anchor carries no address).
`NVD-60`	WHEN the user activates a link destination THE navigation drawer SHALL count it as an activation (NVD-1, NVD-21) only WHILE it follows the link in the place where the product is shown: a click with the primary button and no modifier key, a touch, Enter, or the default action of assistive technology, on a link whose target is same and that asks for no download. It SHALL then emit change or reselect exactly once, carrying the destination's value and its href, before the link is followed, and SHALL NOT hold the link back for sys.motion.duration.press-hold; SHALL NOT write value itself on any platform, because where the product is, is the product's to say, and the page or the route shown next sets value; and SHALL let the link be followed unless the product cancels the event (preventDefault on the web), as a product does that moves between its pages without loading a document. For every other activation of a link — a modified or a middle click, a link whose target is new, a download — THE navigation drawer SHALL emit neither change nor reselect, SHALL NOT close, and SHALL keep value and the drawn selection as they are.
`NVD-61`	THE navigation drawer SHALL hold how far its items are scrolled from their start as scrollOffset, in the units of its layout: it SHALL give the present distance whenever the product reads it, and WHEN the product sets it, before the drawer first appears included, SHALL scroll there at once and without motion, held inside the scroll range, the header staying in place (NVD-12). Scrolling by the user SHALL emit no event. WHILE the items can scroll, a scroll that reaches either end of them SHALL NOT go on to scroll what is beside or behind the drawer. WHEN a group opens or closes (NVD-44) THE navigation drawer SHALL keep that group's row where it is in view and move only the cells after it; WHEN keyboard focus moves to a cell that is not wholly in view it SHALL scroll that cell into view by the least distance that shows it whole.
`NVD-62`	THE navigation drawer SHALL treat scrollOffset and every group's open as the state of one view, as NVD-55 treats expanded: it SHALL keep neither beyond its own lifetime and SHALL write neither to any storage. A product whose pages are separate documents keeps what each group's toggle carries, and what scrollOffset reads when a page is left, and gives them back as the groups' open and the drawer's scrollOffset when the next page is rendered. WHEN the drawer first appears THE navigation drawer SHALL build its first frame in this order — every group as its open says; then the groups NVD-58 opens; then the items at scrollOffset; then the selection brought into view (NVD-57) — and SHALL draw it without the motions of NVD-41 and NVD-44 and without emitting change, reselect or close.
`NVD-63`	WHILE a destination is a link and its target is new THE navigation drawer SHALL open its href in a new context, as BTN-24 says for a link button (on the web a new tab or window that is given no handle to the page that opened it), and, WHILE the drawer is expanded and the destination has neither trailing slot content nor trailingText, SHALL draw the glyph open_in_new of the system's icon set as its trailing content, as NVD-43 draws a glyph: at comp.navigation-drawer.item.trailing-icon.size.regular, in its condition's trailing icon color (comp.navigation-drawer.unselected.item.trailing-icon.color, comp.navigation-drawer.selected.item.trailing-icon.color), through the icon helper, which mirrors it in a right-to-left layout because the icon set marks its name, and hidden from assistive technology; WHILE the product has put trailing content there THE navigation drawer SHALL draw no mark of its own. Whether a mark is drawn or not, and in both forms, it SHALL expose targetLabel as part of the destination's description, after its badge's description and its trailing content (NVD-15), 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 navigation drawer SHALL draw no mark and SHALL ignore targetLabel.
`NVD-64`	WHEN a destination's target names a value the navigation drawer does not define THE navigation drawer SHALL treat it as same, and in debug builds report the unknown value. IF a destination'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 navigation drawer SHALL make the destination a button without a destination, and in the last two cases report it in debug builds, as BTN-26 says for a button. WHILE a destination's href is empty THE navigation drawer SHALL ignore its target and targetLabel.
`NVD-65`	THE navigation drawer SHALL draw its cells, its section headings, the gaps between its cells, its nesting indent and its collapsed column from the tokens of its density: WHILE density is regular from comp.navigation-drawer.container.gap.regular, comp.navigation-drawer.item.container.height.regular, comp.navigation-drawer.item.padding-inline.regular, comp.navigation-drawer.item.padding-block.regular, comp.navigation-drawer.item.nest-indent.regular, comp.navigation-drawer.item.icon.size.regular, comp.navigation-drawer.item.icon-indicator.width.regular, comp.navigation-drawer.item.icon-indicator.height.regular, comp.navigation-drawer.item.label.typescale.regular, comp.navigation-drawer.item.trailing-icon.size.regular, comp.navigation-drawer.collapsed.container.width.regular, comp.navigation-drawer.collapsed.item.container.width.regular, comp.navigation-drawer.collapsed.item.container.padding-block.regular and comp.navigation-drawer.heading.height.regular, and WHILE density is compact from comp.navigation-drawer.container.gap.compact, comp.navigation-drawer.item.container.height.compact, comp.navigation-drawer.item.padding-inline.compact, comp.navigation-drawer.item.padding-block.compact, comp.navigation-drawer.item.nest-indent.compact, comp.navigation-drawer.item.icon.size.compact, comp.navigation-drawer.item.icon-indicator.width.compact, comp.navigation-drawer.item.icon-indicator.height.compact, comp.navigation-drawer.item.label.typescale.compact, comp.navigation-drawer.item.trailing-icon.size.compact, comp.navigation-drawer.collapsed.container.width.compact, comp.navigation-drawer.collapsed.item.container.width.compact, comp.navigation-drawer.collapsed.item.container.padding-block.compact and comp.navigation-drawer.heading.height.compact. No density SHALL change comp.navigation-drawer.item.gap, the room between the icon (or its room), the label and the trailing content, as no density changes the tree view's. Wherever another behaviour names one of these tokens by its regular value, THE navigation drawer SHALL read the value of its density instead, in both forms and while moving between them, so that every icon keeps one point in both forms (NVD-31) in each density and a nested destination's icon stands where its group's label starts in each. WHEN density changes while the drawer is shown THE navigation drawer SHALL draw the new density at once, without the motions of NVD-35, NVD-41 and NVD-44, keeping its form, its selection, every group's open, its scroll offset where the range allows, and focus, and SHALL emit nothing for it.
`NVD-66`	WHILE selectableGroups is true THE navigation drawer SHALL treat each group whose value or href is not empty as a destination as well as a group: the drawer's value SHALL select it as it selects a destination, its href standing as its value while its value is empty (NVD-59), and NVD-29 SHALL count it among the destinations in reading order, before the items it holds; its row SHALL be drawn from the selected parts in its form while it is selected (NVD-3, NVD-41) and from the parts NVD-47 names while it is not and a destination it holds is shown by it; its activation SHALL emit change or reselect as NVD-1 says and close a modal drawer as NVD-21 says; and WHILE its href is not empty its row SHALL be a link as NVD-59, NVD-60 and NVD-64 say, opened where the person is. WHILE selectableGroups is false, and for a group whose value and href are both empty, THE navigation drawer SHALL ignore the group's value and href, the group SHALL only open and close (NVD-45), and in debug builds it SHALL report once a group that has a value or an href while selectableGroups is false. WHEN selectableGroups changes while the drawer is shown THE navigation drawer SHALL draw the new form of each group at once, keeping value, every group's open and focus where the element that had it is still drawn, and SHALL emit nothing for it.
`NVD-67`	WHILE a group is a destination (NVD-66) and the drawer is expanded THE navigation drawer SHALL split its row in two: its chevron SHALL be a control of its own, which opens and closes the group as NVD-45 says and SHALL NOT change the selection, and the rest of the row SHALL be the destination, which a press, Enter or Space (Enter alone for a link) activates as NVD-1 says and which SHALL NOT open or close the group: the chevron opens and the row chooses, and one press never does both. The chevron's hit area SHALL be the part of the cell's hit area from the middle of the gap before the chevron's box to the cell's end edge, at least sys.target.pointer wide for a fine pointer and sys.target.touch wide for touch, reaching over the end of the label where the row gives less; the rest of the cell's hit area SHALL be the row's. A hover anywhere on the cell SHALL show on the item container, a press on the chevron SHALL show the pressed state on the item container as a press on the row does (NVD-8, NVD-9), and keyboard focus on the chevron SHALL show the focus ring around the chevron's own box, at the corners of the item container, and not around the row. With focus on the row the arrow keys SHALL open, close and leave the group as NVD-45 says. WHILE the drawer is collapsed the group's cell SHALL be the destination alone: its activation SHALL emit change or reselect, and SHALL NOT expand the drawer or open the group; its items are reached by expanding the drawer.
`NVD-68`	THE navigation drawer SHALL draw a group's chevron where chevron says, as the tree view does. WHILE chevron is start THE navigation drawer SHALL keep a box of comp.navigation-drawer.item.trailing-icon.size.regular at the start of every expanded row's content, comp.navigation-drawer.item.gap before its icon, the icon's room or its label, draw the chevron in it on a group's row and nothing on a destination's, so that the icons and labels of a level each stand in one column, and turn it a quarter turn from pointing toward the end of the line WHILE the group is closed to pointing down WHILE it is open. WHILE chevron is end it SHALL draw expand_more at the very end of the row, after its trailing content, turned half a turn WHILE open. WHILE chevron is none it SHALL draw no chevron and keep no room for one: the arrow keys SHALL still open and close a group (NVD-45); a press on a group's icon SHALL open and close it and choose nothing; WHILE the group is open its icon SHALL be drawn as its openIcon where it has one; a group without an icon SHALL open and close by a press anywhere on its row, unless it is a destination (NVD-66), whose row then chooses it and which the pointer cannot open or close. WHILE the drawer is collapsible THE navigation drawer SHALL draw start as end, so that every icon keeps one point in both forms (NVD-31). WHEN chevron names a value it does not define it SHALL draw start, and in debug builds report the value.
`NVD-69`	THE navigation drawer SHALL begin each row's content, and WHILE highlight is indented its item container, one step of indent further from the start than its group's row for each group that holds it, as the tree view does. WHILE indent is null (auto) a step SHALL be what the group's row draws before its label — its start chevron's room and comp.navigation-drawer.item.gap WHILE chevron is start, and its icon (or the icon's room, NVD-71) and comp.navigation-drawer.item.gap — so that a row's first part (its start chevron, its icon or its label) lines up with where its group's label begins, and comp.navigation-drawer.item.nest-indent.regular WHERE the group's row draws neither. WHILE indent is a number a step SHALL be that many units of the layout, and 0 SHALL begin every row where its group's row begins. WHILE the steps of a row's levels would begin its label past half of the drawer's width THE navigation drawer SHALL begin the row so that its label begins there, as the tree view does, so that a deep row keeps room for its name, at 200 % text too. A step SHALL NOT change a row's height, its hit area (NVD-6), which stays the drawer's width, or the collapsed form, which draws no nested row (NVD-32). WHEN indent is negative or not a number THE navigation drawer SHALL draw auto, and in debug builds report the value.
`NVD-70`	WHILE highlight is indented THE navigation drawer SHALL draw a nested row's item container — its selected fill, its hover and press layers and its focus indicator — from where the row begins (NVD-69) to the drawer's padding at its end, and WHILE highlight is full from the drawer's padding at its start to its padding at its end at every level, the content starting where the row begins either way; WHEN highlight names a value it does not define it SHALL draw indented, and in debug builds report the value.
`NVD-71`	WHILE iconSpace is auto THE navigation drawer SHALL keep an icon's room, empty, on a row without an icon WHERE another row of its level (the same group's rows, or the drawer's top-level rows) has an icon, so that the labels of the level start on one line; WHILE it is always on every row without an icon; and WHILE it is never on none, the label then starting comp.navigation-drawer.item.padding-inline.regular from where the row's content starts. The room is the icon's box and and counts toward the next level's step (NVD-69).
`NVD-72`	WHILE expandable is false THE navigation drawer SHALL draw every group open whatever its open says, draw no chevron and keep no room for one, emit no toggle, and SHALL expose no group as expandable: a group that is a destination (NVD-66) SHALL be that destination alone, and every other group's row SHALL be drawn, take no focus, answer no pointer and be hidden from assistive technology, its label naming the list of its items, which stays a list inside the drawer's list. WHILE the drawer is collapsed it SHALL still draw each top-level group as one cell, whose activation expands the drawer (NVD-47).
`NVD-73`	WHILE guides is shown THE navigation drawer SHALL draw, for each open group that shows at least one row under it while the drawer is expanded, one line comp.navigation-drawer.guide.width wide in comp.navigation-drawer.guide.color from the lower edge of the group's row to the lower edge of the last row shown under it, centred under the group's first part — its start chevron, else its icon or the icon's room, else at the start of its label — as the tree view does; WHILE guides is hover it SHALL draw the same lines only while the pointer is over the drawer or focus is in it, fading them in and out over comp.navigation-drawer.motion.state-duration with comp.navigation-drawer.motion.state-easing (at once where motion is reduced); WHILE guides is none it SHALL draw none. The lines SHALL take no space, keep their color and full opacity in every state of the rows beside them, be hidden from assistive technology, and continue under a pinned group row (NVD-77); WHILE indent is 0 no line SHALL be drawn. In forced colors they SHALL be drawn in the system's line color.
`NVD-74`	WHILE a destination's or a group's supportingText is not empty THE navigation drawer SHALL draw it in comp.navigation-drawer.item.supporting-text.typescale and its condition's supporting-text color (comp.navigation-drawer.unselected.item.supporting-text.color, comp.navigation-drawer.selected.item.supporting-text.color): WHILE supportingPosition is below on a line of its own under the label, the row growing to hold it with comp.navigation-drawer.item.padding-block.regular above and below its text, and WHILE it is inline after the label on its line, comp.navigation-drawer.item.gap after it; it SHALL be one line unless supportingWrap is true (NVD-75), SHALL be read as the row's description after its name and state, and SHALL NOT be drawn while the drawer is collapsed.
`NVD-75`	WHILE labelWrap is false THE navigation drawer SHALL draw each row's label on one line, cut with an ellipsis at the end of its own direction where it does not fit, and WHILE supportingWrap is false the same for its supporting text, below or inline; WHILE either is true that text SHALL wrap and the row grow with it. THE row's accessible name SHALL be its full label, and its description its full supporting text, whatever is drawn. WHEN a row whose label or supporting text is cut is hovered with a fine pointer, after the tooltip's show delay, or receives keyboard focus, THE navigation drawer SHALL show the full text in a plain tooltip beside the row, toward the content (NVD-56), which Escape dismisses, which stays while the pointer is over the row or focus is on it, and which SHALL NOT be shown for a row whose text is drawn whole.
`NVD-76`	WHILE an open group's loading is true THE navigation drawer SHALL draw one loading row under it, after the rows of any items it already holds, one step of indent further in (NVD-69): a Loading indicator component of the small size in the place of a row's icon, and after it loadingLabel in comp.navigation-drawer.item.supporting-text.typescale and comp.navigation-drawer.unselected.item.supporting-text.color, in a row of comp.navigation-drawer.item.container.height.regular. It is not a destination: it SHALL take no focus and answer no pointer, SHALL be counted among no items, and SHALL be named by loadingLabel; THE navigation drawer SHALL expose the list of the group's items as busy WHILE loading is true, and announce nothing itself. WHILE loadingLabel is empty it SHALL draw the indicator alone and in debug builds report that the loading row has no name.
`NVD-77`	WHILE stickyParents is true and the drawer is expanded THE navigation drawer SHALL keep pinned at the top of the space its items scroll in the rows of the open groups that hold the first row shown below the pinned rows, at most stickyMax of them, the innermost winning as VS Code keeps its innermost scopes, one per level and each directly under the one above: each pinned row SHALL be the row itself (no copy is drawn or exposed), keep its own fill, state and focus ring, stay interactive as its row is, be drawn over the rows scrolling under it on comp.navigation-drawer.sticky.container.color (a modal drawer's on its own container color), and leave as its group's last row scrolls past, as the platform's sticky position does; the last pinned row SHALL draw an edge comp.navigation-drawer.sticky.divider.width wide in comp.navigation-drawer.sticky.divider.color at its lower side. WHEN keyboard focus moves to a row hidden under the pinned rows THE navigation drawer SHALL scroll it into view below them (NVD-61's least distance, measured from their lower edge), and bring the selection into view below them (NVD-57). Nothing is animated beyond the scroll itself. WHILE the drawer is collapsed, or stickyParents is false, no row SHALL be pinned. WHEN stickyMax is not a positive whole number it SHALL pin 2, and in debug builds report the value.
`NVD-78`	WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the drawer's own host, by the attribute or by the ARIA property that reflects it, THE navigation drawer 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 the element that carries the drawer's role — its dialog WHILE it is shown as a modal dialog (NVD-23), its navigation landmark otherwise — an id reference by the elements it names in the host's tree or a tree around it, a description after its own; WHILE label is not empty, label is the drawer's name, over a name given so; WHILE label is empty, a name given so is the drawer's name. WHEN the product sets an aria- attribute on an item's host — a destination's or a group's — THE navigation drawer 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 the element that carries the row's role (its link or its button), in both forms of the drawer — an id reference by the elements it names in the host's tree or a tree around it, an error message as part of the description while the item is invalid — except those an item owns (aria-current, aria-disabled, and for a group aria-expanded and aria-controls), which it SHALL move and not expose. WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE navigation drawer SHALL take it off that element. WHEN the product sets an aria- attribute an item owns THE navigation drawer SHALL report it in debug builds.
`NVD-79`	WHILE filterable is true and the drawer is expanded THE navigation drawer SHALL draw a filter field after its header (NVD-38: its header buttons, its header slot and its main action) and comp.navigation-drawer.header.gap below it (at the padding WHILE the header is empty), across the drawer's width inside comp.navigation-drawer.container.padding-inline, and SHALL lay out what stands under the field — the status line of NVD-90 while there is one, then the items — comp.navigation-drawer.filter.gap below it; the field SHALL stay in place while the items scroll, as the header does (NVD-12). The field SHALL be a Text input component of type search in its default variant, of the medium size WHILE density is regular and the small size WHILE density is compact, showing the glyph search of the system's icon set in its leading-icon slot, filterPlaceholder as its placeholder and filterValue as its value, drawn and answering as that text input draws and answers (its own sentences hold, its tokens are its own). WHILE the drawer is collapsed it SHALL draw no field, SHALL keep filterValue, and SHALL draw its cells as though no filter were applied; WHEN it is expanded again the filter SHALL apply again.
`NVD-80`	WHEN the person changes the filter field's text — by typing, deleting, pasting, cutting, dictating, an input method committing text, the clear button (NVD-89) or Escape (NVD-86) — THE navigation drawer SHALL emit filterChange exactly once per change with the new text, setting filterValue itself first on the web (a controlled platform leaves filterValue to the caller), and SHALL apply the filter to the new text at once. WHEN the product sets filterValue THE navigation drawer SHALL show that text in the field and apply it, and SHALL NOT emit filterChange. WHILE an input method is composing THE navigation drawer SHALL filter by the text the field reports, and SHALL leave the composition, Enter, Escape and the arrow keys to the input method (TXI-4).
`NVD-81`	THE navigation drawer SHALL apply a filter WHILE filterable is true and filterValue holds a character that is not white space, and SHALL read the filter text as words: the runs of characters between white space. A destination or a group SHALL match WHILE its label contains every word, each anywhere in it and in any order, compared without regard to case, to the width of a character or to the marks on a letter, as the label's language compares (as the combobox compares, CMB-25). THE navigation drawer SHALL compare nothing else of a row — not its short label, its supporting text, its trailing text, its badge, its value or its href — and not a section's title. A disabled row SHALL match as any other row and stay disabled. It SHALL match only the items it holds: the items of a group that loads them when it opens (NVD-76) are not searched until they are given. THE navigation drawer SHALL NOT fetch, wait, debounce, rank or reorder anything for a filter.
`NVD-82`	WHILE a filter is applied THE navigation drawer SHALL show, in the order given: each row that matches; each group's row that holds a row that matches, at any depth; and every item inside a group whose own row matches, so that a group found by its name is shown whole. Every other row SHALL be hidden — not drawn, taking no space, not focusable and not exposed to assistive technology — together with what it holds. A section with no row shown SHALL be hidden with its heading and its divider; a section with a row shown SHALL keep both. A hidden row SHALL keep its open, its disabled state and its selection, and WHEN no filter is applied any more every row SHALL be shown as it was.
`NVD-84`	WHILE a filter is applied THE navigation drawer SHALL draw open, for the filter, each closed group that holds a row that matches and is shown, at any depth, so that every match is in view without the person opening anything, and SHALL draw every other group as its open says. Opening a group for the filter SHALL write nothing to the group's open, SHALL emit no toggle, and SHALL be drawn at once, without the motion of NVD-44; the group's row SHALL be exposed as expanded while it is drawn open. WHEN the person opens or closes a group while a filter is applied THE navigation drawer SHALL answer as NVD-45 says — setting open itself on the web and emitting toggle exactly once where open changes — and SHALL stop opening that group for the filter until the filter text changes. WHEN no filter is applied any more THE navigation drawer SHALL draw every group as its open says: the groups the filter opened close again, at once, and a group the person opened or closed stays as the person left it.
`NVD-85`	WHILE a filter is applied THE navigation drawer SHALL draw each row it shows as it draws that row without a filter, and SHALL NOT mark, in a label, the characters that a word of the filter text matched: no color, weight, fill or element of their own. What the filter leaves is the answer, as in a file tree's filter and a site's sidebar filter; a row SHALL be told from the others only by its own states — selected, disabled, hovered, pressed and focused — and as the active match (NVD-86). THE navigation drawer SHALL expose each label to assistive technology as the one text it is without a filter.
`NVD-86`	WHILE keyboard focus is in the filter field, a filter is applied and a row shown matches and is not disabled, THE navigation drawer SHALL make the first such row, in reading order, the active match — as soon as there is one, and the new first one whenever the result changes — and SHALL draw it as it draws that row while the row has keyboard focus, its focused tokens and its focus ring (NVD-10), without animation, while focus stays in the field, so that typing goes on editing the filter text; a pointer over a row SHALL NOT make it the active match, and WHILE focus is not in the field no row SHALL be drawn as one. WHILE no input method is composing, WHEN the person presses Enter THE navigation drawer SHALL take the active match as Enter on that row takes it — a destination activated (NVD-1, NVD-60), a group's row opened or closed (NVD-45) — and SHALL keep focus in the field unless the activation moves it (a link followed, a modal drawer closed, NVD-21); WHEN the person presses Down Arrow THE navigation drawer SHALL move focus to the active match and do nothing more. WHILE there is no active match the two keys SHALL do nothing of the drawer's own. WHEN the person presses Escape WHILE the field holds text THE navigation drawer SHALL empty it, emit filterChange once with the empty text, and keep focus in the field, as a native search field does; WHEN the person presses Escape WHILE the field is empty THE navigation drawer SHALL return focus to the element that had it before the filter shortcut moved it to the field (NVD-87), and otherwise SHALL do nothing of its own and let the key pass on, so that a modal drawer closes (NVD-20). Up Arrow, Home, End and the arrow keys along the line SHALL stay the field's.
`NVD-87`	WHILE filterable is true and filterShortcut holds exactly one chord THE navigation drawer SHALL draw that chord at the end of the filter field with the keyboard shortcut component, hosted as KBS-13 says — in its plain form, at size small, with convention auto, its legends and separators in comp.navigation-drawer.filter.shortcut.typescale and comp.navigation-drawer.filter.shortcut.color, and no cap, fill or edge (KBS-7) — only while the field is empty and does not have focus, SHALL expose it as the field's keyboard shortcut (KBS-12: aria-keyshortcuts on the web) with the drawn keys hidden from assistive technology, and SHALL give the hint no press of its own. WHEN the person presses that chord anywhere in the window, read as SRC-38 reads a chord and with its exceptions (a press something else has taken, a key repeating while held, an input-method composition and, for a chord without mod, ctrl or alt, focus in an element that takes text), THE navigation drawer SHALL keep the press from doing anything else and SHALL: WHILE it is expanded and shown, move focus to the field with its text selected; WHILE it is collapsed (a collapsible standard drawer, or the column of a collapsible modal drawer), emit expandedChange with true, apply it itself on the web as NVD-37 does, and move focus to the field once it is expanded. WHILE it is not shown (a standard drawer whose open is false, or a modal drawer that is closed and not collapsible) it SHALL NOT take the press: what opens it is the product's, or the app shell's (APS-33). THE navigation drawer SHALL listen only while it is part of what is shown and filterable is true, and SHALL stop when it is removed. IF another shown navigation drawer, tree view or search binds the same chord, the one shown first SHALL keep it and the others SHALL bind nothing and report it in debug builds, as SRC-39 says. WHILE filterShortcut is empty or holds more than one chord THE navigation drawer SHALL draw no hint and bind nothing, reporting more than one chord in debug builds.
`NVD-88`	WHEN the product asks the navigation drawer to focus its filter (the platform's method for it) WHILE filterable is true THE navigation drawer SHALL do what its chord does (NVD-87), whether or not filterShortcut is empty; WHILE it is a modal drawer that is closed it SHALL instead move focus to the field the next time it opens, in place of the destination NVD-19 would give focus to — so that an app shell, or a key of the product's own, can open the drawer and land in its field.
`NVD-89`	WHILE the filter field holds text THE navigation drawer SHALL draw, in the field's trailing-icon slot, an icon-only Tanrei Button of the text variant and the small size showing the glyph close of the system's icon set, not mirrored, named by filterClearLabel. WHEN it is activated THE navigation drawer SHALL empty the field, emit filterChange once with the empty text, and move focus to the field. WHILE filterClearLabel is empty and the product's words give none THE navigation drawer SHALL still draw the button, and in debug builds report that it has no accessible name. The hint of NVD-87 and the clear button SHALL never be drawn together.
`NVD-90`	WHILE a filter is applied THE navigation drawer SHALL draw a status line at the top of the results, where its first item would stand, the items following it: filterCountText with its place {count} filled by the number of rows that match WHILE a row matches and filterCountHidden is false, and filterEmptyText WHILE no row matches, in place of the items, all of them hidden. It SHALL draw the line in comp.navigation-drawer.filter.status.typescale and comp.navigation-drawer.filter.status.color, inset as a row's content is (comp.navigation-drawer.item.padding-inline.regular for regular and comp.navigation-drawer.item.padding-inline.compact for compact), wrapping and growing with enlarged text, as text of its own direction (NVD-52), taking no focus and no state, and hidden from assistive technology, which NVD-91 tells the same words. WHILE a row matches and filterCountHidden is true it SHALL draw no line. WHILE the words it would draw are empty and the product's words give none THE navigation drawer SHALL draw nothing in their place and in debug builds report it.
`NVD-91`	WHEN the result of a filter changes — the filter text or the items change while a filter is applied — and has then stayed as it is for one second (the pause that ends a type-ahead run, TRV-23), THE navigation drawer SHALL tell assistive technology once, politely and without moving focus, filterCountText with its place {count} filled by the number of rows that match, or filterEmptyText WHILE no row matches; WHEN no filter is applied any more it SHALL say nothing. It SHALL say them whether or not filterCountHidden is true, through one status of its own that is not drawn (the line of NVD-90 is what is drawn) — on the web an element with the status role and aria-atomic true, inside the drawer — and never through the field's name or description. WHILE filterCountText is empty and the product's words give none THE navigation drawer SHALL say no count and in debug builds report it.
`NVD-92`	THE navigation drawer SHALL change nothing but what it draws for a filter: value, expanded, open, every group's open (except where the person opens or closes one, NVD-84) and the distance scrollOffset measures SHALL stay as they were, and it SHALL keep filterValue no longer than its own lifetime and write it to no storage, as NVD-62 says of a group's open. WHEN a filter begins to be applied THE navigation drawer SHALL remember how far its items are scrolled, and WHEN the filter text changes while a filter is applied it SHALL scroll its items to their start; WHEN no filter is applied any more it SHALL, WHILE keyboard focus is on a row, keep that row where it is in the view as far as the scrolling allows, and otherwise scroll back to where the items stood when the filter began. A selected destination that the filter hides SHALL stay selected and SHALL be brought into view (NVD-57) only once it is shown again.
`NVD-93`	WHEN a filter comes to hide the row that has keyboard focus (the product sets filterValue, or changes the items) THE navigation drawer SHALL move focus to the filter field. WHILE a filter is applied and keyboard focus is on a destination, a group's row or a group's chevron, WHEN the person presses Escape THE navigation drawer SHALL, WHILE variant is standard, open, as the person would (open set and toggle emitted for each, NVD-45), the groups the filter had opened around that row, so that it stays shown, then empty the filter as NVD-86 does and keep focus on that row, which NVD-92 keeps in view, so that a person who found a place by the filter sees it among its neighbours; WHILE the drawer is modal, Escape SHALL close it as NVD-20 says and leave the filter as it is.
`NVD-94`	THE navigation drawer SHALL draw every change a filter makes — rows hidden and shown, groups opened for the filter and closed again — at once, without the motions of NVD-41 and NVD-44, whether or not motion is reduced; a group the person opens or closes during a filter moves as NVD-44 says.
`NVD-95`	THE navigation drawer SHALL expose the filter field as a search field — on the web an input of type search, which has the searchbox role — named by filterLabel, with filterPlaceholder as its placeholder, controlling the drawer's list of items (aria-controls on the web), after the header and before the items in reading and focus order; each shown destination and group with its position among the shown items of its level and their number, so that a person is told the size of what the filter left; and the rows the filter hides not at all. WHILE filterable is true and filterLabel is empty THE navigation drawer SHALL still draw the field, and in debug builds report that it has no accessible name.

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

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

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
कंपोनेंट	`tanrei-navigation-drawer`	`TanreiNavigationDrawer`	`TanreiNavigationDrawer`	`TanreiNavigationDrawer`	`NavigationDrawer`
`variant` · प्रॉपर्टी	`variant`	`variant`	`variant`	`variant`	`variant`
`open` · प्रॉपर्टी	`open`	`isPresented`	`drawerState`	`open`	`open`
`collapsible` · प्रॉपर्टी	`collapsible`	`isCollapsible`	`collapsible`	`collapsible`	`collapsible`
`expanded` · प्रॉपर्टी	`expanded`	`isExpanded`	`expanded`	`extended`	`expanded`
`collapsedLabels` · प्रॉपर्टी	`collapsedLabels`	`collapsedLabelVisibility`	`collapsedLabelVisibility`	`labelType`	`collapsedLabelVisibility`
`density` · प्रॉपर्टी	`density`	`density`	`density`	`density`	`density`
`chevron` · प्रॉपर्टी	`chevron`	`chevron`	`chevron`	`chevron`	`chevron`
`guides` · प्रॉपर्टी	`guides`	`guides`	`guides`	`guides`	`guides`
`indent` · प्रॉपर्टी	`indent`	`indent`	`indent`	`indent`	`indent`
`highlight` · प्रॉपर्टी	`highlight`	`highlight`	`highlight`	`highlight`	`highlight`
`iconSpace` · प्रॉपर्टी	`iconSpace`	`iconSpace`	`iconSpace`	`iconSpace`	`iconSpace`
`expandable` · प्रॉपर्टी	`expandable`	`expandable`	`expandable`	`expandable`	`expandable`
`labelWrap` · प्रॉपर्टी	`labelWrap`	`labelWrap`	`labelWrap`	`labelWrap`	`labelWrap`
`supportingWrap` · प्रॉपर्टी	`supportingWrap`	`supportingWrap`	`supportingWrap`	`supportingWrap`	`supportingWrap`
`responsive` · प्रॉपर्टी	`responsive`	`isResponsive`	`responsive`	`responsive`	`responsive`
`value` · प्रॉपर्टी	`value`	`selection`	`selected`	`selectedIndex`	`value`
`revealSelected` · प्रॉपर्टी	`revealSelected`	`revealsSelection`	`revealSelected`	`revealSelected`	`revealSelected`
`selectableGroups` · प्रॉपर्टी	`selectableGroups`	`selectableGroups`	`selectableGroups`	`selectableGroups`	`selectableGroups`
`scrollOffset` · प्रॉपर्टी	`scrollOffset`	`scrollOffset`	`scrollState`	`scrollController`	`scrollOffset`
`stickyParents` · प्रॉपर्टी	`stickyParents`	`stickyParents`	`stickyParents`	`stickyParents`	`stickyParents`
`stickyMax` · प्रॉपर्टी	`stickyMax`	`stickyMax`	`stickyMax`	`stickyMax`	`stickyMax`
`loadingLabel` · प्रॉपर्टी	`loadingLabel`	`loadingLabel`	`loadingLabel`	`loadingLabel`	`loadingLabel`
`filterable` · प्रॉपर्टी	`filterable`	`isFilterable`	`filterable`	`filterable`	`filterable`
`filterValue` · प्रॉपर्टी	`filterValue`	`filterText`	`filterValue`	`filterValue`	`filterValue`
`filterLabel` · प्रॉपर्टी	`filterLabel`	`filterLabel`	`filterLabel`	`filterLabel`	`filterLabel`
`filterPlaceholder` · प्रॉपर्टी	`filterPlaceholder`	`filterPrompt`	`filterPlaceholder`	`filterPlaceholder`	`filterPlaceholder`
`filterEmptyText` · प्रॉपर्टी	`filterEmptyText`	`filterEmptyText`	`filterEmptyText`	`filterEmptyText`	`filterEmptyText`
`filterCountText` · प्रॉपर्टी	`filterCountText`	`filterCountText`	`filterCountText`	`filterCountText`	`filterCountText`
`filterCountHidden` · प्रॉपर्टी	`filterCountHidden`	`isFilterCountHidden`	`filterCountHidden`	`filterCountHidden`	`filterCountHidden`
`filterClearLabel` · प्रॉपर्टी	`filterClearLabel`	`filterClearLabel`	`filterClearLabel`	`filterClearLabel`	`filterClearLabel`
`filterShortcut` · प्रॉपर्टी	`filterShortcut`	`filterShortcut`	`filterShortcut`	`filterShortcut`	`filterShortcut`
`label` · प्रॉपर्टी	`label`	`accessibilityLabel`	`contentDescription`	`semanticLabel`	`accessibilityLabel`
`change` · इवेंट	`change`	`selection`	`onClick`	`onDestinationSelected`	`onValueChange`
`reselect` · इवेंट	`reselect`	`onReselect`	`onClick`	`onDestinationSelected`	`onReselect`
`close` · इवेंट	`close`	`isPresented`	`drawerState`	`onClose`	`onClose`
`expandedChange` · इवेंट	`expandedchange`	`isExpanded`	`onExpandedChange`	`onExtendedChanged`	`onExpandedChange`
`presentationChange` · इवेंट	`presentationchange`	`onPresentationChange`	`onPresentationChange`	`onPresentationChanged`	`onPresentationChange`
`filterChange` · इवेंट	`filterchange`	`filterText`	`onFilterValueChange`	`onFilterChanged`	`onFilterChange`
टिप्पणियाँ	Children are `<tanrei-navigation-drawer-item>`, `<tanrei-navigation-drawer-group>` and `<tanrei-navigation-drawer-section>` elements, in order; header buttons (icon-only `<tanrei-button>`s) and the main action (`<tanrei-main-action-button>`) are children with `slot="header-button"` and `slot="main-action"`, and the header slot is `header`. `collapsedLabels` is the `collapsed-labels` attribute; `expanded` is reflected, and so is a read-only `collapsed` state attribute for styling. Modal: a `<dialog>` in the shadow root opened with `showModal()`, its `::backdrop` the scrim; Escape and a press on the backdrop close it, the host sets `open` to false and fires `close`; a collapsible modal drawer keeps its column in the host's layout box and widens the dialog from it. Standard: a `<nav>` named by `label`. The drawer selects the activated destination itself (sets `value`) before firing `change`, sets `expanded` (or `open`) before firing `expandedchange`, and sets a group's `open` before the group fires `toggle`. It sets `aria-expanded` and `aria-controls` on its first header button's inner button through the Button's `ariaExpanded` / `ariaControlsElements` element properties, and the Main Action Button's `extended` from its own form. `responsive` is an attribute: the element reads its system's `breakpoint.expanded` and `breakpoint.collapsed` custom properties from its computed style, listens to the two widths with `matchMedia`, exposes the result as the read-only `presentation` property (reflected as a state attribute for styling) and fires `presentationchange` with `detail.presentation`; nothing about the presentation is written to `variant`, `open` or `expanded`, and nothing is kept in storage. Before the element is upgraded, and in the React wrapper on a server, no dialog is open and nothing is inert. A collapsed cell that draws no label shows its name in a plain tooltip. Insets are `env(safe-area-inset-*)`. It lags the spec: it ships an earlier form of the drawer, with a separate rail element beside it. It does not yet follow NVD-57 to NVD-64, nor the parts of NVD-1, NVD-21 and NVD-23 that go with them. `reveal-selected` is an attribute. `scroll-offset` is an attribute read once, for the first frame, and `scrollOffset` a property whose getter returns the scroller's present `scrollTop` and whose setter writes it; the scroller has `overscroll-behavior: contain` and `scroll-behavior: auto`, and bringing the selection into view is a write to `scrollTop`, never `scrollIntoView` (which would also scroll the page). For a link destination `change` and `reselect` are cancelable, carry `detail.href` beside `detail.value`, and are fired from the anchor's `click` only when `event.button` is 0, no modifier key is down, the click was not already cancelled, and the item's `target` is `same` and it has no `download`; cancelling one calls `preventDefault()` on that click. The drawer does not set `value` for a link. Nothing is read from or written to `sessionStorage` or `localStorage`: a site keeps the groups' `open` and `scrollOffset` itself (on `toggle` and on `pagehide`) and writes them back as attributes in the page's markup, or in an inline script placed after the drawer's markup, before the elements are upgraded. `density` is reflected; a value a design system added is read from its own tokens, falling back to regular's. `selectableGroups` is the `selectable-groups` attribute. The attributes are `chevron`, `guides`, `indent` (auto or a number), `highlight`, `icon-space`, `expandable` (`expandable="false"` turns it off), `label-wrap`, `supporting-wrap`, `sticky-parents`, `sticky-max` and `loading-label`; on the items `supporting-text`, `supporting-position`, and on a group `open-icon`, `trailing-text`, `loading` and the `trailing` slot. Filter (NVD-79 to NVD-95): the attributes are filterable, filter-value, filter-label, filter-placeholder, filter-empty-text, filter-count-text, filter-count-hidden, filter-clear-label and filter-shortcut (a space-separated list of chords); filterchange carries detail.value. The field is a `<tanrei-text-input type="search" variant="stacked">` in the shadow root between the header and the items (part `filter`), its leading glyph and its clear button (a `<tanrei-button>`) slotted into it; the drawer sets aria-controls (the drawer's list, through ariaControlsElements) and aria-keyshortcuts on its native input. The status line (part `filter-status`) stands first in the list of items, hidden from assistive technology; the status is a visually hidden element with role="status" and aria-atomic="true" in the shadow root. A row the filter hides takes `display: none` from a state attribute it writes on its own host (`data-filter-hidden`), a section with no row shown likewise, and a group opened for the filter draws its items open without writing `open`. The active match is drawn by a state attribute on its host (`data-filter-active`). `focusFilter()` is the method of NVD-88. The chord is read as the search reads its own (SRC-38), and the drawer, the search and the tree view share one registry of the chords that are bound (SRC-39).	`TanreiNavigationDrawer(variant:, isPresented: Binding<Bool>, selection: Binding<Value>, isCollapsible:, isExpanded: Binding<Bool>, collapsedLabelVisibility:, onReselect:) { TanreiNavigationDrawerItem(…); TanreiNavigationDrawerGroup(…) { … }; TanreiNavigationDrawerSection(…) { … } } header: { … } headerButtons: { … } mainAction: { … }`, and for a modal drawer the modifier `.tanreiNavigationDrawer(isPresented:…)` on the content it covers. Closing writes `false` to `isPresented` (close); the menu button writes `isExpanded` (expandedChange). The modal drawer carries the modal trait and answers the escape gesture (`accessibilityAction(.escape)`). It lags the spec: it ships an earlier form of the drawer (no collapsed form, groups or trailing slot; its `badge:` string is the trailing text), with a separate rail component beside it. Not built on this platform yet: the 48 row with the menu item's corners in both forms, a collapsed cell that is the row without its label (`collapsedLabels` defaults to never), nested rows whose content alone starts further in while their item containers keep the full width (NVD-13), the header slot's inherited text style and color (NVD-38), a selection that changes color in place, and `responsive` with its event (NVD-53 to NVD-55): the width comes from a `GeometryReader` on the window's scene, or `horizontalSizeClass` where the product prefers Apple's own classes; `onPresentationChange` is a closure. Also not built yet (NVD-57 to NVD-64): `revealsSelection: Bool`, and `scrollOffset: Binding<CGFloat>` over the items' `ScrollView` (a `ScrollPosition` where the deployment target has it), which the product may keep in `@SceneStorage`. Not yet: the heading's letter-spacing by the script of its text (NVD-16, PRS-20). Not built yet: density (NVD-65), a `density` parameter as the tree view's on this platform; and this platform's drawer still reads the tokens that the density axis made per density (the row height, paddings, gap, nesting indent, icon sizes, label style, the collapsed column and the heading height), each now one value per density in the generated tokens, so it does not build against them until it catches up. Not built yet: selectableGroups (NVD-66, NVD-67) — a group that is a destination, with its row choosing it and its chevron a control of its own that opens and closes it. Not built yet: the row model shared with the tree view (chevron, guides, indent, highlight, iconSpace, expandable, labelWrap and supportingWrap, supporting text, one-line labels with a tooltip where cut, a group's trailing content, openIcon and loading row, stickyParents and stickyMax; NVD-68 to NVD-77). Filter (NVD-79 to NVD-95), not built yet: `filterText: Binding<String>`; the chord is a `.keyboardShortcut` on hardware keyboards; the status is an `AccessibilityNotification.Announcement` with the polite priority; `focusFilter()` is a `FocusState` the product can set.	Compose idiom (as `ModalNavigationDrawer` and `DismissibleNavigationDrawer`, and Material 3 Expressive's `WideNavigationRail` for the collapsed form): `TanreiNavigationDrawer(variant, drawerState, collapsible, expanded, onExpandedChange, collapsedLabelVisibility, header = { … }, headerButtons = { … }, mainAction = { … }, drawerContent = { TanreiNavigationDrawerItem(…); TanreiNavigationDrawerGroup(…) { … }; TanreiNavigationDrawerSection(…) { … } }, content = { … })`. `drawerState` (`rememberTanreiDrawerState`) is open or closed; the drawer closes it itself on the scrim, back and drag, and its `confirmValueChange` sees the close. As for the bar, the drawer's `value` and a destination's `value` both map to the item's `selected`, and one `onClick` covers change and reselect. The modal sheet sets a pane title from `contentDescription` and is drawn in a window of its own (a `Dialog`), as `TanreiDialog` is, which traps focus, handles back and hides the content behind from TalkBack. It lags the spec: it ships an earlier form of the drawer, with a separate rail component beside it. Not built on this platform yet: the 48 row with the menu item's corners in both forms, a collapsed cell that is the row without its label (`collapsedLabels` defaults to never), nested rows whose content alone starts further in while their item containers keep the full width (NVD-13), the header slot's inherited text style and color (NVD-38), a selection that changes color in place, and `responsive` with its event (NVD-53 to NVD-55): the width comes from `LocalWindowInfo.current.containerSize` (or `currentWindowAdaptiveInfo()` where the product has it); `onPresentationChange` is a lambda and `drawerState` is closed by the drawer when the presentation changes. Also not built yet (NVD-57 to NVD-64): `revealSelected: Boolean`, and a hoisted `scrollState: ScrollState = rememberScrollState()`, which is saved and restored by `rememberSaveable` as any scroll state is; the drawer writes nothing itself. Not yet: the heading's letter-spacing by the script of its text (NVD-16, PRS-20). Not built yet: density (NVD-65), a `density` parameter as the tree view's on this platform; and this platform's drawer still reads the tokens that the density axis made per density (the row height, paddings, gap, nesting indent, icon sizes, label style, the collapsed column and the heading height), each now one value per density in the generated tokens, so it does not build against them until it catches up. Not built yet: selectableGroups (NVD-66, NVD-67) — a group that is a destination, with its row choosing it and its chevron a control of its own that opens and closes it. Not built yet: the row model shared with the tree view (chevron, guides, indent, highlight, iconSpace, expandable, labelWrap and supportingWrap, supporting text, one-line labels with a tooltip where cut, a group's trailing content, openIcon and loading row, stickyParents and stickyMax; NVD-68 to NVD-77). Filter (NVD-79 to NVD-95), not built yet: `filterValue` with `onFilterValueChange`; the status is a polite `liveRegion` node; the chord is read from hardware keys (`onPreviewKeyEvent`); `focusFilter` is a `FocusRequester` in the drawer's state.	Flutter idiom (as `NavigationDrawer`, with the rail widget's `extended` and `labelType` for the collapsed form): `TanreiNavigationDrawer(variant:, collapsible:, extended:, onExtendedChanged:, labelType:, selectedIndex:, onDestinationSelected:, headerButtons: [...], mainAction:, header:, children: [TanreiNavigationDrawerDestination(…), TanreiNavigationDrawerGroup(…), TanreiNavigationDrawerSection(…), …])`. A destination's value is its index among the destinations, counted in reading order through sections and groups, open or not, as `NavigationDrawer` counts its destinations. `labelType` is `all`, `selected` or `none`. `open` shows or hides the drawer in both variants. A modal drawer is a controlled overlay in a `Stack` over the page — not `Scaffold.drawer`, which would need Material — with its own scrim and motion, a `FocusScope` that keeps focus in, and the page's semantics blocked; Escape, back (`PopScope`), a drag or fling, the menu button and choosing a destination call `onClose` once. It lags the spec: it ships an earlier form of the drawer, with a separate rail component beside it. Not built on this platform yet: the 48 row with the menu item's corners in both forms, a collapsed cell that is the row without its label (`collapsedLabels` defaults to never), nested rows whose content alone starts further in while their item containers keep the full width (NVD-13), the header slot's inherited text style and color (NVD-38), a selection that changes color in place, and `responsive` with its event (NVD-53 to NVD-55): the width comes from `MediaQuery.sizeOf(context).width`; `onPresentationChanged` is a `ValueChanged<TanreiNavigationDrawerPresentation>` and `onClose` is called when a change of presentation closes the drawer. Also not built yet (NVD-57 to NVD-64): `revealSelected: bool`, and `scrollController: ScrollController?` (its `initialScrollOffset` is the first frame's offset); a `PageStorageKey` or a `restorationId` on the product's side keeps the offset, the drawer writes nothing itself. Not yet: the heading's letter-spacing by the script of its text (NVD-16, PRS-20). Not built yet: density (NVD-65), a `density` parameter as the tree view's on this platform; and this platform's drawer still reads the tokens that the density axis made per density (the row height, paddings, gap, nesting indent, icon sizes, label style, the collapsed column and the heading height), each now one value per density in the generated tokens, so it does not build against them until it catches up. Not built yet: selectableGroups (NVD-66, NVD-67) — a group that is a destination, with its row choosing it and its chevron a control of its own that opens and closes it. Not built yet: the row model shared with the tree view (chevron, guides, indent, highlight, iconSpace, expandable, labelWrap and supportingWrap, supporting text, one-line labels with a tooltip where cut, a group's trailing content, openIcon and loading row, stickyParents and stickyMax; NVD-68 to NVD-77). Filter (NVD-79 to NVD-95), not built yet: `filterValue` with `onFilterChanged`; the chord is a `Shortcuts` entry; the status is `SemanticsService.announce` with the polite assertiveness; `focusFilter` is a `FocusNode` the product may pass.	Controlled: `open`, `expanded`, `value`, `onValueChange`, `onExpandedChange`, `onClose`, an `items` data array, `headerButtons` and `mainAction` elements and a `header` node. A modal drawer is presented in a transparent `Modal` with its own motion and scrim; `onRequestClose` (Android back) calls `onClose`. Destinations have the `button` role with `accessibilityState.selected`; group rows the `button` role with `accessibilityState.expanded`; headings the `header` role. Insets come from its own `insets` prop, falling back to `TanreiProvider`'s. It lags the spec: it ships an earlier form of the drawer, with a separate rail component beside it. Not built on this platform yet: the 48 row with the menu item's corners in both forms, a collapsed cell that is the row without its label (`collapsedLabels` defaults to never), nested rows whose content alone starts further in while their item containers keep the full width (NVD-13), the header slot's inherited text style and color (NVD-38), a selection that changes color in place, and `responsive` with its event (NVD-53 to NVD-55): the width comes from `useWindowDimensions()`; `onPresentationChange` receives `'standard' \| 'column' \| 'modal'`, and `onClose` is called when a change of presentation closes the drawer. Also not built yet (NVD-57 to NVD-64): `revealSelected`, and `scrollOffset` as the first frame's offset with a ref method `getScrollOffset()` for reading it; the drawer writes to no storage. Not yet: the heading's letter-spacing by the script of its text (NVD-16, PRS-20). Not built yet: density (NVD-65), a `density` parameter as the tree view's on this platform; and this platform's drawer still reads the tokens that the density axis made per density (the row height, paddings, gap, nesting indent, icon sizes, label style, the collapsed column and the heading height), each now one value per density in the generated tokens, so it does not build against them until it catches up. Not built yet: selectableGroups (NVD-66, NVD-67) — a group that is a destination, with its row choosing it and its chevron a control of its own that opens and closes it. Not built yet: the row model shared with the tree view (chevron, guides, indent, highlight, iconSpace, expandable, labelWrap and supportingWrap, supporting text, one-line labels with a tooltip where cut, a group's trailing content, openIcon and loading row, stickyParents and stickyMax; NVD-68 to NVD-77). Filter (NVD-79 to NVD-95), not built yet: controlled `filterValue` with `onFilterChange`; the status is `AccessibilityInfo.announceForAccessibilityWithOptions` with `queue: true`; `focusFilter()` is on the component's ref.

टोकन

टोकन	किसका एलियास	रिज़ॉल्व किया गया मान (लाइट)
`--tanrei-comp-navigation-drawer-breakpoint-collapsed`	`sys.breakpoint.medium`	600px
`--tanrei-comp-navigation-drawer-breakpoint-expanded`	`sys.breakpoint.expanded`	1024px
`--tanrei-comp-navigation-drawer-collapsed-selected-disabled-item-container-color`	—	#262626 · 16%
`--tanrei-comp-navigation-drawer-collapsed-selected-disabled-item-icon-indicator-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-collapsed-selected-disabled-item-icon-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-collapsed-selected-disabled-item-label-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-collapsed-selected-disabled-item-state-layer-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-collapsed-selected-disabled-item-supporting-text-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-collapsed-selected-disabled-item-trailing-icon-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-collapsed-selected-disabled-item-trailing-text-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-collapsed-selected-focused-item-container-color`	—	#262626 · 24.4%
`--tanrei-comp-navigation-drawer-collapsed-selected-focused-item-icon-indicator-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-collapsed-selected-focused-item-icon-color`	—	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-focused-item-label-color`	—	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-focused-item-state-layer-color`	—	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-focused-item-supporting-text-color`	—	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-focused-item-trailing-icon-color`	—	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-focused-item-trailing-text-color`	—	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-hovered-item-container-color`	—	#262626 · 22.7%
`--tanrei-comp-navigation-drawer-collapsed-selected-hovered-item-icon-indicator-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-collapsed-selected-hovered-item-icon-color`	—	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-hovered-item-label-color`	—	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-hovered-item-state-layer-color`	—	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-hovered-item-supporting-text-color`	—	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-hovered-item-trailing-icon-color`	—	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-hovered-item-trailing-text-color`	—	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-item-container-color`	`comp.navigation-drawer.selected.item.container.color`	#262626 · 16%
`--tanrei-comp-navigation-drawer-collapsed-selected-item-icon-indicator-color`	`comp.navigation-drawer.selected.item.icon-indicator.color`	#000000 · 0%
`--tanrei-comp-navigation-drawer-collapsed-selected-item-icon-color`	`comp.navigation-drawer.selected.item.icon.color`	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-item-label-color`	`comp.navigation-drawer.selected.item.label.color`	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-item-state-layer-color`	`comp.navigation-drawer.collapsed-selected.item.icon.color`	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-item-supporting-text-color`	`comp.navigation-drawer.selected.item.supporting-text.color`	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-item-trailing-icon-color`	`comp.navigation-drawer.selected.item.trailing-icon.color`	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-item-trailing-text-color`	`comp.navigation-drawer.selected.item.trailing-text.color`	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-pressed-item-container-color`	—	#262626 · 24.4%
`--tanrei-comp-navigation-drawer-collapsed-selected-pressed-item-icon-indicator-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-collapsed-selected-pressed-item-icon-color`	—	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-pressed-item-label-color`	—	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-pressed-item-state-layer-color`	—	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-pressed-item-supporting-text-color`	—	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-pressed-item-trailing-icon-color`	—	#262626
`--tanrei-comp-navigation-drawer-collapsed-selected-pressed-item-trailing-text-color`	—	#262626
`--tanrei-comp-navigation-drawer-collapsed-unselected-disabled-item-container-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-collapsed-unselected-disabled-item-icon-indicator-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-collapsed-unselected-disabled-item-icon-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-collapsed-unselected-disabled-item-label-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-collapsed-unselected-disabled-item-state-layer-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-collapsed-unselected-disabled-item-supporting-text-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-collapsed-unselected-disabled-item-trailing-icon-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-collapsed-unselected-disabled-item-trailing-text-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-collapsed-unselected-focused-item-container-color`	—	#4b4b4b · 10%
`--tanrei-comp-navigation-drawer-collapsed-unselected-focused-item-icon-indicator-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-collapsed-unselected-focused-item-icon-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-focused-item-label-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-focused-item-state-layer-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-focused-item-supporting-text-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-focused-item-trailing-icon-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-focused-item-trailing-text-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-hovered-item-container-color`	—	#4b4b4b · 8%
`--tanrei-comp-navigation-drawer-collapsed-unselected-hovered-item-icon-indicator-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-collapsed-unselected-hovered-item-icon-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-hovered-item-label-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-hovered-item-state-layer-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-hovered-item-supporting-text-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-hovered-item-trailing-icon-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-hovered-item-trailing-text-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-item-container-color`	`comp.navigation-drawer.unselected.item.container.color`	#000000 · 0%
`--tanrei-comp-navigation-drawer-collapsed-unselected-item-icon-indicator-color`	`comp.navigation-drawer.unselected.item.icon-indicator.color`	#000000 · 0%
`--tanrei-comp-navigation-drawer-collapsed-unselected-item-icon-color`	`comp.navigation-drawer.unselected.item.icon.color`	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-item-label-color`	`comp.navigation-drawer.unselected.item.label.color`	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-item-state-layer-color`	`comp.navigation-drawer.collapsed-unselected.item.icon.color`	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-item-supporting-text-color`	`comp.navigation-drawer.unselected.item.supporting-text.color`	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-item-trailing-icon-color`	`comp.navigation-drawer.unselected.item.trailing-icon.color`	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-item-trailing-text-color`	`comp.navigation-drawer.unselected.item.trailing-text.color`	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-pressed-item-container-color`	—	#4b4b4b · 10%
`--tanrei-comp-navigation-drawer-collapsed-unselected-pressed-item-icon-indicator-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-collapsed-unselected-pressed-item-icon-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-pressed-item-label-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-pressed-item-state-layer-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-pressed-item-supporting-text-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-pressed-item-trailing-icon-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-unselected-pressed-item-trailing-text-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-container-width-compact`	—	56px
`--tanrei-comp-navigation-drawer-collapsed-container-width-regular`	—	72px
`--tanrei-comp-navigation-drawer-collapsed-item-container-padding-block-compact`	`sys.space.space100`	8px
`--tanrei-comp-navigation-drawer-collapsed-item-container-padding-block-regular`	`sys.space.space150`	12px
`--tanrei-comp-navigation-drawer-collapsed-item-container-padding-inline`	`sys.space.space50`	4px
`--tanrei-comp-navigation-drawer-collapsed-item-container-shape`	`comp.navigation-drawer.item.container.shape`	6px
`--tanrei-comp-navigation-drawer-collapsed-item-container-width-compact`	—	32px
`--tanrei-comp-navigation-drawer-collapsed-item-container-width-regular`	—	48px
`--tanrei-comp-navigation-drawer-collapsed-item-gap`	`sys.space.space50`	4px
`--tanrei-comp-navigation-drawer-container-color-modal`	`sys.color.surface-container-low`	#f9f9f9
`--tanrei-comp-navigation-drawer-container-color-standard`	`sys.color.surface`	#ffffff
`--tanrei-comp-navigation-drawer-container-elevation-modal`	`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-navigation-drawer-container-elevation-standard`	`sys.elevation.level0`
`--tanrei-comp-navigation-drawer-container-gap-compact`	—	2px
`--tanrei-comp-navigation-drawer-container-gap-regular`	—	4px
`--tanrei-comp-navigation-drawer-container-padding-block`	`sys.space.space150`	12px
`--tanrei-comp-navigation-drawer-container-padding-inline`	`sys.space.space150`	12px
`--tanrei-comp-navigation-drawer-container-shape-modal`	`sys.shape.corner.large`	12px
`--tanrei-comp-navigation-drawer-container-shape-standard`	`sys.shape.corner.none`	0px
`--tanrei-comp-navigation-drawer-container-width`	—	240px
`--tanrei-comp-navigation-drawer-disabled-opacity`	—	1
`--tanrei-comp-navigation-drawer-filter-gap`	`sys.space.space150`	12px
`--tanrei-comp-navigation-drawer-filter-shortcut-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-navigation-drawer-filter-status-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-navigation-drawer-focused-opacity`	—	1
`--tanrei-comp-navigation-drawer-guide-color`	`sys.color.outline-variant`	#000000 · 8%
`--tanrei-comp-navigation-drawer-guide-width`	`sys.border.hairline`	1px
`--tanrei-comp-navigation-drawer-header-color`	`sys.color.on-surface`	#1b1b1b
`--tanrei-comp-navigation-drawer-header-gap`	`sys.space.space300`	24px
`--tanrei-comp-navigation-drawer-header-item-gap`	`sys.space.space100`	8px
`--tanrei-comp-navigation-drawer-heading-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-navigation-drawer-heading-height-compact`	—	28px
`--tanrei-comp-navigation-drawer-heading-height-regular`	—	36px
`--tanrei-comp-navigation-drawer-hovered-opacity`	—	1
`--tanrei-comp-navigation-drawer-item-container-height-compact`	—	32px
`--tanrei-comp-navigation-drawer-item-container-height-regular`	—	48px
`--tanrei-comp-navigation-drawer-item-container-shape`	`sys.shape.corner.small`	6px
`--tanrei-comp-navigation-drawer-item-gap`	`sys.space.space150`	12px
`--tanrei-comp-navigation-drawer-item-icon-indicator-height-compact`	`comp.navigation-drawer.item.icon.size.compact`	16px
`--tanrei-comp-navigation-drawer-item-icon-indicator-height-regular`	`comp.navigation-drawer.item.icon.size.regular`	24px
`--tanrei-comp-navigation-drawer-item-icon-indicator-shape`	`sys.shape.corner.full`	9999px
`--tanrei-comp-navigation-drawer-item-icon-indicator-width-compact`	`comp.navigation-drawer.item.icon.size.compact`	16px
`--tanrei-comp-navigation-drawer-item-icon-indicator-width-regular`	`comp.navigation-drawer.item.icon.size.regular`	24px
`--tanrei-comp-navigation-drawer-item-icon-size-compact`	`sys.icon.extra-small`	16px
`--tanrei-comp-navigation-drawer-item-icon-size-regular`	`sys.icon.medium`	24px
`--tanrei-comp-navigation-drawer-item-nest-indent-compact`	`sys.space.space300`	24px
`--tanrei-comp-navigation-drawer-item-nest-indent-regular`	`sys.space.space450`	36px
`--tanrei-comp-navigation-drawer-item-padding-block-compact`	—	2px
`--tanrei-comp-navigation-drawer-item-padding-block-regular`	—	4px
`--tanrei-comp-navigation-drawer-item-padding-inline-compact`	`sys.space.space100`	8px
`--tanrei-comp-navigation-drawer-item-padding-inline-regular`	`sys.space.space150`	12px
`--tanrei-comp-navigation-drawer-item-trailing-icon-size-compact`	`sys.icon.extra-small`	16px
`--tanrei-comp-navigation-drawer-item-trailing-icon-size-regular`	`sys.icon.small`	20px
`--tanrei-comp-navigation-drawer-motion-disclosure-duration`	`sys.motion.role.disclosure`	400ms
`--tanrei-comp-navigation-drawer-motion-disclosure-easing`	`sys.motion.easing.spatial`	cubic-bezier(0.2, 0, 0, 1)
`--tanrei-comp-navigation-drawer-motion-enter-duration`	`sys.motion.role.appear.sheet.enter`	400ms
`--tanrei-comp-navigation-drawer-motion-enter-easing`	`sys.motion.easing.enter`	cubic-bezier(0.2, 0, 0, 1)
`--tanrei-comp-navigation-drawer-motion-exit-duration`	`sys.motion.role.appear.sheet.exit`	350ms
`--tanrei-comp-navigation-drawer-motion-exit-easing`	`sys.motion.easing.exit`	cubic-bezier(0.3, 0, 1, 1)
`--tanrei-comp-navigation-drawer-motion-expand-duration`	`sys.motion.role.resize.large`	400ms
`--tanrei-comp-navigation-drawer-motion-expand-easing`	`sys.motion.easing.spatial`	cubic-bezier(0.2, 0, 0, 1)
`--tanrei-comp-navigation-drawer-motion-feedback-duration`	`sys.motion.role.feedback`	450ms
`--tanrei-comp-navigation-drawer-motion-selection-duration`	`sys.motion.role.selection.mark`	250ms
`--tanrei-comp-navigation-drawer-motion-selection-easing`	`sys.motion.easing.spatial`	cubic-bezier(0.2, 0, 0, 1)
`--tanrei-comp-navigation-drawer-motion-state-duration`	`sys.motion.role.state.large`	250ms
`--tanrei-comp-navigation-drawer-motion-state-easing`	`sys.motion.easing.state`	cubic-bezier(0.2, 0, 0, 1)
`--tanrei-comp-navigation-drawer-outline-color-modal`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-outline-color-standard`	`sys.color.outline-variant`	#000000 · 8%
`--tanrei-comp-navigation-drawer-outline-width`	`sys.border.hairline`	1px
`--tanrei-comp-navigation-drawer-pressed-opacity`	—	1
`--tanrei-comp-navigation-drawer-scrim-blur`	`comp.modal-layer.scrim.blur`	0px
`--tanrei-comp-navigation-drawer-scrim-color`	`comp.modal-layer.scrim.color`	#000000 · 40%
`--tanrei-comp-navigation-drawer-selected-disabled-item-container-color`	—	#262626 · 16%
`--tanrei-comp-navigation-drawer-selected-disabled-item-icon-indicator-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-selected-disabled-item-icon-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-selected-disabled-item-label-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-selected-disabled-item-state-layer-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-selected-disabled-item-supporting-text-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-selected-disabled-item-trailing-icon-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-selected-disabled-item-trailing-text-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-selected-focused-item-container-color`	—	#262626 · 24.4%
`--tanrei-comp-navigation-drawer-selected-focused-item-icon-indicator-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-selected-focused-item-icon-color`	—	#262626
`--tanrei-comp-navigation-drawer-selected-focused-item-label-color`	—	#262626
`--tanrei-comp-navigation-drawer-selected-focused-item-state-layer-color`	—	#262626
`--tanrei-comp-navigation-drawer-selected-focused-item-supporting-text-color`	—	#262626
`--tanrei-comp-navigation-drawer-selected-focused-item-trailing-icon-color`	—	#262626
`--tanrei-comp-navigation-drawer-selected-focused-item-trailing-text-color`	—	#262626
`--tanrei-comp-navigation-drawer-selected-hovered-item-container-color`	—	#262626 · 22.7%
`--tanrei-comp-navigation-drawer-selected-hovered-item-icon-indicator-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-selected-hovered-item-icon-color`	—	#262626
`--tanrei-comp-navigation-drawer-selected-hovered-item-label-color`	—	#262626
`--tanrei-comp-navigation-drawer-selected-hovered-item-state-layer-color`	—	#262626
`--tanrei-comp-navigation-drawer-selected-hovered-item-supporting-text-color`	—	#262626
`--tanrei-comp-navigation-drawer-selected-hovered-item-trailing-icon-color`	—	#262626
`--tanrei-comp-navigation-drawer-selected-hovered-item-trailing-text-color`	—	#262626
`--tanrei-comp-navigation-drawer-selected-item-container-color`	`sys.color.secondary-container`	#262626 · 16%
`--tanrei-comp-navigation-drawer-selected-item-icon-indicator-color`	`comp.navigation-drawer.unselected.item.icon-indicator.color`	#000000 · 0%
`--tanrei-comp-navigation-drawer-selected-item-icon-color`	`sys.color.on-secondary-container`	#262626
`--tanrei-comp-navigation-drawer-selected-item-label-color`	`sys.color.on-secondary-container`	#262626
`--tanrei-comp-navigation-drawer-selected-item-state-layer-color`	`comp.navigation-drawer.selected.item.label.color`	#262626
`--tanrei-comp-navigation-drawer-selected-item-supporting-text-color`	`sys.color.on-secondary-container`	#262626
`--tanrei-comp-navigation-drawer-selected-item-trailing-icon-color`	`sys.color.on-secondary-container`	#262626
`--tanrei-comp-navigation-drawer-selected-item-trailing-text-color`	`sys.color.on-secondary-container`	#262626
`--tanrei-comp-navigation-drawer-selected-pressed-item-container-color`	—	#262626 · 24.4%
`--tanrei-comp-navigation-drawer-selected-pressed-item-icon-indicator-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-selected-pressed-item-icon-color`	—	#262626
`--tanrei-comp-navigation-drawer-selected-pressed-item-label-color`	—	#262626
`--tanrei-comp-navigation-drawer-selected-pressed-item-state-layer-color`	—	#262626
`--tanrei-comp-navigation-drawer-selected-pressed-item-supporting-text-color`	—	#262626
`--tanrei-comp-navigation-drawer-selected-pressed-item-trailing-icon-color`	—	#262626
`--tanrei-comp-navigation-drawer-selected-pressed-item-trailing-text-color`	—	#262626
`--tanrei-comp-navigation-drawer-sticky-container-color`	`comp.navigation-drawer.container.color.standard`	#ffffff
`--tanrei-comp-navigation-drawer-sticky-divider-color`	`sys.color.outline-variant`	#000000 · 8%
`--tanrei-comp-navigation-drawer-sticky-divider-width`	`sys.border.hairline`	1px
`--tanrei-comp-navigation-drawer-unselected-disabled-item-container-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-unselected-disabled-item-icon-indicator-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-unselected-disabled-item-icon-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-unselected-disabled-item-label-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-unselected-disabled-item-state-layer-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-unselected-disabled-item-supporting-text-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-unselected-disabled-item-trailing-icon-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-unselected-disabled-item-trailing-text-color`	—	#1b1b1b · 38%
`--tanrei-comp-navigation-drawer-unselected-focused-item-container-color`	—	#4b4b4b · 10%
`--tanrei-comp-navigation-drawer-unselected-focused-item-icon-indicator-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-unselected-focused-item-icon-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-focused-item-label-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-focused-item-state-layer-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-focused-item-supporting-text-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-focused-item-trailing-icon-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-focused-item-trailing-text-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-hovered-item-container-color`	—	#4b4b4b · 8%
`--tanrei-comp-navigation-drawer-unselected-hovered-item-icon-indicator-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-unselected-hovered-item-icon-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-hovered-item-label-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-hovered-item-state-layer-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-hovered-item-supporting-text-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-hovered-item-trailing-icon-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-hovered-item-trailing-text-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-item-container-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-unselected-item-icon-indicator-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-unselected-item-icon-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-item-label-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-item-state-layer-color`	`comp.navigation-drawer.unselected.item.label.color`	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-item-supporting-text-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-item-trailing-icon-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-item-trailing-text-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-pressed-item-container-color`	—	#4b4b4b · 10%
`--tanrei-comp-navigation-drawer-unselected-pressed-item-icon-indicator-color`	—	#000000 · 0%
`--tanrei-comp-navigation-drawer-unselected-pressed-item-icon-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-pressed-item-label-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-pressed-item-state-layer-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-pressed-item-supporting-text-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-pressed-item-trailing-icon-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-unselected-pressed-item-trailing-text-color`	—	#4b4b4b
`--tanrei-comp-navigation-drawer-collapsed-item-label-typescale`	`sys.typescale.label-small`	500 12px/1.3333
`--tanrei-comp-navigation-drawer-filter-shortcut-typescale`	`sys.typescale.label-small`	500 12px/1.3333
`--tanrei-comp-navigation-drawer-filter-status-typescale`	`sys.typescale.body-small`	400 13px/1.5385
`--tanrei-comp-navigation-drawer-header-typescale`	`sys.typescale.heading-5`	500 16px/1.5
`--tanrei-comp-navigation-drawer-heading-typescale`	`sys.typescale.label-small`	500 12px/1.3333
`--tanrei-comp-navigation-drawer-item-label-typescale-compact`	`sys.typescale.label`	500 14px/1.4286
`--tanrei-comp-navigation-drawer-item-label-typescale-regular`	`sys.typescale.label`	500 14px/1.4286
`--tanrei-comp-navigation-drawer-item-supporting-text-typescale`	`sys.typescale.body-small`	400 13px/1.5385
`--tanrei-comp-navigation-drawer-item-trailing-text-typescale`	`sys.typescale.body-small`	400 13px/1.5385

फ़िक्स्चर

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

`variant: standard` (45)

standard

open: true value: inbox label: Mail items: 2 256 × 560 की विंडो में अलग से बनाया गया

standard-no-icons

open: true value: deployments label: Project items: 4 256 × 560 की विंडो में अलग से बनाया गया

standard-disabled

open: true value: inbox label: Mail items: 4 256 × 560 की विंडो में अलग से बनाया गया

collapsible-expanded

open: true collapsible: true expanded: true value: inbox label: Mail items: 6 slots: header 256 × 560 की विंडो में अलग से बनाया गया

collapsed

open: true collapsible: true expanded: false value: inbox label: Mail items: 6 slots: header 88 × 560 की विंडो में अलग से बनाया गया

collapsed-labels-always

open: true collapsible: true expanded: false collapsedLabels: always value: inbox label: Mail items: 5 88 × 560 की विंडो में अलग से बनाया गया

collapsed-labels-selected

open: true collapsible: true expanded: false collapsedLabels: selected value: starred label: Mail items: 5 88 × 560 की विंडो में अलग से बनाया गया

collapsed-badges

open: true collapsible: true expanded: false value: inbox label: Mail items: 5 88 × 560 की विंडो में अलग से बनाया गया

collapsed-disabled

open: true collapsible: true expanded: false value: inbox label: Mail items: 5 88 × 560 की विंडो में अलग से बनाया गया

collapsed-short-labels

open: true collapsible: true expanded: false collapsedLabels: always value: shared-with-me label: Files items: 5 88 × 560 की विंडो में अलग से बनाया गया

trailing

open: true value: inbox label: Mail items: 5 256 × 560 की विंडो में अलग से बनाया गया

groups

open: true value: website label: Workspace items: 4 256 × 560 की विंडो में अलग से बनाया गया

groups-nested

open: true value: tokens label: Docs items: 1 256 × 560 की विंडो में अलग से बनाया गया

nested-icons

open: true chevron: end value: website label: Workspace items: 3 256 × 560 की विंडो में अलग से बनाया गया

compact

open: true density: compact chevron: end value: tree-view label: Workspace items: 3 256 × 560 की विंडो में अलग से बनाया गया

compact-collapsed

open: true collapsible: true expanded: false density: compact value: inbox label: Mail items: 6 72 × 560 की विंडो में अलग से बनाया गया

chevron-end

open: true chevron: end value: posts label: Workspace items: 3 256 × 560 की विंडो में अलग से बनाया गया

chevron-none

open: true chevron: none value: posts label: Workspace items: 3 256 × 560 की विंडो में अलग से बनाया गया

guides

open: true guides: shown value: posts label: Workspace items: 3 256 × 560 की विंडो में अलग से बनाया गया

guides-chevron-none

open: true chevron: none guides: shown value: posts label: Workspace items: 3 256 × 560 की विंडो में अलग से बनाया गया

indent-zero

open: true chevron: end indent: 0 value: posts label: Workspace items: 3 256 × 560 की विंडो में अलग से बनाया गया

highlight-full

open: true chevron: end highlight: full value: posts label: Workspace items: 3 256 × 560 की विंडो में अलग से बनाया गया

icon-space

open: true chevron: end value: inbox label: Mail items: 4 256 × 560 की विंडो में अलग से बनाया गया

not-expandable

open: true expandable: false value: color label: Docs items: 2 256 × 560 की विंडो में अलग से बनाया गया

supporting

open: true chevron: end value: inbox label: Mail items: 3 256 × 560 की विंडो में अलग से बनाया गया

one-line

open: true chevron: end value: long label: Projects items: 2 256 × 560 की विंडो में अलग से बनाया गया

label-wrap

open: true chevron: end labelWrap: true supportingWrap: true value: long label: Projects items: 2 256 × 560 की विंडो में अलग से बनाया गया

group-loading

open: true chevron: end value: inbox loadingLabel: Loading… label: Mail items: 2 256 × 560 की विंडो में अलग से बनाया गया

sticky

open: true chevron: end value: a-3-4 scrollOffset: 220 stickyParents: true label: Archive items: 2 256 × 560 की विंडो में अलग से बनाया गया

group-closed-selected

open: true value: website label: Workspace items: 3 256 × 560 की विंडो में अलग से बनाया गया

selectable-groups

open: true value: components selectableGroups: true label: Documentation items: 4 256 × 560 की विंडो में अलग से बनाया गया

collapsed-groups

open: true collapsible: true expanded: false value: website label: Workspace items: 4 88 × 560 की विंडो में अलग से बनाया गया

responsive-wide

collapsible: true responsive: true value: inbox label: Mail items: 6 slots: header 1280 × 640 की विंडो में अलग से बनाया गया

responsive-medium

collapsible: true responsive: true value: inbox label: Mail items: 6 800 × 640 की विंडो में अलग से बनाया गया

responsive-narrow

open: true collapsible: true responsive: true value: inbox label: Mail items: 6 slots: header 400 × 640 की विंडो में अलग से बनाया गया

site-sidebar

open: true value: /components/navigation-drawer/ revealSelected: true label: Documentation items: 5 256 × 560 की विंडो में अलग से बनाया गया

site-sidebar-long

open: true value: /components/navigation-drawer/ label: Documentation items: 5 256 × 800 की विंडो में अलग से बनाया गया

site-sidebar-restored

open: true value: /components/navigation-drawer/ scrollOffset: 2900 label: Documentation items: 5 256 × 800 की विंडो में अलग से बनाया गया

filter-empty-field

open: true value: /components/navigation-drawer/ revealSelected: true filterable: true filterLabel: Filter navigation filterPlaceholder: Filter filterEmptyText: No matches filterCountText: Matches: {count} filterClearLabel: Clear label: Documentation items: 5 256 × 560 की विंडो में अलग से बनाया गया

filter

open: true value: /components/navigation-drawer/ revealSelected: true filterable: true filterValue: dr filterLabel: Filter navigation filterPlaceholder: Filter filterEmptyText: No matches filterCountText: Matches: {count} filterClearLabel: Clear label: Documentation items: 5 256 × 560 की विंडो में अलग से बनाया गया

filter-count-hidden

open: true value: /components/navigation-drawer/ revealSelected: true filterable: true filterValue: dr filterLabel: Filter navigation filterPlaceholder: Filter filterEmptyText: No matches filterCountText: Matches: {count} filterCountHidden: true filterClearLabel: Clear label: Documentation items: 5 256 × 560 की विंडो में अलग से बनाया गया

filter-group

open: true value: /components/navigation-drawer/ revealSelected: true filterable: true filterValue: found filterLabel: Filter navigation filterPlaceholder: Filter filterEmptyText: No matches filterCountText: Matches: {count} filterClearLabel: Clear label: Documentation items: 5 256 × 560 की विंडो में अलग से बनाया गया

filter-matches

open: true value: /components/navigation-drawer/ revealSelected: true filterable: true filterValue: nav filterLabel: Filter navigation filterPlaceholder: Filter filterEmptyText: No matches filterCountText: Matches: {count} filterClearLabel: Clear label: Documentation items: 5 256 × 560 की विंडो में अलग से बनाया गया

filter-none

open: true value: /components/navigation-drawer/ revealSelected: true filterable: true filterValue: zzz filterLabel: Filter navigation filterPlaceholder: Filter filterEmptyText: No matches filterCountText: Matches: {count} filterClearLabel: Clear label: Documentation items: 5 256 × 560 की विंडो में अलग से बनाया गया

filter-compact

open: true density: compact value: /components/navigation-drawer/ revealSelected: true filterable: true filterValue: o filterLabel: Filter navigation filterPlaceholder: Filter filterEmptyText: No matches filterCountText: Matches: {count} filterClearLabel: Clear label: Documentation items: 5 256 × 560 की विंडो में अलग से बनाया गया

`variant: modal` (3)

modal

variant: modal open: true value: inbox label: Mail items: 2 480 × 640 की विंडो में अलग से बनाया गया

modal-collapsible-closed

variant: modal open: false collapsible: true value: inbox label: Mail items: 5

modal-collapsible-open

variant: modal open: true collapsible: true value: inbox label: Mail items: 5 slots: header 480 × 640 की विंडो में अलग से बनाया गया

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

दिशानिर्देश

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

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

बार और ड्रॉअर के बीच चुनाव

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

समेटा हुआ ड्रॉअर ही नेविगेशन रेल है। समेटने योग्य ड्रॉअर वहाँ सिमटकर आइकन का एक कॉलम बन जाता है जहाँ कॉन्टेंट को चौड़ाई चाहिए, और उसका मेन्यू बटन उसे फिर चौड़ा कर देता है; हर आइकन वहीं रहता है जहाँ वह है। Tanrei की अलग नेविगेशन रेल को हटाकर इसी रूप में मिला दिया गया है।
बार और ड्रॉअर गंतव्यों का एक ही सेट हैं, दो जगहों पर। दोनों वही गंतव्य और वही चयन लेते हैं, इसलिए विंडो के अनुसार ढलने वाला प्रॉडक्ट किसी ब्रेकपॉइंट पर बार की जगह ड्रॉअर रख देता है और अपने गंतव्यों को छूता तक नहीं। एक समय में इनमें से एक ही दिखाएँ, दोनों कभी नहीं।
ड्रॉअर में ज़्यादा समाता है। इसे फैले हुए रूप में तब इस्तेमाल करें जब प्रॉडक्ट में उससे ज़्यादा गंतव्य हों जितने बार में समा सकते हैं, या जब वे ग्रुप में बँटते हों, जैसे मेल ऐप के फ़ोल्डर और लेबल। बड़ी विंडो पर standard ड्रॉअर कॉन्टेंट के बग़ल में रहता है। कॉम्पैक्ट विंडो पर मोडल ड्रॉअर मेन्यू बटन से उसके ऊपर सरककर आता है।
मोडल, समेटने योग्य ड्रॉअर अपना आइकन का कॉलम लेआउट में बनाए रखता है, और जब उसका मेन्यू बटन उसे खोलता है तो वह स्क्रिम के ऊपर, कॉन्टेंट पर चौड़ा हो जाता है।
हर प्लैटफ़ॉर्म पर दोनों गंतव्य के मान से चुनते हैं (Compose हर आइटम के फ़्लैग से, Flutter इंडेक्स से) और change और reselect एमिट करते हैं।

नेविगेशन रेल कहाँ गई

Tanrei में अपनी कोई अलग नेविगेशन रेल नहीं है: रेल एक समेटने योग्य ड्रॉअर है, समेटा हुआ।

पहले	अब
नेविगेशन रेल	`collapsible` वाला नेविगेशन ड्रॉअर, जिसका `expanded` false है
रेल का गंतव्य, अपने लेबल के ऊपर एक आइकन	एक गंतव्य, जो समेटे हुए रूप में आइकन के बाद काटी गई अपनी पंक्ति के रूप में बनता है: सिर्फ़ आइकन, जिसका नाम टूलटिप में है
रेल के लेबल का दिखना	`collapsedLabels`: `never` (डिफ़ॉल्ट), `selected` या `always`। आख़िरी दो आइकन के नीचे `shortLabel` बनाते हैं
आइकन पर रेल का बैज	गंतव्य का `badge`, `badgeCount` और `badgeLabel`, जो दोनों रूपों में बनते हैं
रेल का मेन्यू बटन और FAB	ड्रॉअर का पहला `header-button`, जो उसका मेन्यू बटन है, और उसका `main-action`, अपने आइकन में समेटा हुआ
पंक्ति के अंत में ड्रॉअर का `badge` टेक्स्ट	`trailingText`, या `trailing` स्लॉट
रेल के टोकन	`comp.navigation-drawer.collapsed.*` और समेटे हुए रूप की शर्तें

वेब इसे इम्प्लीमेंट करता है; SwiftUI, Compose, Flutter और React Native, जब तक वे बराबरी पर नहीं आते, अब भी अपनी अलग नेविगेशन रेल देते हैं, जिसका विवरण अब इन पेजों में नहीं है।

Material 3 के नाम

Material 3	Tanrei
Navigation rail	समेटने योग्य नेविगेशन ड्रॉअर, समेटा हुआ
Expanded navigation rail	समेटने योग्य नेविगेशन ड्रॉअर, फैला हुआ
Modal expanded navigation rail	मोडल, समेटने योग्य नेविगेशन ड्रॉअर
Navigation drawer	वह नेविगेशन ड्रॉअर जो समेटने योग्य नहीं है

वेरिएंट चुनना

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

डिज़ाइन सिस्टम वेरिएंट जोड़ सकता है। उसका जोड़ा हुआ वेरिएंट standard की तरह व्यवहार करता है।

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

standard ड्रॉअर का खुलना। यह सरककर भीतर आता है और बग़ल का कॉन्टेंट उसके लिए जगह बनाता है। जब आप इसे व्यक्ति की किसी क्रिया के जवाब में खोलते हैं, जैसे मेन्यू बटन से, तो फ़ोकस मौजूदा गंतव्य पर जाता है, या फिर ड्रॉअर के पहले फ़ोकस किए जा सकने वाले एलिमेंट पर। जो ड्रॉअर शुरू से खुला है, वह फ़ोकस को कहीं नहीं ले जाता।
standard ड्रॉअर के बग़ल में काम करना। Tab ड्रॉअर से कॉन्टेंट में जाती है, और ड्रॉअर खुला रहता है। फ़ोकस के भीतर रहते हुए इसे बंद करने पर फ़ोकस वहीं लौटता है जहाँ वह इसके खुलने से पहले था।
मोडल ड्रॉअर का खुलना। यह शुरुआती किनारे से सरककर भीतर आता है और स्क्रिम बाक़ी विंडो पर फ़ेड होकर आता है। फ़ोकस मौजूदा गंतव्य पर जाता है, या फिर पहले फ़ोकस किए जा सकने वाले एलिमेंट पर, और ड्रॉअर के भीतर बँधा रहता है। उसके पीछे की हर चीज़ पॉइंटर, टच, कीबोर्ड और सहायक तकनीक के लिए निष्क्रिय रहती है।
मोडल ड्रॉअर का बंद होना। स्क्रिम पर दबाना, Escape, प्लैटफ़ॉर्म की बैक क्रिया, शुरुआती किनारे की ओर उसकी आधी चौड़ाई से आगे तक का ड्रैग या उस ओर का फ़्लिंग, और कोई गंतव्य चुनना, इनमें से हर एक इसे एक बार बंद करता है। यह सरककर बाहर जाता है, स्क्रिम फ़ेड हो जाता है, और फ़ोकस उस एलिमेंट पर लौटता है जिस पर वह था।
खोलने के लिए किनारे से स्वाइप नहीं। iOS पर स्क्रीन का शुरुआती किनारा बैक जेस्चर का है, इसलिए ड्रॉअर वहाँ से कभी नहीं खुलता। इसे दिखने वाले मेन्यू बटन से खोलें।
जहाँ मोशन कम किया गया है, वहाँ ड्रॉअर तुरंत खुलता और बंद होता है।

समेटना

collapsible ड्रॉअर को उसका समेटा हुआ रूप देता है, 72 चौड़ा: वही फैला हुआ ड्रॉअर, जिसके लेबल हट गए हैं। सबसे ऊपरी स्तर का हर गंतव्य और ग्रुप आइकन के बाद काटी गई अपनी पंक्ति है, 48 गुणा 48 और पंक्ति के ही कोनों के साथ, और चयनित वाला ठीक वैसे ही भरा होता है जैसे उसकी पंक्ति। हेडर के बटन कॉलम में एक के ऊपर एक रखे जाते हैं और मुख्य क्रिया अपने आइकन में समेट दी जाती है। सेक्शन की हेडिंग अपनी पंक्तियाँ बिना टेक्स्ट के बनाए रखती हैं, और हेडर स्लॉट और अंतिम कॉन्टेंट नहीं दिखाए जाते।
समेटा हुआ सेल अपना नाम टूलटिप में दिखाता है, कॉन्टेंट की ओर: जब पॉइंटर सेल पर ठहरा हो तो टूलटिप की देरी के बाद, कीबोर्ड फ़ोकस पर तुरंत, और टच के लिए कभी नहीं। लेबल पहले से ही सेल का एक्सेसिबल नाम है, इसलिए टूलटिप पढ़ी जाने वाली चीज़ में कुछ नहीं जोड़ता।
expanded standard, समेटने योग्य ड्रॉअर का रूप चुनता है। मोडल, समेटने योग्य ड्रॉअर बंद रहते हुए अपना कॉलम लेआउट में बनाए रखता है, और open उसे स्क्रिम के ऊपर, कॉन्टेंट पर चौड़ा कर देता है।
मेन्यू बटन पहला header-button है। जब तक ड्रॉअर समेटने योग्य है, यह फैले हुए या समेटे हुए स्टेट के साथ, सहायक तकनीक को ड्रॉअर को नियंत्रित करने वाले बटन के रूप में मिलता है, और इसे सक्रिय करने पर माँगे गए रूप के साथ expandedChange एमिट होता है। वेब इसे ख़ुद लागू करता है; बाक़ी जगहों पर आप इससे expanded या open सेट करते हैं। इसका ग्लिफ़ और नाम आप चुनते हैं।
collapsedLabels चुनता है कि कौन-से सेल आइकन के नीचे छोटा लेबल बनाएँ: never, जो डिफ़ॉल्ट है, सिर्फ़ selected वाला, या always। लेबल वाला कॉलम उस प्रॉडक्ट या डिज़ाइन सिस्टम के लिए है जिसे वह चाहिए। तब सेल अपना shortLabel बनाता है, या अगर आपने वह नहीं दिया तो अपना लेबल, और कोई टूलटिप नहीं दिखाता। दोनों ही सूरतों में लेबल एक्सेसिबल नाम बना रहता है।
हर आइकन अपनी जगह रहता है। दोनों रूपों में आइकन एक ही कॉलम और एक ही रेखा पर रहते हैं, और हर सेल अपनी ऊँचाई बनाए रखता है, इसलिए रूप बदलने पर सिर्फ़ अंतिम किनारा खिसकता है: जैसे-जैसे किनारा लेबल के पार जाता है, लेबल फ़ेड होकर हट जाते हैं, और लेबल वाले कॉलम में छोटे लेबल फ़ेड होकर आ जाते हैं। खुला हुआ ग्रुप इसका अकेला अपवाद है: समेटा हुआ ड्रॉअर उसके आइटम नहीं बनाता, इसलिए नीचे के सेल ऊपर खिसक जाते हैं। मुख्य क्रिया का ग्लिफ़ दोनों रूपों में, बटन के हर साइज़ में और दोनों डेंसिटी में गंतव्यों के आइकन की ही रेखा पर रहता है: ड्रॉअर बटन को उसके अपने टोकन से रखता है। कॉलम से चौड़ा समेटा हुआ वर्ग (डिफ़ॉल्ट सिस्टम में बड़ी मुख्य क्रिया) कॉलम के किनारे से बाहर निकलता है, और डीबग बिल्ड इसकी रिपोर्ट करते हैं; small या medium इस्तेमाल करें, और कॉम्पैक्ट ड्रॉअर में small, जहाँ medium का वर्ग पूरा कॉलम भर देता है।
चयन अपनी जगह पर ही रंग बदलता है। नया चयन पंक्तियों का रंग वहीं बदलता है जहाँ वे हैं, फैले हुए रूप में भी और समेटे हुए रूप में भी। उसे दिखाने के लिए कुछ भी बढ़ता, घटता या सरकता नहीं।

डेंसिटी

regular, जो डिफ़ॉल्ट है, में पंक्तियाँ 48 ऊँची और ग्लिफ़ 24 के होते हैं, मेन्यू के आइटम जितनी ऊँचाई, ऐसे प्रोडक्ट के लिए जो टच और पॉइंटर दोनों से चलता है।
compact में ट्री व्यू की कॉम्पैक्ट पंक्तियाँ होती हैं: 32 ऊँची, 16 के ग्लिफ़, हर पंक्ति के भीतर 8, पंक्तियों के बीच 2 और हेडिंग के लिए 28, और समेटने पर आइकन का कॉलम 56 चौड़ा। इसे ऐसे टूल में इस्तेमाल करें जो पॉइंटर से चलता है और जिसके ड्रॉअर में बहुत सी जगहें हैं, जैसे फ़ाइल ब्राउज़र या एडिटर का साइडबार।
दोनों डेंसिटी में नेस्टेड आइकन एक सीध में रहते हैं। हर स्तर की सामग्री एक इंडेंट और भीतर से शुरू होती है, और इंडेंट उस डेंसिटी के आइकन और गैप के बराबर है, इसलिए नेस्टेड गंतव्य का आइकन वहीं होता है जहाँ उसके ग्रुप का लेबल शुरू होता है, और एक स्तर के आइकन एक कॉलम में रहते हैं।
टच का टार्गेट बना रहता है। टच के लिए कॉम्पैक्ट पंक्ति कम से कम टच टार्गेट जितनी ऊँची बनती है। पॉइंटर के लिए उसका हिट एरिया पंक्ति और उसके ऊपर-नीचे आधा गैप है: पॉइंटर टार्गेट से कम, फिर भी WCAG 2.5.8 के 24 से ऊपर।
डिज़ाइन सिस्टम ड्रॉअर के .compact टोकन, जैसे comp.navigation-drawer.item.container.height.compact, से कॉम्पैक्ट का मतलब बदलता है या नई डेंसिटी जोड़ता है।

ट्री व्यू के साथ साझा पंक्तियाँ

ट्री व्यू जैसे ही पैरामीटर, उन्हीं नामों और अर्थों के साथ: chevron, guides, indent, highlight, iconSpace, expandable, labelWrap और supportingWrap, पंक्ति का supportingText और supportingPosition, और stickyParents के साथ stickyMax।
chevron: डिफ़ॉल्ट start ग्रुप के शेवरॉन को उसके आइकन से पहले बनाता है और हर पंक्ति में उसकी जगह रखता है, ताकि एक स्तर के आइकन एक सीध में रहें; end उसे पंक्ति के बिल्कुल अंत में, अंतिम सामग्री के बाद बनाता है; none कोई नहीं बनाता, और ग्रुप के आइकन को दबाने से वह खुलता-बंद होता है, खुला होने पर उसका openIcon दिखता है। समेटने योग्य ड्रॉअर start को end की तरह बनाता है, ताकि दोनों रूपों में हर आइकन अपनी जगह रहे, और बिना ग्रुप वाला ड्रॉअर यह जगह नहीं रखता।
indent: auto पंक्ति के पहले हिस्से को वहाँ रखता है जहाँ उसके ग्रुप का लेबल शुरू होता है, और जहाँ ग्रुप अपने लेबल से पहले कुछ नहीं बनाता वहाँ स्तर के इंडेंट जितना आगे बढ़ता है; कोई संख्या उतने पिक्सेल आगे बढ़ाती है, और 0 बिल्कुल नहीं। किसी पंक्ति का लेबल कभी ड्रॉअर की आधी चौड़ाई से आगे शुरू नहीं होता।
highlight: डिफ़ॉल्ट indented नेस्टेड पंक्ति के फ़िल और स्टेट लेयर को वहीं से शुरू करता है जहाँ पंक्ति शुरू होती है; full उन्हें हर स्तर पर पूरी चौड़ाई में बनाता है।
iconSpace बिना आइकन वाली पंक्ति में आइकन की जगह रखता है, ताकि एक स्तर के लेबल एक सीध में रहें: auto तब जब स्तर की किसी और पंक्ति में आइकन हो, always या never।
expandable false होने पर हर ग्रुप खुला और बिना शेवरॉन दिखता है; तब ग्रुप की पंक्ति बस उसके आइटम का नाम है, कोई कंट्रोल नहीं।
guides: shown खुले ग्रुप के आइटम के बग़ल में एक रेखा बनाता है, उसके शेवरॉन के नीचे, वह न हो तो आइकन के नीचे, वह भी न हो तो लेबल की शुरुआत पर; hover उसे तभी बनाता है जब पॉइंटर ड्रॉअर के ऊपर हो या फ़ोकस उसके भीतर हो।
एक पंक्ति। लेबल और सहायक टेक्स्ट एक पंक्ति के होते हैं और न समाने पर ellipsis से कटते हैं, और कटी हुई पंक्ति होवर और कीबोर्ड फ़ोकस पर अपना पूरा टेक्स्ट टूलटिप में दिखाती है; labelWrap और supportingWrap उन्हें रैप होने देते हैं। एक्सेसिबल नाम हमेशा पूरा लेबल होता है।
सहायक टेक्स्ट लेबल के नीचे (below) या उसके बाद (inline) रहता है, और पंक्ति के विवरण की तरह पढ़ा जाता है।
ग्रुप अंतिम शेवरॉन से पहले अंतिम टेक्स्ट या सामग्री, एक openIcon, और loading ले सकता है, जो उसके आइटम के नीचे लोडिंग पंक्ति बनाता है, जिसका नाम ड्रॉअर का loadingLabel है।
stickyParents, जो ड्रॉअर में डिफ़ॉल्ट रूप से बंद और ट्री व्यू में चालू है, ऊपर दिख रही पंक्तियाँ जिन खुले ग्रुप की हैं उनकी पंक्तियों को ऊपर पिन करता है, ज़्यादा से ज़्यादा stickyMax (2), भीतरी पहले, जैसे किसी एडिटर का स्टिकी स्क्रॉल करता है। ड्रॉअर समेटा हो तो यह लागू नहीं होता।

विंडो की चौड़ाई के अनुसार चलना

responsive के साथ विंडो की चौड़ाई तय करती है कि ड्रॉअर किस रूप में पेश हो, उसके डिज़ाइन सिस्टम के दो ब्रेकपॉइंट के आधार पर (डिफ़ॉल्ट सिस्टम में 1024 और 600)। तब variant को अनदेखा किया जाता है।

विंडो	प्रस्तुति	ड्रॉअर क्या है
कम से कम चौड़े वाले ब्रेकपॉइंट जितनी	`standard`	कॉन्टेंट के बग़ल में एक standard ड्रॉअर, जो `open` चाहे जो कहे दिखता है, और जो समेटने योग्य है, उस रूप में जो `expanded` चुनता है
कम से कम सँकरे वाले जितनी, जब `collapsible` हो	`column`	एक मोडल, समेटने योग्य ड्रॉअर: लेआउट में उसका आइकन का कॉलम, जो `open` रहते हुए कॉन्टेंट पर चौड़ा हो जाता है
उससे सँकरी	`modal`	एक मोडल ड्रॉअर, जो समेटने योग्य नहीं है

प्रस्तुति निकाली जाती है, कभी सँजोकर नहीं रखी जाती। वह सिर्फ़ चौड़ाई के अनुसार चलती है: ड्रॉअर उसे variant, open या expanded में नहीं लिखता। presentationChange बताता है कि वह क्या है, पहली बार और जब भी चौड़ाई उसे बदलती है।
नई प्रस्तुति बंद अवस्था में शुरू होती है। वह तुरंत, बिना मोशन के बनती है। जो ओवरले खुला था वह हट जाता है और close एक बार फ़ायर होता है। expanded, value और हर ग्रुप का open बने रहते हैं, इसलिए standard प्रस्तुति उसी रूप में लौटती है जिसमें उसे छोड़ा गया था।
modal प्रस्तुति में मेन्यू बटन आपका है। जब तक प्रस्तुति modal है, अपना एक मेन्यू बटन दिखाएँ, उदाहरण के लिए ऐप बार में, और उससे open सेट करें। ड्रॉअर का अपना मेन्यू बटन वहाँ उसे सिर्फ़ बंद करता है।
ड्रॉअर एक विज़िट से दूसरी विज़िट तक कुछ याद नहीं रखता। व्यक्ति का चुना हुआ रूप बनाए रखने के लिए, expandedChange जो लाता है उसे स्टोर करें और उसी से expanded सेट करें।

साइट के साइडबार के रूप में

हर गंतव्य को एक href दें और ड्रॉअर को उसके value के रूप में पेज का अपना पता, और ड्रॉअर दस्तावेज़ों वाली साइट का साइडबार बन जाता है।

पेज बताता है कि वह कहाँ है। दबाने से लिंक कभी नहीं चुना जाता। हर पेज value को अपने गंतव्य पर सेट करता है: उस गंतव्य के value पर, या जहाँ उसका कोई मान नहीं है वहाँ उसके href पर, जैसा वह लिखा गया है।
revealSelected उन ग्रुप को खोलता है जिनमें चयनित गंतव्य है: जब ड्रॉअर पहली बार दिखता है, उसके पहले फ़्रेम में और बिना मोशन के, और फिर जब भी value बदलता है। जिस ग्रुप को व्यक्ति उसके बाद बंद करता है, वह value के बदलने तक बंद रहता है।
पहुँचते ही चयन नज़र में होता है। जब ड्रॉअर दिखता है, और जब भी value बदलता है, तो चयन दिखाने वाली पंक्ति को स्क्रॉल होने वाली पंक्तियों के बीच में लाया जाता है, अगर वह पूरी तरह नज़र में नहीं थी, और अगर थी तो उसे बिलकुल नहीं हिलाया जाता। इसलिए जिस साइडबार का मौजूदा पेज पहले से नज़र में है, वह एक पेज से दूसरे पेज तक वहीं रहता है जहाँ है। फ़ोकस नहीं हिलता।
scrollOffset पढ़ता और सेट करता है कि पंक्तियाँ कितनी दूर तक स्क्रॉल की गई हैं। ड्रॉअर कुछ स्टोर नहीं करता। जो साइट चाहती है कि लंबा ट्री वहीं रहे जहाँ पाठक ने उसे छोड़ा था, वह ऑफ़सेट और हर ग्रुप का open ख़ुद रखती है, उदाहरण के लिए सेशन के स्टोरेज में, और पहले फ़्रेम से पहले उन्हें वापस देती है। जिस ग्रुप में मौजूदा पेज है वह फिर भी खुलता है, और चयन उस ऑफ़सेट पर भारी पड़ता है जो उसे नज़र से बाहर छोड़ देता।
साइट से बाहर ले जाने वाला लिंक target new लेता है। वह नए टैब में खुलता है, उसकी फैली हुई पंक्ति आइकन सेट के open_in_new पर ख़त्म होती है, बशर्ते आपने वहाँ अंतिम कॉन्टेंट न रखा हो, और targetLabel उसके नाम के बाद पढ़ा जाता है। शब्द आपके हैं (“नए टैब में खुलता है”): Tanrei अपना कोई शब्द साथ नहीं देता।
राउटर change को सुनता है। वह ब्राउज़र के लिंक खोलने से पहले फ़ायर होता है, और सिर्फ़ सादे ढंग से सक्रिय करने पर: बिना किसी मॉडिफ़ायर कुंजी के प्राइमरी बटन, टच या Enter, उस लिंक पर जिसका target same है। उसे रद्द करें और उस href पर जाएँ जो वह लाता है। दूसरे टैब में खोला गया लिंक कुछ फ़ायर नहीं करता, और मोडल ड्रॉअर को खुला छोड़ देता है।

फ़िल्टर करना

फ़िल्टर ड्रॉअर को उसी जगह सिमटाता है; यह खोज नहीं है। खोज हर पेज का कॉन्टेंट खोजती है और जो मिला उसे अपने अलग व्यू में दिखाती है। फ़िल्टर सिर्फ़ उन जगहों के लेबल देखता है जो ड्रॉअर पहले से दिखा रहा है, और उन्हें वहीं रहने देता है, ताकि जो पाठक किसी पेज का नाम जानता है, वह दो कुंजियों में — “/” और नाम के पहले कुछ अक्षर — वहाँ पहुँच जाए और उसे उसके पड़ोसियों के बीच देखे। दोनों को अपनी-अपनी कुंजी दें: फ़िल्टर के लिए “/”, जैसे साइडबार में फ़िल्टर वाली दस्तावेज़ साइटें करती हैं, और खोज के लिए ⌘K या Ctrl+K।

क्या मेल खाता है। वह पंक्ति मेल खाती है जिसके लेबल में टाइप किया हर शब्द हो, हर शब्द कहीं भी और किसी भी क्रम में, बड़े-छोटे अक्षर, अक्षर की चौड़ाई और अक्षर पर लगे चिह्नों का फ़र्क़ किए बिना: “nav dr” से “Navigation drawer” मिलता है, और “resume” से “Résumé”। सिर्फ़ लेबल की तुलना होती है — सहायक टेक्स्ट, अंतिम टेक्स्ट या पते की नहीं। कुछ भी लाया, रैंक किया या फिर से क्रम में नहीं लगाया जाता: जो प्रॉडक्ट सर्वर पर, रैंकिंग से या लेबल से ज़्यादा चीज़ों पर मेल तय करता है, वह filterable बंद रखता है और पहले की तरह ड्रॉअर को मेल खाने वाली पंक्तियाँ देता है।
क्या बचता है। जो पंक्तियाँ मेल नहीं खातीं, वे छिप जाती हैं। मेल खाने वाली पंक्ति वाले ग्रुप बने रहते हैं, और अपने ही नाम से मिला ग्रुप पूरा का पूरा बना रहता है; जिस सेक्शन में कोई पंक्ति नहीं बचती, वह अपनी हेडिंग के साथ छिप जाता है।
ग्रुप कुछ समय के लिए खुलते हैं। मेल खाने वाली पंक्ति रखने वाला बंद ग्रुप फ़िल्टर के लिए खुला बनाया जाता है। उसका open नहीं बदलता और toggle फ़ायर नहीं होता, इसलिए फ़ील्ड ख़ाली करने पर वह फिर बंद हो जाता है। फ़िल्टर करते समय जिस ग्रुप को व्यक्ति ख़ुद खोलता या बंद करता है, वह उसका है: वह वैसा ही रहता है जैसा व्यक्ति ने छोड़ा।
पहली मेल खाने वाली पंक्ति तुरंत ली जा सकती है। जब तक फ़ोकस फ़ील्ड में है, मेल खाने वाली पहली पंक्ति फ़ोकस वाली पंक्ति की तरह बनती है। Enter उसे वैसे ही लेती है जैसे उस पंक्ति पर Enter लेती, और Down Arrow फ़ोकस को उस पर ले जाती है; टाइप करना फ़ील्ड में चलता रहता है। Escape फ़ील्ड ख़ाली करती है, और दोबारा दबाने पर फ़ोकस को वहीं लौटा देती है जहाँ से “/” ने उसे लिया था।
“/” पेज पर कहीं से भी फ़ील्ड तक ले जाता है, सिवाय तब के जब फ़ोकस किसी टेक्स्ट फ़ील्ड में हो, जहाँ वह स्लैश टाइप करता है। समेटा हुआ ड्रॉअर पहले फैलता है। filterShortcut कुंजी बदलता है, और ख़ाली लिस्ट कोई कुंजी नहीं जोड़ती, उस प्रॉडक्ट के लिए जो “/” पहले से इस्तेमाल करता है। संकरी विंडो में ऐप शेल इस कुंजी पर बंद ड्रॉअर को खोलता है और फ़ोकस उसके फ़ील्ड में रखता है।
गिनती। फ़िल्टर लगा रहने तक नतीजों के सबसे ऊपर एक हल्की पंक्ति बताती है कि कितनी पंक्तियाँ मेल खाती हैं (filterCountText), या कोई मेल न खाए तो filterEmptyText। filterCountHidden गिनती नहीं बनाता; सहायक तकनीक को वह फिर भी बताई जाती है।
मेल खाने वाले हिस्से चिह्नित नहीं होते। फ़िल्टर के बाद बची पंक्तियाँ ही जवाब हैं, इसलिए हर पंक्ति वैसी ही दिखती है जैसी फ़िल्टर के बिना, जैसे कोड रिव्यू के फ़ाइल ट्री में या किसी डॉक्यूमेंटेशन साइट के साइडबार में।
कुछ भी सहेजा नहीं जाता। ड्रॉअर के जाते ही टेक्स्ट भी भूल जाता है। अगर फ़िल्टर को पाठक के साथ चलना है, तो filterChange से filterValue रख लें और अगले पेज पर उसे लौटा दें।

पंक्तियाँ, ग्रुप और सेक्शन

पंक्तियाँ कम से कम 48 ऊँची होती हैं, मेन्यू के आइटम जितनी, उसी के कोनों के साथ। लेबल एक पंक्ति का होता है और कटता है, जब तक labelWrap उसे रैप होने और पंक्ति को ऊँचा होने न दे।
हर गंतव्य को आइकन दें, या किसी को नहीं, ताकि लेबल एक सीध में रहें। समेटने योग्य ड्रॉअर समेटे हुए रूप में सबसे ऊपरी स्तर के हर गंतव्य और ग्रुप को उसके आइकन से बनाता है, इसलिए हर एक को आइकन दें।
trailingText पंक्ति के अंत का छोटा टेक्स्ट है, लेबल से ज़्यादा हल्का: कोई गिनती (“24”) या कोई शब्द (“नया”)। गिनती यहीं टेक्स्ट के रूप में आती है, Badge में नहीं: Badge किसी ऐंकर पर निशान लगाता है, और पंक्ति के अंत में निशान लगाने के लिए कोई ऐंकर नहीं होता; आइकन पर निशान लगाना हो तो badge का इस्तेमाल करें। trailing स्लॉट में बाक़ी सब कुछ आता है, जैसे कोई ग्लिफ़; वह trailingText पर भारी पड़ता है और कभी इंटरैक्टिव नहीं होता। target new वाला लिंक अपनी पंक्ति को अपने आप open_in_new पर ख़त्म करता है, इसलिए वह ग्लिफ़ आप नहीं रखते। अंतिम कॉन्टेंट लेबल के बाद पढ़ा जाता है, और समेटे हुए रूप में नहीं दिखाया जाता।
badge आइकन पर एक Badge बनाता है, दोनों रूपों में: एक बिंदु, या badgeCount, जिसका नाम badgeLabel से आता है।
ग्रुप की पंक्ति अपने भीतर के गंतव्यों और ग्रुप को खोलती और बंद करती है, उस शेवरॉन से जहाँ chevron उसे रखता है (ऊपर)। जिस बंद ग्रुप में चयनित गंतव्य है वह चयनित के रूप में बनता है, और समेटे हुए रूप में सबसे ऊपरी स्तर का ग्रुप भी; समेटे हुए रूप में ग्रुप को सक्रिय करने पर ड्रॉअर फैल जाता है और ग्रुप खुल जाता है। तीन स्तरों तक ही रहें।
गंतव्य भी बनने वाला ग्रुप (selectableGroups, और ग्रुप पर value या href) अपनी पंक्ति को ट्री व्यू की तरह बाँट देता है: उसका शेवरॉन उसे खोलता और बंद करता है, पंक्ति का बाक़ी हिस्सा उसे चुनता है, और एक बार दबाने से दोनों कभी नहीं होते। शेवरॉन अपना अलग कंट्रोल है, फ़ोकस के क्रम में पंक्ति के बाद, और उसका हिट एरिया कम से कम पॉइंटर टार्गेट जितना चौड़ा है। समेटे हुए रूप में, दूसरे ग्रुप के उलट, उसका सेल उसे चुनता है और ड्रॉअर समेटा ही रहता है; उसके आइटम तक ड्रॉअर फैलाकर पहुँचा जाता है। जब ऐसा ग्रुप मौजूदा पेज होता है, तो revealSelected उसे भी खोल देता है, ताकि साइट का साइडबार दिखाए जा रहे सेक्शन के पेज दिखाए।
सेक्शन की हेडिंग अपने नीचे के गंतव्यों को नाम देती है। वह एक हेडिंग है, कंट्रोल नहीं। सेक्शन बिना हेडिंग का भी हो सकता है, बिना शीर्षक के एक अलग किए गए ग्रुप के रूप में।
सेक्शन का divider उसके पहले एक डिवाइडर बनाता है, ताकि वह ऊपर की चीज़ों से अलग दिखे। डिवाइडर आप ख़ुद कभी नहीं रखते।
हेडर में हेडर बटन रहते हैं, जो आइकन के कॉलम में एक के ऊपर एक रखे जाते हैं, और उनके नीचे मुख्य क्रिया। फैले हुए रूप में हेडर स्लॉट मेन्यू बटन के बग़ल में रहता है, किसी शीर्षक या अकाउंट स्विचर के लिए, और समेटे हुए रूप में नहीं दिखाया जाता। वहाँ रखा सादा टेक्स्ट ड्रॉअर की शीर्षक स्टाइल (comp.navigation-drawer.header.typescale और comp.navigation-drawer.header.color) में बनता है; आपका कोई एलिमेंट जो अपनी स्टाइल ख़ुद सेट करता है, वह उसे बनाए रखता है।
जब पंक्तियाँ हेडर के नीचे की जगह से ज़्यादा ऊँची हों, तो वे स्क्रॉल होती हैं और हेडर अपनी जगह रहता है। किसी भी सिरे तक पहुँचा स्क्रॉल आगे बढ़कर ड्रॉअर के पीछे के पेज को स्क्रॉल नहीं करता।

करें

सबसे ज़्यादा इस्तेमाल होने वाले गंतव्यों को सबसे पहले रखें, सेक्शन के बाहर या पहले सेक्शन में।
जब गंतव्य का अपना पता हो तो उसे href दें, ताकि वह असली लिंक हो: उसे नए टैब में खोला जा सकता है, कॉपी किया जा सकता है और क्रॉलर उस पर जा सकता है।
सेक्शन का नाम उस बात पर रखें जो उसके गंतव्यों में साझा है: “लेबल”, “एडमिन”।
मोडल और standard रूपों में वही गंतव्य और वही मान इस्तेमाल करें, ताकि प्रॉडक्ट सिर्फ़ विंडो की चौड़ाई के आधार पर एक से दूसरे में जा सके।

न करें

ड्रॉअर को “साइन आउट करें” या “लिखें” जैसी क्रियाओं के लिए इस्तेमाल न करें। उसकी पंक्तियाँ जगहें हैं।
सेक्शन के भीतर सेक्शन न रखें, और ग्रुप में सेक्शन न रखें। डीबग बिल्ड इसकी रिपोर्ट करते हैं और भीतरी सेक्शन के गंतव्यों को उसकी जगह बना देते हैं।
selectableGroups बंद होने पर ग्रुप को value या href देकर यह उम्मीद न करें कि उसकी पंक्ति उसे चुनेगी। वह सिर्फ़ खुलता और बंद होता है, और डीबग बिल्ड इसकी रिपोर्ट करते हैं।
जिस विंडो में standard ड्रॉअर के लिए काफ़ी चौड़ाई है, वहाँ मोडल ड्रॉअर इस्तेमाल न करें।
फ़िल्टर को साइट की खोज की जगह इस्तेमाल न करें। वह जगहों को उनके नाम से ढूँढता है; जो पाठक कॉन्टेंट में कोई शब्द ढूँढ रहा है, उसे खोज चाहिए।

सुलभता

रोल: navigation
लेबलिंग: Each destination is named by its label in both forms, drawn or not, as a button or as a link; its icon is decorative; its badge's description and then its trailing content are part of its description. A group's row and the list of its items are named by the group's label. A section's heading is a heading. The drawer's label names the navigation landmark and, while the drawer is modal and open, the dialog. The menu button is named by its own label and carries the drawer's expanded state; the main action is named by its label in both forms. A collapsed drawer that draws no labels shows each cell's name where the platform shows a name for an icon alone (a tooltip on the web). The filter field is a search field named by filterLabel, the product's words, controlling the drawer's list; its clear button is named by filterClearLabel; its key hint is hidden and its chord is the field's keyboard shortcut. How many rows match is drawn at the top of the results, hidden from assistive technology, and said by a status of the drawer's own, in the product's filterCountText or filterEmptyText.
न्यूनतम टार्गेट: दिखने वाला आकार छोटा होने पर भी हिट एरिया न्यूनतम टार्गेट साइज़ को पूरा करता है। minimum 32px · pointer 44px · spacing 8px · touch 48px

कीबोर्ड

कुंजियाँ	क्रिया
`Tab / Shift+Tab`	Moves focus through the header's content, then the destinations and group rows that are shown and not disabled, and after the row of a group that is a destination its chevron; inside an open modal drawer it wraps around and never leaves the drawer; from an open standard drawer, expanded or collapsed, it moves on to the content, and the drawer stays as it is.
`Enter` / `Space`	Activates the focused destination (Enter only for a destination that is a link: it follows the link, and Space is left to the platform), and a modal drawer then closes; on a group's row, opens or closes the group, or, for a group that is a destination (NVD-66), activates it as a destination and leaves it as it is; on that group's chevron, opens or closes the group; on a group's cell in the collapsed drawer, expands the drawer with the group open; on the menu button, changes the drawer's form.
`Enter with a modifier key, on a link (the web)`	What the browser does with a link: another tab or window, a download. The drawer emits nothing, selects nothing and stays as it is (NVD-60).
`Right arrow / Left arrow (mirrored in right-to-left layouts)`	On a closed group's row, the arrow toward the end of the line opens it; on an open group's row, the arrow toward the start closes it; on an item inside an open group, the arrow toward the start moves focus to the group's row. Elsewhere the keys do nothing.
`Escape`	Closes an open modal drawer (a collapsible one narrows back to its column) and returns focus to where it was.
`/ (the filterShortcut chord, anywhere in the window)`	WHILE filterable is true and the drawer is shown: moves focus to the filter field, expanding a collapsed drawer first. It types "/" while focus is in a text field.
`Enter (in the filter field)`	Takes the first row that matches — the active match, drawn as a focused row while focus stays in the field — as Enter on that row would: a destination is activated, a group's row opens or closes.
`Down Arrow (in the filter field)`	Moves focus to the active match.
`Escape (in the filter field)`	With text: empties the field and keeps focus there. Empty: returns focus to where it was before "/", or passes on (a modal drawer closes).
`Escape (on a row, while a filter is applied)`	A standard drawer: empties the filter and keeps focus on the row, which stays in view among its neighbours. A modal drawer: closes, as without a filter.

The drawer is a list of places, not a tab bar, in both forms: on native platforms its destinations are buttons (or links) with the selected state (as iPadOS sidebars and Android's drawer items are read), and on the web links or buttons with aria-current in a navigation landmark. The collapsed form keeps these semantics; it does not become a tab bar.
Selected and the current page are one thing. The drawer lists the product's places and the selected one is the place being shown, which the web exposes as aria-current="page" on a button and on a link alike. A site of separate pages changes who says which it is — the page, through value, not a press — and nothing else: no destination is ever selected and another current, so a second state would have no case to draw.
A drawer of links is a navigation landmark holding lists of links and disclosure buttons, the pattern assistive technology users know from site navigation: every link and every group's row is its own Tab stop, and the arrow keys only open, close and leave a group. It is deliberately not a choice per use. One Tab stop with roving arrow keys is a tree's or a menu's model, would hide links from the browser's own ways of listing and following them, and would make the same component answer the keyboard in two ways. A long tree is passed by the landmark, by the headings of its sections, by closing its groups, and by the page's skip link.
Showing the selection (NVD-57, NVD-58) scrolls the drawer and opens groups without moving focus and without an announcement: the page's own title and heading say where the user is, and the current destination carries its state for whoever reaches it.
Groups are disclosures, not a tree: a group's row is a button with an expanded state that shows or hides a named list, and every shown destination stays its own tab stop, as the links of a navigation region are. A tree's single tab stop and arrow-key roving would make the drawer's keyboard model depend on whether it has groups; the arrow keys here only open, close and leave a group.
A group that is a destination (selectableGroups, NVD-66) is the WAI-ARIA Authoring Practices' disclosure navigation menu with top-level links: its row is the link or button of its own page, with the current-page state, and its chevron a separate disclosure button for its items, each a Tab stop. The two are never one control: a row that both navigates and toggles would announce one action and do two, and a keyboard user could not open the group without leaving the page. The chevron is named by the group's label, as Tanrei ships no words of its own; its role and its expanded state tell it from the row.
Collapsing hides the header slot, the headings' text, trailing content and the items inside groups from assistive technology and focus; it changes no destination's role, name or state, and the menu button announces the change as its expanded state.
A responsive drawer (NVD-53 to NVD-55) changes what it is with the window's width — a layout region where the window is wide, a modal overlay where it is narrow — and each presentation has the semantics of the drawer it stands for. A change of presentation closes an open overlay, releases focus that was kept inside it and announces nothing by itself; the presentation is never the only way to reach a destination, because the product's menu button opens the modal presentation.
The standard form is a layout region, not an overlay, expanded or collapsed: opening it moves focus in, to the selected destination or else the first, closing it returns focus to where it was, and focus leaving it never closes it. The modal form is a modal overlay: it keeps focus in and draws a scrim; a collapsible modal drawer's column is a layout region while the drawer is closed. The web presents the open modal drawer with a modal <dialog> element (showModal gives inertness and Escape); Compose draws it in a window of its own (a Dialog, as TanreiDialog is) and Flutter as a controlled overlay in a Stack over the page, each with a scrim, trapping focus and answering back; SwiftUI, which has no side presentation, overlays it with the modal trait and the escape gesture; React Native presents it in a transparent Modal.
Opening a modal drawer by a swipe from the screen edge is left out: on iOS the same edge is the back gesture. The product opens it from a menu button.
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.
A filter narrows the drawer in place; it is not a search. The site's search (the Search component, opened with ⌘K or Ctrl+K) looks through the content of every page and offers results in a view of its own; the filter looks only at the labels of the places the drawer already lists and leaves them where they are, so that a person who knows a page's name reaches it in two keys ("/" and its first letters) and sees it among its neighbours. The two keep separate keys: "/" for the filter, as documentation sites with a sidebar filter do, and the search's own chord.
Hidden rows are removed from what assistive technology is told, not only from view, so that every list position and size a person hears is the filter's (WCAG 1.3.1). The count is a status message (WCAG 4.1.3): said politely through a status of the drawer's own once typing pauses, never by moving focus, and drawn quietly at the top of the results unless the product hides it. The rows that match are not marked: what the filter leaves is the answer, as in a file tree's filter and a documentation site's sidebar, and the row Enter takes is drawn as a focused row (NVD-85, NVD-86), so that nothing is told by color alone (WCAG 1.4.1).
The field is a separate stop before the items, as a search field above a list is. As in a search, the first row that matches is active as soon as there is one while focus stays in the field: Enter takes it, as Enter on its row would, and Down Arrow moves focus to it, so that a keyboard user neither Tabs through every row the filter left nor leaves the field to reach the place they typed for. The active match is drawn as a focused row; it is not the field's active descendant, because a destination is a link or a button, which an input's active descendant is not (a search's results are not either), and a screen reader user meets it by Down Arrow, the count telling how many rows are left.

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

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

वेब पर ड्रॉअर एक नेविगेशन लैंडमार्क है, जिसका नाम label से आता है। हर गंतव्य एक लिंक (href के साथ) या एक बटन है, और मौजूदा गंतव्य पर aria-current="page" रहता है। मोडल ड्रॉअर इसके साथ एक मोडल <dialog> भी है, जिसका नाम label से आता है।
iOS, Android, Flutter और React Native पर हर गंतव्य एक बटन है, अपने चयनित स्टेट और गंतव्यों के बीच अपनी जगह के साथ, जैसे उन प्लैटफ़ॉर्म पर साइडबार और ड्रॉअर के आइटम पढ़े जाते हैं। मोडल ड्रॉअर एक मोडल कंटेनर है, जिसका नाम label से आता है: मोडल ट्रेट, या पेन का शीर्षक।
गंतव्य दोनों रूपों में एक ही एलिमेंट है, जिसका नाम उसके लेबल से आता है। उसका आइकन छिपा रहता है; उसके नाम और स्टेट के बाद आइकन के बैज का विवरण और फिर उसका अंतिम कॉन्टेंट पढ़ा जाता है।
लिंक वाला गंतव्य हर स्टेट में ठीक बटन वाले गंतव्य की तरह बनता है, और “देखा जा चुका” वाला कोई रूप नहीं है। वह सब कुछ उसके पास रहता है जो ब्राउज़र किसी लिंक को देता है: उसका कॉन्टेक्स्ट मेन्यू, नए टैब में खुलना, ड्रैग करना और होवर पर पता। नया टैब खोलने वाला लिंक अपने विवरण के अंत में अपना targetLabel पढ़ता है।
समेटे हुए सेल का टूलटिप उन लोगों के लिए है जो देख सकते हैं और पॉइंटर या कीबोर्ड इस्तेमाल करते हैं। वह सहायक तकनीक से छिपा रहता है, जो लेबल को पहले से ही सेल के नाम के रूप में पढ़ती है।
ग्रुप की पंक्ति फैले हुए स्टेट वाला एक बटन है, जो अपनी भीतरी लिस्ट को नियंत्रित करता है। Right (बाएँ से दाएँ वाले लेआउट में) बंद ग्रुप को खोलती है, Left खुले ग्रुप को बंद करती है, और ग्रुप के भीतर Left उसकी पंक्ति पर ले जाती है। Tab दिखाई गई हर पंक्ति से होकर चलती है।
गंतव्य भी बनने वाला ग्रुप WAI-ARIA Authoring Practices का “टॉप-लेवल लिंक वाला डिस्क्लोज़र नेविगेशन मेन्यू” है: उसकी पंक्ति एक लिंक या बटन है, जो मौजूदा पेज होने पर aria-current="page" रखती है, और उसका शेवरॉन एक अलग बटन है, जिसका नाम ग्रुप का लेबल है, जिसमें फैले होने का स्टेट है और जो भीतरी लिस्ट को नियंत्रित करता है। दोनों पर Tab रुकता है, और पंक्ति पर Right और Left अब भी ग्रुप को खोलते और बंद करते हैं।
जब तक ड्रॉअर समेटने योग्य है, उसका मेन्यू बटन फैले हुए या समेटे हुए स्टेट के साथ, सहायक तकनीक को ड्रॉअर को नियंत्रित करने वाले बटन के रूप में मिलता है। रूप बदलने पर फ़ोकस उसी सेल पर रहता है जिस पर वह था।
सेक्शन की हेडिंग हेडिंग का रोल देती है और उस पर फ़ोकस नहीं जा सकता।
Tab हेडर के कॉन्टेंट और हर उस गंतव्य से होकर चलती है जो अक्षम नहीं है। Enter और Space फ़ोकस वाले गंतव्य को सक्रिय करती हैं (वेब पर लिंक के लिए सिर्फ़ Enter)। अक्षम गंतव्य फ़ोकस नहीं लेते और अक्षम के रूप में पढ़कर सुनाए जाते हैं।
standard ड्रॉअर में, खोलने पर फ़ोकस भीतर जाता है और बंद करने पर लौटता है, और Tab उसे बंद किए बिना कॉन्टेंट में आगे बढ़ जाती है। मोडल ड्रॉअर में Tab और Shift+Tab ड्रॉअर के भीतर ही घूमती रहती हैं, और Escape और प्लैटफ़ॉर्म की बैक क्रिया उसे बंद करके फ़ोकस लौटा देती हैं।
फ़ोकस रिंग पंक्ति के चारों ओर बनती है, सिर्फ़ कीबोर्ड फ़ोकस के लिए। जो पंक्ति पूरी तरह नज़र में नहीं है, उस पर कीबोर्ड फ़ोकस आने से वह कम से कम दूरी स्क्रॉल होकर नज़र में आ जाती है।
हिट एरिया दोनों रूपों में पूरा सेल है, और कभी न्यूनतम टार्गेट से कम नहीं।
बड़ा टेक्स्ट दोनों रूपों की चौड़ाई वही रखता है और पंक्तियों और हेडिंग को ऊँचा कर देता है। लेबल अगली पंक्ति में जाते हैं; छोटे लेबल काट दिए जाते हैं। आइकन का साइज़ नहीं बदलता।
फ़िल्टर का फ़ील्ड एक खोज फ़ील्ड है जिसका नाम filterLabel है। वह पंक्तियों से पहले आता है और बताता है कि वह ड्रॉअर की लिस्ट को नियंत्रित करता है। उसके मिटाने के बटन का नाम filterClearLabel है, और उसका “/” उसके कीबोर्ड शॉर्टकट के रूप में बताया जाता है (वेब पर aria-keyshortcuts), जबकि कुंजी का संकेत सहायक तकनीक से छिपा रहता है।
फ़िल्टर जिन पंक्तियों को छिपाता है, वे सहायक तकनीक के लिए भी चली जाती हैं, इसलिए व्यक्ति जो भी जगह और गिनती सुनता है, वह फ़िल्टर के बाद की होती है। टाइप करना एक सेकंड रुकने पर, ड्रॉअर की अपनी एक स्थिति बिना टोके (polite) और फ़ोकस हिलाए बिना बताती है कि कितनी पंक्तियाँ मेल खाती हैं, या कोई नहीं। नतीजों के सबसे ऊपर बनी गिनती सहायक तकनीक से छिपी रहती है, जो उसकी जगह यह स्थिति सुनती है।
मेल खाने वाली पंक्ति चिह्नित नहीं होती, इसलिए कोई बात सिर्फ़ रंग से नहीं बताई जाती; Enter जिस पंक्ति को लेता है, वह फ़ोकस वाली पंक्ति की तरह बनती है, और पंक्ति का नाम उसका पूरा लेबल ही रहता है।
डीबग बिल्ड इन बातों की रिपोर्ट करते हैं: बिना लेबल का गंतव्य, बिना label का मोडल ड्रॉअर, ऐसा मान जो किसी गंतव्य का नाम नहीं लेता, दो बार इस्तेमाल हुआ मान, सेक्शन के भीतर सेक्शन, ग्रुप में सेक्शन, तीन स्तरों से गहरी नेस्टिंग, ऐसा वेरिएंट जो डिज़ाइन सिस्टम में नहीं है, बिना मेन्यू बटन का समेटने योग्य ड्रॉअर, trailing स्लॉट में फ़ोकस किया जा सकने वाला एलिमेंट, ऐसा href जो javascript: पता है या पढ़ा नहीं जा सकता, अनजान target, और target new वाला लिंक जिसका targetLabel नहीं है। वे ऐसी डेंसिटी की भी रिपोर्ट करते हैं जो डिज़ाइन सिस्टम में नहीं है, और ऐसे ग्रुप की जिसके पास selectableGroups बंद होते हुए value या href है। फ़िल्टर के साथ वे बिना filterLabel के फ़ील्ड, बिना नाम के मिटाने के बटन, एक से ज़्यादा कॉर्ड वाले filterShortcut, और ऐसे कॉर्ड की रिपोर्ट करते हैं जिसे कोई दूसरा ड्रॉअर या खोज पहले से इस्तेमाल कर रही है।

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

Web: Firefox टॉप लेयर से हटते हुए एलिमेंट को ऐनिमेट नहीं कर सकता, इसलिए वहाँ मोडल ड्रॉअर सरककर बाहर जाने की जगह तुरंत ग़ायब हो जाता है।
Web: हर साइज़ rem के अनुसार चलता है, इसलिए ब्राउज़र का बड़ा टेक्स्ट साइज़ आइकन को भी बढ़ा देता है, पर ड्रॉअर की चौड़ाई को कभी नहीं। सिर्फ़ Tanrei का टाइप बढ़ाने पर ऐसा नहीं होता।
Web: यह जाँचा गया है कि Tab खुले standard ड्रॉअर से बाहर जाती है, पर यह अभी नहीं कि वह कॉन्टेंट में कहाँ पहुँचती है, जो लोड के दौरान अस्थिर था।
SwiftUI यह नहीं जान सकता कि फ़ोकस किस व्यू पर था, इसलिए ड्रॉअर बंद करने पर कीबोर्ड फ़ोकस किसी एलिमेंट पर नहीं लौटता: प्लैटफ़ॉर्म उसे वहाँ रखता है जहाँ वह डिफ़ॉल्ट रूप से रखता है। ड्रॉअर खोलने पर फ़ोकस मौजूदा गंतव्य पर जाता है, या फिर पहले सक्षम गंतव्य पर, हेडर के किसी कंट्रोल पर कभी नहीं। Mac पर मोडल ड्रॉअर सिर्फ़ उसी व्यू को ढकता और अक्षम करता है जिससे वह जुड़ा है, इसलिए उसे विंडो के रूट से जोड़ें।
SwiftUI: Escape, एक्सेसिबिलिटी का एस्केप जेस्चर और खुलने पर फ़ोकस का भीतर जाना अभी शुरू से अंत तक नहीं जाँचे गए हैं। गंतव्य अपनी जगह अपने मान टेक्स्ट के रूप में रखता है (“2 of 6”), सिर्फ़ अंग्रेज़ी में।
Compose मोडल ड्रॉअर को उसकी अपनी Dialog विंडो में पेश करता है, जैसे TanreiDialog को, न कि ऐप की विंडो के भीतर, जैसे Material का ड्रॉअर करता है। देखने में वह वैसा ही है, और वह विंडो फ़ोकस को भीतर रखती है, बैक का जवाब देती है और पीछे की चीज़ों को छिपा देती है।
Compose में ड्रॉअर के स्तर का कोई मान नहीं है, इसलिए ऐसे मान के लिए रिपोर्ट करने को कुछ नहीं है जो किसी गंतव्य का नाम नहीं लेता।
Flutter का मोडल ड्रॉअर Scaffold.drawer नहीं है। आप उसे विंडो को भरने वाले Stack के आख़िरी चाइल्ड के रूप में रखते हैं और open से नियंत्रित करते हैं। उसके गंतव्य सेट में अपनी जगह नहीं रखते।
Flutter: जहाँ पंक्ति और उसका गैप टच टार्गेट से छोटे हों, जैसे छोटी पंक्ति वाले डिज़ाइन सिस्टम में, वहाँ सिर्फ़ हिट एरिया के बढ़ने की जगह पंक्तियाँ एक-दूसरे से दूर हो जाती हैं।
React Native यह नहीं जान सकता कि फ़ोकस किस एलिमेंट पर था, इसलिए ड्रॉअर बंद करने पर फ़ोकस उस एलिमेंट पर नहीं लौटता जिसने उसे खोला था। मोडल ड्रॉअर फ़ोकस को वहीं छोड़ देता है जहाँ प्लैटफ़ॉर्म उसे रखता है, और standard ड्रॉअर कुछ नहीं करता।
React Native के ड्रॉअर का अभी अपनी कोई insets प्रॉपर्टी नहीं है: वह सिर्फ़ TanreiProvider के इनसेट पढ़ता है। गंतव्य अपनी जगह अपने मान टेक्स्ट के रूप में रखता है, अंग्रेज़ी में, जब तक आप positionText न दें।
React Native: मोडल ड्रॉअर का ड्रैग और फ़्लिंग, उसके फ़ोकस का जाना और एस्केप जेस्चर अभी किसी डिवाइस पर नहीं जाँचे गए हैं।
SwiftUI, Compose, Flutter और React Native, जो पिछला संशोधन देते हैं: पहली पंक्ति ड्रॉअर की पैडिंग से आधा गैप नीचे रहती है, और रैप हुए लेबल वाली पंक्ति हर एक पर एक ही तरह से नहीं बढ़ती (SwiftUI और Compose पंक्ति की न्यूनतम ऊँचाई तब तक बनाए रखते हैं जब तक टेक्स्ट उसमें समाता है)। बराबरी पर आने पर हर एक पहले सेल तक की पैडिंग नापेगा और पंक्ति की ऊँचाई को न्यूनतम मानेगा।
Web: फ़ील्ड जिस पहली मेल खाने वाली पंक्ति को तुरंत लेने लायक़ रखता है, वह फ़ोकस वाली पंक्ति की तरह बनती है, पर फ़ील्ड का सक्रिय डिसेंडेंट नहीं है: गंतव्य एक लिंक या बटन है, जो किसी इनपुट का सक्रिय डिसेंडेंट नहीं हो सकता। स्क्रीन रीडर इस्तेमाल करने वाला व्यक्ति Down Arrow से उस तक पहुँचता है।
SwiftUI, Compose, Flutter और React Native में अभी फ़िल्टर नहीं है।
Web: मोडल, समेटने योग्य ड्रॉअर फ़ोकस तभी लौटाता है जब वह सिमटकर वापस अपने कॉलम जितना हो चुका हो, ड्रैग पूरे पैनल को खिसकाता है, और उसका डायलॉग कॉलम के उस बॉक्स पर रखा जाता है जो खुलते समय नापा गया था।

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

हर गंतव्य को एक लेबल दें। जहाँ समेटा हुआ कॉलम लेबल बनाता है (collapsedLabels), वहाँ उन गंतव्यों को shortLabel दें जिनका लेबल उसके लिए बहुत लंबा है।
target new वाले लिंक को अपने प्रॉडक्ट की भाषा में targetLabel दें।
साइट पर, हर पेज पर value को उस पेज के अपने गंतव्य पर सेट करें।
जब तक रिस्पॉन्सिव ड्रॉअर की प्रस्तुति modal है, अपना एक मेन्यू बटन दिखाएँ जो उसे खोले।
मेन्यू बटन को एक नाम दें, जैसे “मेन्यू”, और वेब के अलावा बाक़ी प्लैटफ़ॉर्म पर expandedChange से expanded या open सेट करें।
ड्रॉअर को एक label दें, जैसे “मेल”। मोडल ड्रॉअर एक डायलॉग है, और लेबल उसका नाम है।
मोडल ड्रॉअर को ऐसे दिखने वाले मेन्यू बटन से खोलें जिसका अपना लेबल हो, जैसे “मेन्यू”।
open को सिंक में रखें: मोडल ड्रॉअर के बंद होने पर उसे false करें (प्लैटफ़ॉर्म के अनुसार onClose, बाइंडिंग या ड्रॉअर स्टेट से)।
SwiftUI पर, ड्रॉअर बंद होने के बाद कीबोर्ड फ़ोकस ख़ुद मेन्यू बटन को वापस दें।
React Native पर, ड्रॉअर बंद होने के बाद फ़ोकस ख़ुद मेन्यू बटन पर वापस ले जाएँ, अपने प्रॉडक्ट की भाषा में positionText दें, और TanreiProvider को विंडो के इनसेट दें।
हर गंतव्य का मान अनूठा रखें, और standard और मोडल रूपों में एक जैसा बनाए रखें।
filterable के साथ, फ़ील्ड को ऐसा filterLabel दें जो बताए कि वह क्या फ़िल्टर करता है (“नेविगेशन फ़िल्टर करें”), और filterCountText, filterEmptyText, filterClearLabel और filterPlaceholder के लिए अपने शब्द दें, ड्रॉअर पर या अपने प्रॉडक्ट के शब्दों में एक बार।

GitHub पर सोर्स कोड और इश्यू