เกล็ดขนมปัง
ระบุตำแหน่งของเพจปัจจุบันภายในลำดับชั้นการนำทางที่เพิ่มตัวคั่นผ่าน CSS โดยอัตโนมัติ
ตัวอย่าง
<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>
การเปลี่ยนตัวคั่น
ตัวคั่นจะถูกเพิ่มโดยอัตโนมัติใน CSS ผ่าน::before
และcontent
. พวกเขาสามารถเปลี่ยนแปลงได้โดยการ$breadcrumb-divider
เปลี่ยน จำเป็นต้องใช้ ฟังก์ชันใบเสนอราคาเพื่อสร้างเครื่องหมายคำพูดรอบสตริง ดังนั้นหากคุณต้องการ>
เป็นตัวคั่น คุณสามารถใช้สิ่งนี้:
$breadcrumb-divider: quote(">");
คุณยังสามารถใช้ไอคอน SVG แบบฝัง base64 ได้ :
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
ตัวคั่นสามารถลบได้โดยการตั้งค่า$breadcrumb-divider
เป็นnone
:
$breadcrumb-divider: none;
การเข้าถึง
เนื่องจากเบรดครัมบ์ให้การนำทาง จึงเป็นความคิดที่ดีที่จะเพิ่มป้ายกำกับที่สื่อความหมาย เช่นaria-label="breadcrumb"
เพื่ออธิบายประเภทของการนำทางที่มีให้ใน<nav>
องค์ประกอบ รวมถึงการนำไปใช้aria-current="page"
กับรายการสุดท้ายของชุดเพื่อระบุว่าแสดงถึงหน้าปัจจุบัน
สำหรับข้อมูลเพิ่มเติม โปรดดู รูปแบบเบรด ครัมบ์ของ ARIA Authoring Practices Guide