การสร้าง Breadcrumbs ด้วย Tailwind CSS

การสร้าง Breadcrumbs ด้วย Tailwind CSS

Breadcrumbs เป็นส่วนประกอบ UI ที่ช่วยให้ผู้ใช้ทราบตำแหน่งปัจจุบันของพวกเขาในเว็บไซต์หรือแอปพลิเคชันของคุณ มันเป็นแถบนำทางที่แสดงลำดับชั้นของหน้าเว็บ โดยเริ่มจากหน้าแรก (Home) ไปจนถึงหน้าที่ผู้ใช้อยู่ในปัจจุบัน ในบทความนี้ เราจะมาเรียนรู้วิธีสร้าง Breadcrumbs ที่ใช้งานง่ายและสวยงามด้วย Tailwind CSS

โครงสร้าง HTML สำหรับ Breadcrumbs

เริ่มต้นด้วยโครงสร้าง HTML พื้นฐานสำหรับ Breadcrumbs ของเรา โดยทั่วไป Breadcrumbs จะถูกสร้างขึ้นโดยใช้ลิสต์ (list) ที่มีลิงก์ (link) แต่ละลิงก์แสดงถึงหน้าในลำดับชั้น

<nav aria-label="Breadcrumb" class="w-full">
  <ol class="list-none p-0 inline-flex space-x-2">
    <li>
      <div class="flex items-center">
        <a href="#" class="text-gray-500 hover:text-gray-700">Home</a>
        <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
      </div>
    </li>

    <li>
      <div class="flex items-center">
        <a href="#" class="text-gray-500 hover:text-gray-700">Products</a>
        <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
      </div>
    </li>

    <li>
      <a href="#" aria-current="page" class="text-gray-900 font-medium hover:text-gray-900">Details</a>
    </li>
  </ol>
</nav>

ในโค้ดนี้:

• เราใช้ <nav> element ที่มี aria-label="Breadcrumb" เพื่อให้โปรแกรมอ่านหน้าจอ (screen reader) ทราบว่านี่คือ Breadcrumbs
• เราใช้ <ol> element เพื่อสร้างรายการ Breadcrumbs
• แต่ละรายการ (<li>) ประกอบด้วยลิงก์ (<a>) และตัวคั่น (separator) ซึ่งในที่นี้คือ SVG arrow
• aria-current="page" attribute ถูกใช้กับลิงก์ที่แสดงถึงหน้าปัจจุบัน เพื่อบอกให้โปรแกรมอ่านหน้าจอทราบว่านี่คือหน้าที่ผู้ใช้อยู่

การปรับแต่งด้วย Tailwind CSS

เราใช้ utility classes ของ Tailwind CSS เพื่อจัดรูปแบบ Breadcrumbs ของเรา:

• w-full: กำหนดความกว้างให้เต็ม container
• list-none: ลบ bullet points ของลิสต์
• p-0: ลบ padding
• inline-flex: จัดเรียงรายการในบรรทัดเดียวกัน
• space-x-2: เพิ่มช่องว่างระหว่างรายการ
• text-gray-500: กำหนดสีข้อความเป็นสีเทา
• hover:text-gray-700: เปลี่ยนสีข้อความเป็นสีเทาเข้มขึ้นเมื่อ hover
• fill-current: กำหนดสี fill ของ SVG ให้เป็นสีข้อความปัจจุบัน
• w-3 h-3: กำหนดความกว้างและความสูงของ SVG
• mx-3: เพิ่ม margin ด้านข้างให้กับ SVG
• text-gray-900: กำหนดสีข้อความเป็นสีดำ
• font-medium: กำหนดความหนาของตัวอักษรเป็น medium

กรณีใช้งานจริงและข้อผิดพลาดที่พบบ่อย

