เจอคำถามหนึ่งเดี่ยวกับ navlink ,navbar, pathway 3 คำนี้เป็นเรื่องเดียวกัน ตัวบอกตำแหน่งเมนูบนหน้าเว็บ

[mindphp]

มีคำถามอยู่ว่าประมาฯนี้

ขอสอบถามหน่อยครับ tailwind css มีคลาสในการจัดการพวก navlink ไหมครับ อย่างใน bootstrap มี nav-link action ของ tailwind มีไหมครับ พอดีหามา 3 ชมแล้วจริงๆ ไม่เจอครับ นอกจากต้องเขียนเองหมด แถมต้องเขียนยาวด้วยเพื่อให้สลับสีตอนกดเมนู หรือท่านใดมีอะไรแนะนำบ้างไหมครับ

จากคำถามคงมีการค้นหาด้วยตัวเองโดยใช้เวลาไป หลายชม. ที่ไม่เจอข้อมูลอาจเป็นเพราะ Keyword ที่ใช้ค้นไม่ตรงกับ lib ที่ใช้
นอกจาก คำว่า navlink ,navbar, pathway แล้ว ยังมีอีกคำที่ใช้ คือ Breadcrumbs คือตัวบอกตำแหน่งเมนูบนหน้าเว็บ
ถ้าเปลี่ยนใช้ Keyword

Tailwind CSS Breadcrumbs

ก็จะเจอ ตัวอย่างมามายเช่น
https://flowbite.com/docs/components/breadcrumb/
ตัวอย่างโค้ด

โค้ด: เลือกทั้งหมด

<nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-3">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
        <svg class="w-3 h-3 mr-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
        </svg>
        Home
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2 dark:text-gray-400 dark:hover:text-white">Projects</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">Flowbite</span>
      </div>
    </li>
  </ol>
</nav>

https://tailwind-elements.com/docs/stan ... eadcrumbs/
ตัวอย่างโค้ด

โค้ด: เลือกทั้งหมด

<!--First breadcrumb-->
<nav class="w-full rounded-md">
  <ol class="list-reset flex">
    <li class="text-neutral-500 dark:text-neutral-400">Home</li>
  </ol>
</nav>

<!--Second breadcrumb-->
<nav class="w-full rounded-md">
  <ol class="list-reset flex">
    <li>
      <a
        href="#"
        class="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
        >Home</a
      >
    </li>
    <li>
      <span class="mx-2 text-neutral-500 dark:text-neutral-400">/</span>
    </li>
    <li class="text-neutral-500 dark:text-neutral-400">Library</li>
  </ol>
</nav>

<!--Third breadcrumb-->
<nav class="w-full rounded-md">
  <ol class="list-reset flex">
    <li>
      <a
        href="#"
        class="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
        >Home</a
      >
    </li>
    <li>
      <span class="mx-2 text-neutral-500 dark:text-neutral-400">/</span>
    </li>
    <li>
      <a
        href="#"
        class="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
        >Library</a
      >
    </li>
    <li>
      <span class="mx-2 text-neutral-500 dark:text-neutral-400">/</span>
    </li>
    <li class="text-neutral-500 dark:text-neutral-400">Data</li>
  </ol>
</nav>