Lineone - Breadcrumb Element

Breadcrumb

Elements
Breadcrumb

Breadcrumb

Code

Breadcrumbs consist of a list of links that help a user visualize a page's location within the hierarchical structure of a website. Check out code for detail of usage.

Home
Elements
Breadcrumb

                
  <ul class="flex flex-wrap items-center space-x-2">
    <li class="flex items-center space-x-2">
      <a
        class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
        href="#"
        >Home</a
      >
      <svg
        x-ignore
        xmlns="http://www.w3.org/2000/svg"
        class="size-3.5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9 5l7 7-7 7"
        />
      </svg>
    </li>
    <li class="flex items-center space-x-2">
      <a
        class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
        href="#"
        >Elements</a
      >
      <svg
        x-ignore
        xmlns="http://www.w3.org/2000/svg"
        class="size-3.5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9 5l7 7-7 7"
        />
      </svg>
    </li>
    <li>Breadcrumb</li>
  </ul>

Separators

Code

Separators can be svg or any HTML chars. Check out code for detail of usage.

Home ⇒
Elements ⇒
Breadcrumb

Home ·
Elements ·
Breadcrumb

Home |
Elements |
Breadcrumb

Home /
Elements /
Breadcrumb

Home
Elements
Breadcrumb

                
  <ul class="flex flex-wrap items-center space-x-2">
    <li class="flex items-center space-x-2">
      <a
        class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
        href="#"
        >Home</a
      >
      <span> &DoubleRightArrow; </span>
    </li>
    <li class="flex items-center space-x-2">
      <a
        class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
        href="#"
        >Elements</a
      >
      <span> &DoubleRightArrow; </span>
    </li>
    <li>Breadcrumb</li>
  </ul>
  <ul class="flex flex-wrap items-center space-x-2">
    <li class="flex items-center space-x-2">
      <a
        class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
        href="#"
        >Home</a
      >
      <span> &centerdot; </span>
    </li>
    <li class="flex items-center space-x-2">
      <a
        class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
        href="#"
        >Elements</a
      >
      <span> &centerdot; </span>
    </li>
    <li>Breadcrumb</li>
  </ul>
  <ul class="flex flex-wrap items-center space-x-2">
    <li class="flex items-center space-x-2">
      <a
        class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
        href="#"
        >Home</a
      >
      <span class="text-xs font-light"> | </span>
    </li>
    <li class="flex items-center space-x-2">
      <a
        class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
        href="#"
        >Elements</a
      >
      <span class="text-xs font-light"> | </span>
    </li>
    <li>Breadcrumb</li>
  </ul>
  <ul class="flex flex-wrap items-center space-x-2">
    <li class="flex items-center space-x-2">
      <a
        class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
        href="#"
        >Home</a
      >
      <span class="text-xs font-light"> / </span>
    </li>
    <li class="flex items-center space-x-2">
      <a
        class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
        href="#"
        >Elements</a
      >
      <span class="text-xs font-light"> / </span>
    </li>
    <li>Breadcrumb</li>
  </ul>
  <ul class="flex flex-wrap items-center space-x-2">
    <li class="flex items-center space-x-2">
      <a
        class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
        href="#"
        >Home</a
      >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-3.5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M13 7l5 5m0 0l-5 5m5-5H6"
        />
      </svg>
    </li>
    <li class="flex items-center space-x-2">
      <a
        class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
        href="#"
        >Elements</a
      >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-3.5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M13 7l5 5m0 0l-5 5m5-5H6"
        />
      </svg>
    </li>
    <li>Breadcrumb</li>
  </ul>

With Icon

Code

Breadcrumb can have an icon. Check out code for detail of usage.

Elements
Calendar

                
  <ul class="flex flex-wrap items-center space-x-2">
    <li class="flex items-center space-x-2">
      <a
        class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
        href="#"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="size-4.5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.5"
            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
          />
        </svg>
      </a>
      <svg
        x-ignore
        xmlns="http://www.w3.org/2000/svg"
        class="size-3.5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9 5l7 7-7 7"
        />
      </svg>
    </li>
    <li class="flex items-center space-x-2">
      <a
        class="flex items-center space-x-1.5 text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
        href="#"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="size-4.5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.5"
            d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
          ></path>
        </svg>
        <span>Elements</span>
      </a>
      <svg
        x-ignore
        xmlns="http://www.w3.org/2000/svg"
        class="size-3.5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9 5l7 7-7 7"
        />
      </svg>
    </li>
    <li>
      <div class="flex items-center space-x-1.5">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="size-4.5 text-slate-400 dark:text-navy-300"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.5"
            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
          />
        </svg>
        <span>Calendar</span>
      </div>
    </li>
  </ul>

Bordered Breadcrumb

Code

Breadcrumb can be bordered. Check out code for detail of usage.

Elements
Calendar

                
  <ul class="flex flex-wrap items-center space-x-2">
    <li class="flex items-center space-x-2">
      <a
        class="rounded-lg border border-slate-200 px-1.5 py-1 leading-none text-primary transition-colors hover:text-primary-focus dark:border-navy-500 dark:text-accent-light dark:hover:text-accent"
        href="#"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="size-4.5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.5"
            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
          />
        </svg>
      </a>
      <svg
        x-ignore
        xmlns="http://www.w3.org/2000/svg"
        class="size-3.5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9 5l7 7-7 7"
        />
      </svg>
    </li>
    <li class="flex items-center space-x-2">
      <a
        class="flex items-center space-x-1.5 rounded-lg border border-slate-200 py-1 px-1.5 leading-none text-primary transition-colors hover:text-primary-focus dark:border-navy-500 dark:text-accent-light dark:hover:text-accent"
        href="#"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="size-4.5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.5"
            d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
          ></path>
        </svg>
        <span>Elements</span>
      </a>
      <svg
        x-ignore
        xmlns="http://www.w3.org/2000/svg"
        class="size-3.5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9 5l7 7-7 7"
        />
      </svg>
    </li>
    <li>
      <div class="flex items-center space-x-1.5">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="size-4.5 text-slate-400 dark:text-navy-300"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.5"
            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
          />
        </svg>
        <span>Calendar</span>
      </div>
    </li>
  </ul>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Breadcrumb

Breadcrumb

Separators

With Icon

Bordered Breadcrumb