1. การจัดการลำดับชั้นแบบไดนามิก: ในแอปพลิเคชันจริง ลำดับชั้นของ Breadcrumbs อาจเปลี่ยนแปลงได้ขึ้นอยู่กับหน้าที่ผู้ใช้อยู่ คุณจะต้องจัดการกับลำดับชั้นนี้แบบไดนามิก โดยอาจใช้ JavaScript หรือ logic ฝั่ง server
2. การจัดการกับชื่อหน้าที่ยาวเกินไป: หากชื่อหน้ายาวเกินไป อาจทำให้ Breadcrumbs ล้น container คุณสามารถใช้ CSS property `text-overflow: ellipsis` เพื่อตัดข้อความและแสดง ellipsis (...)
3. การจัดการกับหน้าแรก: Breadcrumbs ควรเริ่มต้นด้วยลิงก์ไปยังหน้าแรกเสมอ แม้ว่าผู้ใช้จะเข้าสู่หน้าภายในโดยตรงก็ตาม
4. การจัดการกับหน้าที่ไม่มีอยู่ในลำดับชั้น: บางครั้งอาจมีหน้าที่ไม่มีอยู่ในลำดับชั้น เช่น หน้า 404 คุณควรจัดการกับกรณีเหล่านี้อย่างเหมาะสม โดยอาจซ่อน Breadcrumbs หรือแสดงข้อความแสดงข้อผิดพลาด
5. การเข้าถึง (Accessibility): อย่าลืมใส่ `aria-label` attribute ให้กับ <nav> element เพื่อให้โปรแกรมอ่านหน้าจอสามารถระบุ Breadcrumbs ได้อย่างถูกต้อง และใช้ `aria-current="page"` กับลิงก์ที่แสดงถึงหน้าปัจจุบัน

ตัวอย่างโค้ดเพิ่มเติม: Breadcrumbs ที่มีความซับซ้อนมากขึ้น

สมมติว่าเรามีเว็บไซต์อีคอมเมิร์ซที่มีหมวดหมู่สินค้า, สินค้าย่อย, และรายละเอียดสินค้า เราสามารถสร้าง Breadcrumbs ที่มีความซับซ้อนมากขึ้นได้ดังนี้:

<nav aria-label="Breadcrumb" class="w-full">
  <ol class="list-none p-0 inline-flex space-x-2">
    <li>
      <div class="flex items-center">
        <a href="/" class="text-gray-500 hover:text-gray-700">Home</a>
        <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
      </div>
    </li>

    <li>
      <div class="flex items-center">
        <a href="/category/electronics" class="text-gray-500 hover:text-gray-700">Electronics</a>
        <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
      </div>
    </li>

    <li>
      <div class="flex items-center">
        <a href="/category/electronics/laptops" class="text-gray-500 hover:text-gray-700">Laptops</a>
        <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
      </div>
    </li>

    <li>
      <a href="/product/laptop-xyz" aria-current="page" class="text-gray-900 font-medium hover:text-gray-900">Laptop XYZ</a>
    </li>
  </ol>
</nav>

การปรับแต่งตัวคั่น (Separator)

ในตัวอย่างข้างต้น เราใช้ SVG arrow เป็นตัวคั่น แต่คุณสามารถใช้ตัวคั่นอื่นๆ ได้ตามต้องการ เช่น:

• Slash (/): <span class="mx-2 text-gray-500">/</span>
• Greater-than sign (>): <span class="mx-2 text-gray-500">></span>
• Custom icon: คุณสามารถใช้ icon font หรือ SVG icon ใดๆ ก็ได้

เพียงแค่เปลี่ยน SVG element ในโค้ด HTML ของเราด้วยตัวคั่นที่คุณต้องการ

ข้อควรระวัง

Breadcrumbs ควรถูกใช้ในลักษณะที่เหมาะสม และไม่ควรถูกใช้มากเกินไปในหน้าเว็บที่ไม่จำเป็น การใช้ Breadcrumbs มากเกินไปอาจทำให้ UX แย่ลงได้

สรุป

ในบทความนี้ เราได้เรียนรู้วิธีสร้าง Breadcrumbs ที่ใช้งานง่ายและสวยงามด้วย Tailwind CSS เราได้ครอบคลุมโครงสร้าง HTML พื้นฐาน, การปรับแต่งด้วย utility classes ของ Tailwind CSS, และกรณีใช้งานจริงที่พบบ่อย หวังว่าบทความนี้จะเป็นประโยชน์ในการสร้าง Breadcrumbs ที่มีประสิทธิภาพสำหรับเว็บไซต์หรือแอปพลิเคชันของคุณ