ब्रेडक्रंब कॉम्पोनेंट बनाना

उपयोगकर्ताओं को आपकी साइट पर नेविगेट करने के लिए, रिस्पॉन्सिव और ऐक्सेस किए जा सकने वाले ब्रेडक्रंब कॉम्पोनेंट बनाने का बुनियादी तरीका.

Adam Argyle

इस पोस्ट में, मुझे ब्रेडक्रंब कॉम्पोनेंट बनाने के तरीके के बारे में लोगों को बताना है. डेमो देखें.

डेमो

अगर आपको वीडियो देखना है, तो इस पोस्ट का YouTube वर्शन यहां देखें:

खास जानकारी

ब्रेडक्रंब कॉम्पोनेंट से पता चलता है कि उपयोगकर्ता, साइट के पेजों के क्रम में किस जगह पर है. इसका नाम हंसल और ग्रेटेल से लिया गया है. इन दोनों ने अंधेरे जंगल में, अपने पीछे ब्रेडक्रंब गिराए थे. इसके बाद, वे ब्रेडक्रंब को पीछे की ओर ट्रैक करके अपने घर का रास्ता ढूंढ पाए थे.

इस पोस्ट में मौजूद ब्रेडक्रंब मानक नहीं हैं ब्रेडक्रंब, तो वे ब्रेडक्रंब जैसे होते हैं. ये <select> के साथ नेविगेशन में, मिलते-जुलते पेजों को डालकर अतिरिक्त सुविधाएं देते हैं. इससे, कई लेवल का ऐक्सेस मिलता है.

बैकग्राउंड का UX

ऊपर दिए गए कॉम्पोनेंट डेमो वीडियो में, प्लेसहोल्डर की कैटगरी इनकी शैलियां हैं वीडियो गेम. यह ट्रेल, यहां दिए गए पाथ पर जाकर बनाया जाता है: home » rpg » indie » on sale, जैसा कि यहां दिखाया गया है.

इस ब्रेडक्रंब कॉम्पोनेंट से लोगों को, डेटा को एक जगह से दूसरी जगह ले जाने की सुविधा मिलनी चाहिए जानकारी की हैरारकी; अलग-अलग शाखाओं वाले हिस्सों में तेज़ी से जाएं और तेज़ी से पेजों को चुनें ज़्यादा सटीक होता है.

इन्फ़ॉर्मेशन आर्किटेक्चर

मुझे संग्रह और आइटम के बारे में सोचना उपयोगी लगता है.

कलेक्शन

कलेक्शन, विकल्पों का एक कलेक्शन होता है. इसके होम पेज से इस पोस्ट का ब्रेडक्रंब प्रोटोटाइप, एफ़पीएस, आरपीजी, ब्रॉलर, और कलेक्शन हैं तहखाने वाला क्रॉलर, खेल, और पहेली.

आइटम

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

कंप्यूटर साइंस के हिसाब से, यह ब्रेडक्रंब कॉम्पोनेंट एक मल्टीडाइमेंशनल ऐरे दिखाता है:

const rawBreadcrumbData = {
  "FPS": {...},
  "RPG": {
    "AAA": {...},
    "indie": {
      "new": {...},
      "on sale": {...},
      "under 5": {...},
    },
    "self published": {...},
  },
  "brawler": {...},
  "dungeon crawler": {...},
  "sports": {...},
  "puzzle": {...},
}

आपके ऐप्लिकेशन या वेबसाइट में कस्टम इन्फ़ॉर्मेशन आर्किटेक्चर (आईए) होगा, जो फिर भी मुझे कई तरह से डाइमेंशन बनाने की पेज और हैरारकी ट्रैवर्सल इसे आपके ब्रेडक्रंब में भी बना सकते हैं.

लेआउट

मार्कअप

अच्छे कॉम्पोनेंट सही एचटीएमएल से शुरू होते हैं. अगले सेक्शन में, मैं अपने के विकल्प और वे पूरे कॉम्पोनेंट पर कैसे असर डालते हैं.

