একটি breadcrumbs উপাদান নির্মাণ

ব্যবহারকারীদের আপনার সাইট নেভিগেট করার জন্য একটি প্রতিক্রিয়াশীল এবং অ্যাক্সেসযোগ্য ব্রেডক্রাম্বস উপাদান কীভাবে তৈরি করবেন তার একটি মৌলিক সারসংক্ষেপ।

অ্যাডাম আরগাইল

এই পোস্টে আমি ব্রেডক্রাম্বের উপাদান তৈরির উপায় সম্পর্কে আমার চিন্তাভাবনা শেয়ার করতে চাই। ডেমোটি চেষ্টা করে দেখুন ।

ডেমো

যদি আপনি ভিডিও পছন্দ করেন, তাহলে এই পোস্টের একটি ইউটিউব সংস্করণ এখানে দেওয়া হল:

সংক্ষিপ্ত বিবরণ

একটি ব্রেডক্রাম্বস কম্পোনেন্ট দেখায় যে ব্যবহারকারী সাইটের শ্রেণিবিন্যাসে কোথায় আছেন। নামটি হ্যানসেল এবং গ্রেটেলের , যারা কিছু অন্ধকার জঙ্গলে তাদের পিছনে ব্রেডক্রাম্বস ফেলেছিলেন এবং টুকরোগুলি পিছনের দিকে ট্রেস করে তাদের বাড়ি ফিরে যেতে সক্ষম হন।

এই পোস্টের ব্রেডক্রাম্বগুলি স্ট্যান্ডার্ড ব্রেডক্রাম্ব নয়, এগুলি ব্রেডক্রাম্বের মতো। এগুলি <select> দিয়ে সরাসরি নেভিগেশনে ভাইবোন পৃষ্ঠাগুলি রেখে অতিরিক্ত কার্যকারিতা প্রদান করে, যার ফলে বহু-স্তরযুক্ত অ্যাক্সেস সম্ভব হয়।

ব্যাকগ্রাউন্ড ইউএক্স

উপরের কম্পোনেন্ট ডেমো ভিডিওতে, প্লেসহোল্ডার বিভাগগুলি ভিডিও গেমের ধরণ। এই পথটি নিম্নলিখিত পথটি নেভিগেট করে তৈরি করা হয়েছে: home » rpg » indie » on sale , যেমনটি নীচে দেখানো হয়েছে।

এই ব্রেডক্রাম্ব উপাদানটি ব্যবহারকারীদের তথ্যের এই শ্রেণিবিন্যাসের মধ্য দিয়ে যেতে সক্ষম করবে; শাখা-প্রশাখা লাফিয়ে দ্রুততা এবং নির্ভুলতার সাথে পৃষ্ঠা নির্বাচন করবে।

তথ্য স্থাপত্য

সংগ্রহ এবং জিনিসপত্রের দিক থেকে চিন্তা করা আমার কাছে সহায়ক বলে মনে হয়।

সংগ্রহ

একটি সংগ্রহ হল বেছে নেওয়ার জন্য বিভিন্ন বিকল্পের একটি বিন্যাস। এই পোস্টের ব্রেডক্রাম্ব প্রোটোটাইপের হোমপেজ থেকে, সংগ্রহগুলি হল FPS, RPG, brawler, dungeon crawler, sports এবং puzzle।

আইটেম

একটি ভিডিও গেম হল একটি আইটেম, একটি নির্দিষ্ট সংগ্রহ অন্য একটি সংগ্রহের প্রতিনিধিত্ব করলে এটি একটি আইটেমও হতে পারে। উদাহরণস্বরূপ, RPG হল একটি আইটেম এবং একটি বৈধ সংগ্রহ। যখন এটি একটি আইটেম হয়, তখন ব্যবহারকারী সেই সংগ্রহ পৃষ্ঠায় থাকে। উদাহরণস্বরূপ, তারা RPG পৃষ্ঠায় থাকে, যা RPG গেমগুলির একটি তালিকা প্রদর্শন করে, যার মধ্যে অতিরিক্ত উপবিভাগ AAA, Indie এবং Self Published অন্তর্ভুক্ত থাকে।

কম্পিউটার বিজ্ঞানের ভাষায়, এই ব্রেডক্রাম্বস উপাদানটি একটি বহুমাত্রিক অ্যারে প্রতিনিধিত্ব করে:

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

আপনার অ্যাপ বা ওয়েবসাইটে কাস্টম ইনফরমেশন আর্কিটেকচার (IA) থাকবে যা একটি ভিন্ন বহুমাত্রিক অ্যারে তৈরি করবে, তবে আমি আশা করি সংগ্রহের ল্যান্ডিং পৃষ্ঠা এবং শ্রেণিবিন্যাসের ট্রাভার্সাল ধারণাটি আপনার ব্রেডক্রাম্বেও স্থান করে নিতে পারবে।

লেআউট

মার্কআপ

ভালো কম্পোনেন্টগুলো উপযুক্ত HTML দিয়ে শুরু হয়। পরবর্তী অংশে আমি আমার মার্কআপ পছন্দগুলি এবং সামগ্রিক কম্পোনেন্টের উপর তাদের প্রভাব সম্পর্কে আলোচনা করব।

অন্ধকার এবং হালকা স্কিম 

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

