Bulma এর Breadcrumbs Component

Breadcrumbs কম্পোনেন্ট ওয়েবসাইটের নেভিগেশন সিস্টেমে ব্যবহৃত হয়, যাতে ব্যবহারকারী তার বর্তমান অবস্থান এবং ওয়েবসাইটের অন্যান্য পৃষ্ঠায় সহজে নেভিগেট করতে পারে। এটি সাধারণত পেজের উপরের অংশে ব্যবহৃত হয় এবং ইউজারকে ওয়েবসাইটের সাইট স্ট্রাকচার বা পেজ হায়ারার্কি বুঝতে সাহায্য করে।

Bulma ফ্রেমওয়ার্কে Breadcrumbs কম্পোনেন্টটি খুব সহজেই তৈরি করা যায় এবং এটি একটি স্টাইলিশ এবং রেসপনসিভ নেভিগেশন উপাদান হিসেবে কাজ করে।

১. Bulma এর Breadcrumbs কম্পোনেন্ট তৈরি করা

Bulma তে Breadcrumbs কম্পোনেন্টটি একটি লিস্ট হিসেবে তৈরি করা হয়, যেখানে প্রতিটি লিস্ট আইটেম একটি নেভিগেশন লিঙ্ক রূপে প্রদর্শিত হয়।

Basic Breadcrumbs তৈরি করা

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li><a href="#">Data</a></li>
    <li class="is-active"><a href="#" aria-current="page">File</a></li>
  </ul>
</nav>

এখানে:

• breadcrumb: এটি বুলমার ক্লাস, যা একটি বেসিক ব্ৰেডক্রাম্ব স্টাইল অ্যাপ্লাই করে।
• ul: লিস্টের উপাদান যা ব্ৰেডক্রাম্বের আইটেম ধারণ করে।
• li: প্রতিটি ব্ৰেডক্রাম্ব আইটেমকে রিপ্রেজেন্ট করে।
• is-active: এই ক্লাসটি বর্তমানে সিলেক্ট করা আইটেমের জন্য ব্যবহৃত হয়, যা ইউজারের বর্তমান অবস্থান নির্দেশ করে।

এখানে, "Home", "Library", এবং "Data" লিঙ্কের মাধ্যমে ইউজার পূর্ববর্তী পেজগুলিতে নেভিগেট করতে পারে, এবং "File" হল বর্তমান পেজ, যার জন্য is-active ক্লাস ব্যবহার করা হয়েছে।

২. Bulma এর Breadcrumbs কাস্টমাইজেশন

Bulma তে Breadcrumbs কম্পোনেন্টটি কাস্টমাইজ করতে আপনি CSS ক্লাস ব্যবহার করে বিভিন্ন স্টাইল পরিবর্তন করতে পারেন, যেমন:

• স্টাইল পরিবর্তন
• অর্ডার বা সিকোয়েন্স পরিবর্তন
• অন্যান্য ডিজাইন টুইক

Breadcrumbs এর ডিজাইন কাস্টমাইজেশন

<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Documentation</a></li>
    <li class="is-active"><a href="#" aria-current="page">Web Design</a></li>
  </ul>
</nav>

এখানে:

• has-succeeds-separator: এই ক্লাসটি ব্ৰেডক্রাম্বে প্রতিটি আইটেমের মধ্যে একটি সেপারেটর (separator) যোগ করে, যেটি আগের আইটেমের সাথে পরবর্তী আইটেমকে আলাদা করে।

এছাড়াও আপনি has-arrow-separator ব্যবহার করে আর্মি সেপারেটর হিসেবে তীর চিহ্ন যোগ করতে পারেন:

<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Tutorials</a></li>
    <li class="is-active"><a href="#" aria-current="page">CSS</a></li>
  </ul>
</nav>

Breadcrumbs এর স্টাইল পরিবর্তন করা

আপনি চাইলে breadcrumb কম্পোনেন্টটির রঙ, প্যাডিং, মার্জিন ইত্যাদি CSS দিয়ে কাস্টমাইজ করতে পারেন। যেমন:

<style>
  .breadcrumb {
    background-color: #f5f5f5;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
</style>

এখানে, background-color, border-radius, এবং box-shadow স্টাইল প্রোপার্টি ব্যবহার করে ব্ৰেডক্রাম্বকে আরও স্টাইলিশ করা হয়েছে।

৩. Breadcrumbs এবং অন্যান্য উপাদানগুলোর সাথে ইন্টিগ্রেশন

Breadcrumbs কম্পোনেন্টটি সহজে অন্যান্য নেভিগেশন এবং UI উপাদানগুলোর সাথে ইন্টিগ্রেট করা যায়। উদাহরণস্বরূপ, আপনি এটি একটি নেভিগেশন বারের অংশ হিসেবে যুক্ত করতে পারেন বা পেজের হেডারে যুক্ত করতে পারেন।

Breadcrumbs একটি Header এর মধ্যে

<header class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Web Design Tutorials</h1>
      <nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Tutorials</a></li>
          <li class="is-active"><a href="#" aria-current="page">CSS</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

এখানে, Breadcrumbs কম্পোনেন্টটি একটি hero সেকশনের মধ্যে রাখা হয়েছে, যা সাইটের হেডারের অংশ হিসেবে ব্যবহৃত হয়। এর ফলে, ব্ৰেডক্রাম্বের সাথে টাইটেল এবং অন্যান্য কন্টেন্টও একত্রে প্রদর্শিত হবে।

৪. Breadcrumbs এর অ্যাক্সেসিবিলিটি

Breadcrumbs কম্পোনেন্টের অ্যাক্সেসিবিলিটি বাড়াতে, আপনি aria-label এবং aria-current অ্যাট্রিবিউট ব্যবহার করতে পারেন। এগুলো স্ক্রীন রিডার এবং অন্যান্য অ্যাসিস্টিভ টেকনোলজির জন্য সহায়ক।

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="is-active"><a href="#" aria-current="page">Books</a></li>
  </ul>
</nav>

এখানে:

• aria-label: এটি ব্ৰেডক্রাম্বের উদ্দেশ্য এবং কনটেক্সট স্ক্রীন রিডারকে জানায়।
• aria-current="page": এটি নির্দেশ করে যে এই লিঙ্কটি বর্তমান পেজ বা সেকশনের অংশ।

সারাংশ

Bulma তে Breadcrumbs কম্পোনেন্টটি খুব সহজে তৈরি এবং কাস্টমাইজ করা যায়, এবং এটি ওয়েবসাইটের নেভিগেশন ব্যবস্থাকে আরও সহজ এবং ইন্টারঅ্যাকটিভ করে তোলে। Breadcrumbs ব্যবহারকারীদের বর্তমান অবস্থান প্রদর্শন করে এবং তাদের পূর্ববর্তী পৃষ্ঠাগুলোর সাথে সম্পর্ক তৈরি করতে সহায়তা করে। Bulma তে আপনি এটি বিভিন্ন স্টাইল এবং ক্লাস ব্যবহার করে কাস্টমাইজ করতে পারেন, এবং এটি অন্যান্য নেভিগেশন উপাদানগুলোর সাথে খুব সহজে ইন্টিগ্রেট করা যায়।