เมนูที่ใช้นำทางในเว็บไซต์ หรือเรียกอีกอย่างว่า Breadcrumb เครื่องมือที่ใช้นำทางในเว็บไซต์ ช่วยให้ผุ้ใช้งานที่เข้าเว็บไซต์ของเรา ได้รู้ว่าตอนนี้อยู่ที่ส่วนไหนของเว็บไซต์ หรือก็คือ ระบบนำทางใน Website เพื่อให้ผู้ใช้สามารถเลือกไปใช้เดินทางในจุดสนใจใน Website ได้อย่างสะดวกสามารถเข้าถึงข้อมูลที่ต้องการได้อย่างรวดเร็ว และรู้ว่ากำลังอยู่ตรงไหนของเว็บไซต์ นอกจากนี้ยังสามารถไปได้ถึงทุก ๆ เพจในเว็บไซต์ นั้นได้ และสามารถที่จะกลับมาที่หน้าหลักของเว็บไซต์ ได้ด้วย ทำให้มีความสะดวกในเข้าลิงค์ และไปยังหน้าต่าง ๆ ที่เราได้เข้าไว้ทั้งหมดได้ ซึ่งใน bootstrap สามารถระบุตําแหน่งของหน้าปัจจุบันภายในลําดับชั้นการนําทางที่เพิ่มตัวคั่นโดยอัตโนมัติผ่าน CSS ซึ่งจะมีการเขียนโค้ดและการใช้งานดังนี้

 

การทำเมนูที่ใช้นำทางในเว็บไซต์ด้วย Bootstrap 5

ในการทำเมนูเราจะใช้ tag ol และ li ของ html ในการจัดลำดับลิงก์ต่าง ๆ และใน Bootstrap เราจะใช้คลาสคือ breadcrumb ในการทำเมนูชี้นำทาง และเรายังสามารถใช้ active เพื่อเอาไว้แสดงว่าหน้าอยู่นี้หรือหน้าที่อยู่ปัจจุบัน

ตัวอย่างการใช้ breadcrumb

    <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">เกี่ยวกับ</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="#">เกี่ยวกับ</a></li>
        <li class="breadcrumb-item active" aria-current="page">ข้อมูล</li>
      </ol>
    </nav>

ผลลัพธํที่ได้

การทำตัวชี้นำทางใน Bootstrap 5 ก็มี class ให้เราได้นำไปใช้งานได้
ตัวอย่างการใช้ class breadcrumb

ที่กั้นระหว่างกลางหรือ Dividers

Dividers จะถูกเพิ่มโดยอัตโนมัติใน CSS ผ่าน  ::before และ content สามารถเปลี่ยนแปลงได้โดยการแก้ไขคุณสมบัติที่กำหนดเอง CSS หรือผ่านตัวแปร Sass  และสําหรับคู่ RTL หากจําเป็น เราสามารถเริ่มต้นเป็นตัวแปร Sass ของเรา ซึ่งถูกตั้งค่าเป็นตัวเลือกรองสําหรับคุณสมบัติแบบกําหนดเอง ด้วยวิธีนี้เราจะได้รับตัวแบ่งส่วนกลางที่สามารถแทนที่ได้โดยไม่ต้องคอมไพล์ CSS ใหม่ได้

   <nav style="--bs-breadcrumb-divider: '>';" 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>

ผลลัพธ์ที่ได้

เราสามารถเปลี่ยนรูปที่คั้นเอาไว้อยู่ได้
การทำ Dividers

ซึ่งในตัวอย่างเราสามาารถใส่เครื่องหมายอื่น ๆ ใน dividers ได้

นอกจากนั้นเราสามารถใช้ไอคอน SVG แบบ embedded ได้อีกด้วย ใช้ผ่านคุณสมบัติ CSS ที่เรากําหนดเอาไว้หรือจะใช้ตัวแปร Sass

 <nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" 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>

ยังสามารถเอาการตั้งค่าตัวแบ่งออกได้ หรือตั้งค่าตัวแปร Sass เป็น .--bs-breadcrumb-divider: ''; หรือ $breadcrumb-divider: none;

    <nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">ข้อมูล</li>
      </ol>
    </nav>

ผลลัพธ์ที่ได้

เราสามารถกำหนดค่าใน css หรือ sass ในการเอาตัวคั่นออก
การทำ Dividers ไม่มีตัวคั่นกลางหรือตัวแบ่ง

 

