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-reverse space-x-2">
    <li class="flex items-center  space-x-reverse 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="M15 19l-7-7 7-7"
        />
      </svg>
    </li>
    <li class="flex items-center  space-x-reverse 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="M15 19l-7-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

                
  <div class="space-y-4">
    <ul class="flex flex-wrap items-center  space-x-reverse space-x-2">
      <li class="flex items-center  space-x-reverse 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> &DoubleLeftArrow; </span>
      </li>
      <li class="flex items-center  space-x-reverse 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> &DoubleLeftArrow; </span>
      </li>
      <li>Breadcrumb</li>
    </ul>
    <ul class="flex flex-wrap items-center  space-x-reverse space-x-2">
      <li class="flex items-center  space-x-reverse 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-reverse 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-reverse space-x-2">
      <li class="flex items-center  space-x-reverse 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-reverse 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-reverse space-x-2">
      <li class="flex items-center  space-x-reverse 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-reverse 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-reverse space-x-2">
      <li class="flex items-center  space-x-reverse 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-reverse 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>
  </div>

With Icon

Code

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

Elements
Calendar

                
  <div class="space-y-4">
    <ul class="flex flex-wrap items-center  space-x-reverse space-x-2">
      <li class="flex items-center  space-x-reverse 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="M15 19l-7-7 7-7"
          />
        </svg>
      </li>
      <li class="flex items-center  space-x-reverse space-x-2">
        <a
          class="flex items-center  space-x-reverse 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"
            />
          </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="M15 19l-7-7 7-7"
          />
        </svg>
      </li>
      <li>
        <div class="flex items-center  space-x-reverse 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>
  </div>

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-reverse space-x-2">
      <li class="flex items-center  space-x-reverse 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="M15 19l-7-7 7-7"
          />
        </svg>
      </li>
      <li class="flex items-center  space-x-reverse space-x-2">
        <a
          class="flex items-center  space-x-reverse 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"
            />
          </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="M15 19l-7-7 7-7"
          />
        </svg>
      </li>
      <li>
        <div class="flex items-center  space-x-reverse 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