डार्क और लाइट स्कीम

<meta name="color-scheme" content="dark light">

ऊपर दिए गए कॉलम में मौजूद color-scheme मेटा टैग स्निपेट, ब्राउज़र को बताता है कि इस पेज को हल्के और गहरे रंग वाला ब्राउज़र चाहिए शैलियां. ब्रेडक्रंब के उदाहरण में, इन कलर स्कीम के लिए कोई सीएसएस शामिल नहीं है. इसलिए, ब्रेडक्रंब ब्राउज़र के डिफ़ॉल्ट रंगों का इस्तेमाल करेंगे.

<nav class="breadcrumbs" role="navigation"></nav>

साइट नेविगेशन के लिए, <nav> एलिमेंट का इस्तेमाल करना सही है. इसमें ARIA का नेविगेशन का रोल शामिल होता है. जांच के दौरान, मैंने देखा कि role एट्रिब्यूट की वजह से स्क्रीन रीडर ने एलिमेंट के साथ इंटरैक्ट किया, तो असल में इसकी सूचना इस तौर पर दी गई थी: मैंने इसे जोड़ना चुना है.

आइकॉन

जब किसी पेज पर एक आइकॉन को दोहराया जाता है, तो SVG <use> एलिमेंट इसका मतलब है कि आप path को एक बार तय कर सकते हैं और इसका इस्तेमाल आइकन. इससे, एक ही पाथ की जानकारी दोहराया जाने से रोका जाता है. इससे, बड़े दस्तावेज़ बनते हैं और पाथ में अंतर हो सकता है.

इस तकनीक का इस्तेमाल करने के लिए, पेज में छिपा हुआ SVG एलिमेंट जोड़ें और आइकॉन को रैप करें यूनीक आईडी वाले <symbol> एलिमेंट में:

<svg style="display: none;">

  <symbol id="icon-home">
    <title>A home icon</title>
    <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
  </symbol>

  <symbol id="icon-dropdown-arrow">
    <title>A down arrow</title>
    <path d="M19 9l-7 7-7-7"/>
  </symbol>

</svg>

ब्राउज़र, SVG एचटीएमएल को पढ़ता है और आइकॉन की जानकारी को मेमोरी में सेव करता है. इसके बाद, वह आइकॉन के अन्य इस्तेमाल के लिए, आईडी का रेफ़रंस देकर पेज के बाकी हिस्से को पढ़ता है. जैसे:

<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
  <use href="#icon-home" />
</svg>

<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
  <use href="#icon-dropdown-arrow" />
</svg>

DevTools, रेंडर किए गए SVG के इस्तेमाल का एलिमेंट दिखा रहा है.

एक बार तय करें और जितनी बार चाहें उतनी बार इस्तेमाल करें. इससे पेज की परफ़ॉर्मेंस पर कम से कम असर पड़ेगा आसानी से इस्तेमाल किया जा सकता है. सूचना aria-hidden="true" को SVG एलिमेंट में जोड़ा गया है. यह आइकॉन किसी ऐसे व्यक्ति के लिए काम का नहीं है जो किसी व्यक्ति को सिर्फ़ कॉन्टेंट सुन रहा हो और वह छिपा हुआ हो उन्हें ऐसा करने से रोका जाता है.

यहां पर पारंपरिक ब्रेडक्रंब और इस कॉम्पोनेंट में मौजूद ब्रेडक्रंब अलग-अलग होते हैं. आम तौर पर, यह सिर्फ़ <a> लिंक होगा, लेकिन मैंने ट्रैवर्सल UX को छिपा हुआ विकल्प है. .crumb क्लास लिंक को अलग-अलग तरीके से समझाने और आइकॉन को दबाएं. हालांकि, .crumbicon का इस्तेमाल, आइकॉन को स्टैक करने और चुनने के लिए किया जाता है एलिमेंट को एक साथ कनेक्ट कर दिया जाता है. मैंने इसे स्प्लिट-लिंक कहा है, क्योंकि इसके फ़ंक्शन बहुत स्प्लिट बटन की तरह, पेज नेविगेशन के लिए.

