Breadcrumb Navigation

Breadcrumb navigation คืออะไร? ในบทความนี้เราจะมาทำความรู้จักกัน

Breadcrumb คือ เครื่องมือที่ใช้นำทางในเว็บไซต์ของเรา ทำให้ผู้ใช้รู้ว่าอยู่ส่วนใดของเว็บ เข้ามาจากหน้า Home เท่าไหร่ และอาจเป็นตัวนำทางให้ผู้ใช้กลับไปยังลิ้งค์ก่อนหน้าได้ เป็นส่วนช่วยให้ผู้ใช้งาน เกิด UX ที่ดีต่อเว็บของเราอีกด้วย

ก่อนอื่นก็เราจะใช้ tag<ul> และ <li> สร้าง list ขึ้นมาก่อน แบบนี้

<ul class=”breadcrumb”>
 <li><a href=”#”>Home</a></li>
 <li><a href=”#”>หนังสือ</a></li>
 <li><a href=”#”>หมวดหมู่ วรรณกรรมเยาวชน</a></li>
 <li>แฮร์รี่ พอตเตอร์</li>
</ul>

แล้วค่อยใส่ CSS มาตกแต่ง ถ้างั้นไปดูโค้ดเวอร์ชั่นเต็มกันเลย~

จะเห็นได้ว่า Breadcrumb มีประโยชน์ต่อการใช้งานเว็บไซต์ของเราและยังช่วยสร้าง UX ที่ดีให้กับผู้ใช้ แถมวิธีทำก็ไม่ยาก ลองนำไปใช้กันดูนะ แล้วพบกันใหม่ในบทความหน้านะจ๊ะ :)