ดังนั้นในการทำ breadcrumb หรือ ตัวชี้ทาง หรือตัวนำทางลิงก์ เราสามารถทำเพื่อให้เอาไปแสดงในหน้าปัจจุบันว่าก่อนหน้านี้เราได้เข้าเว็บเพจอะไรไป และในตัว Bootstrap เราสามารถนำไอคอน SVG ของ BootStrap 5 นำมาใช้งานตกแต่งที่คั่นกลางได้อีกด้วย

 

อ้างอิง :

Breadcrumb ,[ออนไลน์], เข้าถึงได้จาก https://getbootstrap.com/docs/5.0/components/breadcrumb/

Bootstrap Navigation Components ,[ออนไลน์], เข้าถึงได้จาก http://www.w3bai.com/th/bootstrap/bootstrap_ref_comp_navs.html#gsc.tab=0

Bootstrap 3 Breadcrumbs ,[ออนไลน์], เข้าถึงได้จาก https://www.quackit.com/bootstrap/bootstrap_3/tutorial/bootstrap_breadcrumbs.cfm

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
SQL JOIN: การรวมข้อมูลจากหลายตารางในฐานข้อมูล
โดย witsarutt000 พฤ 14 มี.ค. 2024 4:07 pm บอร์ด SQL Knowledge
1
166
พฤ 14 มี.ค. 2024 5:44 pm โดย Sirayu View Topic SQL JOIN: การรวมข้อมูลจากหลายตารางในฐานข้อมูล
PHP การเปลี่ยนแปลงที่สร้างปรากฏการณ์ในโลกของเว็บ
โดย witsarutt000 พฤ 14 มี.ค. 2024 11:17 am บอร์ด PHP Knowledge
0
125
พฤ 14 มี.ค. 2024 11:17 am โดย witsarutt000 View Topic PHP การเปลี่ยนแปลงที่สร้างปรากฏการณ์ในโลกของเว็บ
ปัญหา Harddisk ขึ้น 100% เวลาเซฟไฟล์ หรือภาพ จะค้่างที่หน้าแท๊บ Expolorer
โดย Thanavat_n พ 13 มี.ค. 2024 11:02 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
5
270
พ 13 มี.ค. 2024 1:34 pm โดย Thanavat_n View Topic ปัญหา Harddisk ขึ้น 100% เวลาเซฟไฟล์ หรือภาพ จะค้่างที่หน้าแท๊บ Expolorer
ตู้รองเท้า ไอเท็มวิเศษช่วยจัดระเบียบคอลเลกชันรองเท้าคู่โปรด
โดย @Foretoday อ 12 มี.ค. 2024 1:46 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
184
อ 12 มี.ค. 2024 1:46 pm โดย @Foretoday View Topic ตู้รองเท้า ไอเท็มวิเศษช่วยจัดระเบียบคอลเลกชันรองเท้าคู่โปรด
แนะนำสถานที่น่าเที่ยวในจังหวัดชุมพรพร้อมวิธีการเดินทาง
โดย witsarutt000 จ 11 มี.ค. 2024 6:14 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
142
จ 11 มี.ค. 2024 6:14 pm โดย witsarutt000 View Topic แนะนำสถานที่น่าเที่ยวในจังหวัดชุมพรพร้อมวิธีการเดินทาง
ย้าย VM ข้าม Host ด้วย scp กรณีศึกษา Vmware ESXI
โดย mindphp อ 10 มี.ค. 2024 4:36 am บอร์ด Linux - Web Server
0
239
อ 10 มี.ค. 2024 4:36 am โดย mindphp View Topic ย้าย VM ข้าม Host ด้วย scp กรณีศึกษา Vmware ESXI
IP และ vpn (VMware)
โดย ballmykids อ 10 มี.ค. 2024 2:35 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
203
จ 11 มี.ค. 2024 3:19 pm โดย ballmykids View Topic IP และ vpn (VMware)
แบบนี้ต้องทำยังไง ในกรณีที่ Server เดิมเราได้ทำการ Raid 1 กับ HDD 2 ลูกแรกแล้ว
โดย Anonymous ศ 08 มี.ค. 2024 7:02 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
166
ศ 08 มี.ค. 2024 8:12 pm โดย mindphp View Topic แบบนี้ต้องทำยังไง ในกรณีที่ Server เดิมเราได้ทำการ Raid 1 กับ HDD 2 ลูกแรกแล้ว