<span class="crumb">
  <a href="#sub-collection-b">Category B</a>
  <span class="crumbicon">
    <svg>...</svg>
    <select class="disguised-select" title="Navigate to another category">
      <option>Category A</option>
      <option selected>Category B</option>
      <option>Category C</option>
    </select>
  </span>
</span>

लिंक और कुछ विकल्पों का होना कोई खास बात नहीं है. हालांकि, इससे सामान्य ब्रेडक्रंब में ज़्यादा फ़ंक्शन जुड़ जाते हैं. <select> एलिमेंट में title जोड़ने से, स्क्रीन रीडर इस्तेमाल करने वाले लोगों को बटन की कार्रवाई के बारे में जानकारी मिलती है. हालांकि, अन्य सभी लोगों को भी समान सहायता देता है, तो आपको iPad. एक एट्रिब्यूट, कई उपयोगकर्ताओं को बटन का कॉन्टेक्स्ट उपलब्ध कराता है.

स्क्रीनशॉट में दिख रहे चुनिंदा एलिमेंट को कर्सर घुमाते हुए दिखाया गया है और काम की टूलटिप दिख रही है.

सेपरेटर डेकोरेशन

<span class="crumb-separator" aria-hidden="true">→</span>

सेपरेटर का इस्तेमाल करना ज़रूरी नहीं है. किसी एक को जोड़ने से यह बहुत अच्छी तरह काम करता है (वीडियो में तीसरा उदाहरण देखें ऊपर). इसलिए, मैं हर aria-hidden="true" को देती हूं, क्योंकि वे सजावटी हैं और नहीं ऐसा नाम जो किसी स्क्रीन रीडर को पढ़कर सुनाए जाने की ज़रूरत होती है.

अगले लेख में बताई गई gap प्रॉपर्टी की मदद से, इनके बीच आसानी से स्पेसिंग की जा सकती है.

स्टाइल

रंग में सिस्टम के रंगों का इस्तेमाल किया जाता है. इसलिए, इसमें स्टाइल के लिए ज़्यादातर गैप और स्टैक होते हैं!

लेआउट की दिशा और फ़्लो

DevTools, फ़्लेक्सबॉक्स ओवरले की सुविधा के साथ ब्रेडक्रंब नेविगेशन अलाइनमेंट दिखा रहा है.

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

.breadcrumbs {
  --nav-gap: 2ch;

  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  padding: calc(var(--nav-gap) / 2);
}

एक ब्रेडक्रंब, फ़्लेक्सबॉक्स ओवरले के साथ वर्टिकल तौर पर अलाइन किया गया है.

हर .crumb, कुछ गैप के साथ वर्टिकल अलाइन किया गया हॉरिज़ॉन्टल लेआउट भी बनाता है. हालांकि, यह खास तौर पर अपने लिंक किए गए चाइल्ड एलिमेंट को टारगेट करता है और स्टाइल white-space: nowrap तय करता है. यह एक से ज़्यादा शब्दों वाले ब्रेडक्रंब के लिए ज़रूरी है, क्योंकि हम नहीं चाहते कि वे एक से ज़्यादा लाइन में दिखें. बाद में हम इस पोस्ट में, आपके विज्ञापन के लिए हॉरिज़ॉन्टल ओवरफ़्लो, इस white-space प्रॉपर्टी की वजह से हुआ.

.crumb {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--nav-gap) / 4);

  & > a {
    white-space: nowrap;

    &[aria-current="page"] {
      font-weight: bold;
    }
  }
}

aria-current="page" को जोड़ दिया गया है, ताकि मौजूदा पेज का लिंक आराम. स्क्रीन रीडर का इस्तेमाल करने वाले लोगों को यह साफ़ तौर पर पता चल जाएगा कि लिंक मौजूदा पेज के लिए है. साथ ही, हमने एलिमेंट को विज़ुअल स्टाइल दिया है, ताकि सामान्य उपयोगकर्ताओं को भी एक जैसा अनुभव मिल सके.

