Breadcrumb

CSS မှတစ်ဆင့် ခြားနားချက်များကို အလိုအလျောက် ထည့်သွင်းပေးသည့် လမ်းကြောင်းဆိုင်ရာ အထက်တန်းအဆင့်အတွင်း လက်ရှိစာမျက်နှာ၏ တည်နေရာကို ညွှန်ပြပါ။

ခြုံငုံသုံးသပ်ချက်

Separators များကို CSS မှတဆင့် ::beforeနှင့် content.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

သုံးစွဲနိုင်မှု

breadcrumbs သည် လမ်းကြောင်းပြခြင်းကို ပံ့ပိုးပေးသောကြောင့်၊ ၎င်းသည် ဒြပ်စင် aria-label="breadcrumb"တွင် ပံ့ပိုးပေးထားသည့် လမ်းညွှန်မှုအမျိုးအစားကို ဖော်ပြရန် နှင့် လက်ရှိစာမျက်နှာကို ကိုယ်စားပြုကြောင်းဖော်ပြရန် အစုံလိုက်၏ နောက်ဆုံးအကြောင်းအရာကို အသုံးပြုခြင်း ကဲ့သို့သော အဓိပ္ပာယ်ပြည့်ဝသော အညွှန်းတစ်ခုကို ထည့်ခြင်းသည် ကောင်းပါတယ် ။<nav>aria-current="page"

ပိုမိုသိရှိလိုပါက၊ WAI-ARIA Authoring Practices ကို breadcrumb ပုံစံအတွက် ကြည့်ပါ ။