উপরের স্নিপেটে থাকা color-scheme মেটা ট্যাগ ব্রাউজারকে জানায় যে এই পৃষ্ঠাটি হালকা এবং গাঢ় ব্রাউজার স্টাইল চায়। উদাহরণ ব্রেডক্রাম্বস-এ এই রঙের স্কিমের জন্য কোনও CSS অন্তর্ভুক্ত নেই, এবং তাই ব্রেডক্রাম্বস ব্রাউজার দ্বারা প্রদত্ত ডিফল্ট রঙ ব্যবহার করবে।

<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 HTML পড়ে, আইকনের তথ্য মেমোরিতে রাখে এবং আইকনের অতিরিক্ত ব্যবহারের জন্য আইডি উল্লেখ করে পৃষ্ঠার বাকি অংশের সাথে কাজ চালিয়ে যায়, যেমন:

<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 আইকন এবং নির্বাচন উপাদান একসাথে স্ট্যাক করার জন্য দায়ী। আমি এটিকে একটি split-link বলেছি কারণ এর ফাংশনগুলি একটি split-button এর মতোই, তবে পৃষ্ঠা নেভিগেশনের জন্য।

<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 আইকন স্ট্যাক করার জন্য গ্রিড ব্যবহার করে।

গ্রিড ডেভটুলগুলিতে একটি বোতাম ওভারলে করা দেখানো হয়েছে যেখানে সারি এবং কলাম উভয়কেই স্ট্যাক বলা হয়েছে।

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

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

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

<select> এলিমেন্টটি DOM-এর শেষ স্থানে থাকে, তাই এটি স্ট্যাকের উপরে থাকে এবং ইন্টারেক্টিভ থাকে। opacity: .01 যাতে এলিমেন্টটি এখনও ব্যবহারযোগ্য থাকে, এবং ফলাফল হল একটি select বক্স যা আইকনের আকারের সাথে পুরোপুরি ফিট করে। এটি একটি <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 ছাড়াই হোভার এবং ফোকাস ইফেক্টগুলি দুর্দান্ত এবং অর্থবহ, তবে যদি গতি ঠিক থাকে, তাহলে আমরা মিথস্ক্রিয়ায় একটি সূক্ষ্ম ট্রানজিশন যুক্ত করব।

জাভাস্ক্রিপ্ট

প্রথমত, আপনার সাইট বা অ্যাপ্লিকেশনে আপনি যে ধরণের রাউটার ব্যবহার করেন না কেন, যখন কোনও ব্যবহারকারী ব্রেডক্রাম্ব পরিবর্তন করেন, তখন URL আপডেট করতে হবে এবং ব্যবহারকারীকে উপযুক্ত পৃষ্ঠাটি দেখানো উচিত। দ্বিতীয়ত, ব্যবহারকারীর অভিজ্ঞতা স্বাভাবিক করার জন্য, নিশ্চিত করুন যে ব্যবহারকারীরা যখন কেবল <select> বিকল্পগুলি ব্রাউজ করছেন তখন কোনও অপ্রত্যাশিত নেভিগেশন না ঘটে।

জাভাস্ক্রিপ্ট দ্বারা পরিচালিত দুটি গুরুত্বপূর্ণ ব্যবহারকারীর অভিজ্ঞতার পরিমাপ: select has changed এবং eager <select> change ইভেন্ট ফায়ারিং প্রতিরোধ।

<select> এলিমেন্ট ব্যবহারের কারণে eaer ইভেন্ট প্রিভেনশনের প্রয়োজন। Windows Edge এবং সম্ভবত অন্যান্য ব্রাউজারেও, ব্যবহারকারী যখন কীবোর্ড দিয়ে অপশন ব্রাউজ করেন তখন select changed ইভেন্টটি চালু হয়। এই কারণেই আমি এটিকে eager বলেছি, কারণ ব্যবহারকারী কেবল hover বা focus এর মতো অপশনটি সিলেক্ট করেছেন, কিন্তু enter বা click দিয়ে পছন্দটি নিশ্চিত করেননি। eaer ইভেন্টটি এই কম্পোনেন্ট ক্যাটাগরি পরিবর্তন বৈশিষ্ট্যটিকে অ্যাক্সেসযোগ্য করে তোলে, কারণ select বক্সটি খোলার পরে কেবল একটি আইটেম ব্রাউজ করলে ইভেন্টটি চালু হবে এবং ব্যবহারকারী প্রস্তুত হওয়ার আগেই পৃষ্ঠাটি পরিবর্তন হবে।

একটি উন্নত <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> এলিমেন্টের ইভেন্টটি চালু হলে অপেক্ষা করার বা চলে যাওয়ার সিদ্ধান্ত নিতে পারে।

উপসংহার

এখন তুমি জানো আমি এটা কিভাবে করেছি, তুমি কিভাবে করবে‽ 🙂

আসুন আমরা আমাদের পদ্ধতিগুলিকে বৈচিত্র্যময় করি এবং ওয়েবে তৈরি করার সমস্ত উপায় শিখি। একটি ডেমো তৈরি করুন, আমাকে লিঙ্কগুলি টুইট করুন , এবং আমি এটি নীচের কমিউনিটি রিমিক্স বিভাগে যুক্ত করব!

কমিউনিটি রিমিক্স