.crumbicon कॉम्पोनेंट, "लगभग अदृश्य" <select> एलिमेंट के साथ SVG आइकॉन को स्टैक करने के लिए ग्रिड का इस्तेमाल करता है.

ग्रिड DevTools में एक ऐसा बटन ओवरले है जिसमें लाइन और कॉलम, दोनों मौजूद हैं नाम वाला स्टैक.

.crumbicon {
  --crumbicon-size: 3ch;

  display: grid;
  grid: [stack] var(--crumbicon-size) / [stack] var(--crumbicon-size);
  place-items: center;

  & > * {
    grid-area: stack;
  }
}

<select> एलिमेंट, डीओएम में सबसे आखिर में होता है. इसलिए, यह स्टैक में सबसे ऊपर होता है और इंटरैक्टिव होता है. opacity: .01 स्टाइल जोड़ें, ताकि एलिमेंट का इस्तेमाल किया जा सके. इससे, आइकॉन के आकार के हिसाब से सही तरीके से फ़िट होने वाला चुनने का बॉक्स बन जाता है. यह <select> एलिमेंट के लुक को पसंद के मुताबिक बनाने का एक अच्छा तरीका है. पहले से मौजूद सुविधाओं को बनाए रखने में मदद मिलती है.

.disguised-select {
  inline-size: 100%;
  block-size: 100%;
  opacity: .01;
  font-size: min(100%, 16px); /* Defaults to 16px; fixes iOS zoom */
}

ओवरफ़्लो

ब्रेडक्रंब में बहुत लंबा ट्रेल दिखना चाहिए. मैं ज़रूरत पड़ने पर, चीज़ों को हॉरिज़ॉन्टल तौर पर स्क्रीन से बाहर जाने की अनुमति देने का समर्थक हूं. मुझे लगता है कि ब्रेडक्रंब कॉम्पोनेंट के लिए यह सही है.

.breadcrumbs {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: calc(var(--nav-gap) / 2);

  & > .crumb:last-of-type {
    scroll-snap-align: end;
  }

  @supports (-webkit-hyphens:none) { & {
    scroll-snap-type: none;
  }}
}

ओवरफ़्लो स्टाइल इन UX को सेट अप करती हैं:

  • ओवरस्क्रोल कंटेनमेंट के साथ हॉरिज़ॉन्टल स्क्रोलिंग.
  • हॉरिज़ॉन्टल स्क्रोल पैडिंग.
  • बचे हुए खाने के लिए एक स्नैप पॉइंट. इसका मतलब है कि पेज लोड होने पर, पहला स्नैप किया गया क्रंब लोड हो जाता है और दिखने लगता है.
  • Safari से स्नैप पॉइंट हटाता है. यह सुविधा, हॉरिज़ॉन्टल स्क्रोलिंग और स्नैप इफ़ेक्ट के कॉम्बिनेशन के साथ काम नहीं करती.

मीडिया क्वेरी

छोटे व्यूपोर्ट के लिए एक सूक्ष्म समायोजन "होम" छिपाना है लेबल, जा रहा है आइकन:

@media (width <= 480px) {
  .breadcrumbs .home-label {
    display: none;
  }
}

होम लेबल के साथ और उसके बिना, ब्रेडक्रंब के साथ-साथ तुलना.

सुलभता

मोशन

इस कॉम्पोनेंट में बहुत ज़्यादा मोशन नहीं है, लेकिन prefers-reduced-motion की जांच में ट्रांज़िशन करते हैं, तो हम अनचाही हलचल को रोक सकते हैं.

@media (prefers-reduced-motion: no-preference) {
  .crumbicon {
    transition: box-shadow .2s ease;
  }
}

इनमें से किसी भी स्टाइल को बदलने की ज़रूरत नहीं है. होवर और फ़ोकस इफ़ेक्ट बहुत अच्छे हैं और transition के बिना अर्थपूर्ण होता है, लेकिन अगर गति ठीक है, तो हम ट्रांज़िशन पर.

JavaScript

पहला, भले ही आप अपनी साइट या ऐप्लिकेशन में किसी भी तरह के राऊटर का इस्तेमाल करें, जब कोई उपयोगकर्ता ब्रेडक्रंब बदलता है, तो यूआरएल को अपडेट करना ज़रूरी होता है. इसके बाद उपयोगकर्ता को उचित पेज दिखाया गया. दूसरा, उपयोगकर्ता अनुभव को सामान्य बनाने के लिए, जब उपयोगकर्ता सिर्फ़ <select> ब्राउज़ कर रहे होते हैं, तो अचानक कोई नेविगेशन नहीं होता है के विकल्प.

JavaScript की मदद से उपयोगकर्ता अनुभव को बेहतर बनाने के लिए ये दो ज़रूरी उपाय हैं: <select> इवेंट ट्रिगर होने की रोकथाम को बदला गया और उत्सुकता से बदलने वाला.

<select> के इस्तेमाल की वजह से, उत्सुक घटना को रोकने की ज़रूरत है एलिमेंट. Windows Edge और शायद अन्य ब्राउज़र पर भी, जब उपयोगकर्ता कीबोर्ड से विकल्पों को ब्राउज़ करता है, तो चुनें changed इवेंट ट्रिगर होता है. इसलिए, इसे ईगर कहा जाता है, क्योंकि उपयोगकर्ता ने विकल्प को केवल स्यूडो चुना है, जैसे या फ़ोकस ने अभी तक enter या click से पसंद की पुष्टि नहीं की है. इग़र इवेंट की वजह से, इस कॉम्पोनेंट की कैटगरी बदलने की सुविधा का इस्तेमाल नहीं किया जा सकता. ऐसा इसलिए है, क्योंकि चुनने के लिए दिए गए बॉक्स को खोलने और किसी आइटम को ब्राउज़ करने से, इवेंट ट्रिगर हो जाएगा और उपयोगकर्ता के तैयार होने से पहले ही पेज बदल जाएगा.

<select> से बेहतर बदला गया इवेंट

const crumbs = document.querySelectorAll('.breadcrumbs select')
const allowedKeys = new Set(['Tab', 'Enter', ' '])
const preventedKeys = new Set(['ArrowUp', 'ArrowDown'])

// watch crumbs for changes,
// ensures it's a full value change, not a user exploring options via keyboard
crumbs.forEach(nav => {
  let ignoreChange = false

  nav.addEventListener('change', e => {
    if (ignoreChange) return
    // it's actually changed!
  })

  nav.addEventListener('keydown', ({ key }) => {
    if (preventedKeys.has(key))
      ignoreChange = true
    else if (allowedKeys.has(key))
      ignoreChange = false
  })
})

इसके लिए रणनीति यह है कि हर <select> पर कीबोर्ड डाउन इवेंट को देखा जाए एलिमेंट खोलें और तय करें कि दबाई गई कुंजी नेविगेशन की पुष्टि थी या नहीं (Tab या Enter) या स्पेशल नेविगेशन (ArrowUp या ArrowDown). इसके साथ तय करने के बाद, कॉम्पोनेंट इंतज़ार करने या जाने का फ़ैसला ले सकता है, तो <select> एलिमेंट ट्रिगर होता है.

नतीजा

अब जब आपको पता है कि मैंने इसे कैसे किया, तो आप कैसे करेंगे ‽ 🙂

आइए, अलग-अलग तरीकों का इस्तेमाल करके, वेब पर कॉन्टेंट बनाने के सभी तरीके जानें. डेमो बनाएं और मुझे ट्वीट करें लिंक भेजें. हम इसे कम्यूनिटी रीमिक्स सेक्शन में जोड़ देंगे!

कम्यूनिटी रीमिक्स