Breadcrumb

A hierachical inidicator component to display current location

Properties#

Name	Description
.breadcrumb	The breadcrumb component container
.breadcrumb-item	The breadcrumb controller component

Features#

default#

<ul class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="#">Home</a>
  </li>
  <li class="breadcrumb-item px-2">
    /
  </li>
  <li class="breadcrumb-item">
    <a href="#">Mypage</a>
  </li>
  <li class="breadcrumb-item px-2">
    /
  </li>
  <li class="breadcrumb-item active">
    <span>Setting</span>
  </li>
</ul>

character separator#

<ul class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="#">Home</a>
  </li>
  <li class="breadcrumb-item px-2">
    >
  </li>
  <li class="breadcrumb-item">
    <a href="#">Mypage</a>
  </li>
  <li class="breadcrumb-item px-2">
    >
  </li>
  <li class="breadcrumb-item active">
    <span>Setting</span>
  </li>
</ul>

icon separator#

<ul class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="#">Home</a>
  </li>
  <li class="breadcrumb-item px-2">
    <i class="ro-icon ro-icon-chevron-right leading-none align-baseline text-xs"></i>
  </li>
  <li class="breadcrumb-item">
    <a href="#">Mypage</a>
  </li>
  <li class="breadcrumb-item px-2">
    <i class="ro-icon ro-icon-chevron-right leading-none align-baseline text-xs"></i>
  </li>
  <li class="breadcrumb-item active">
    <span>Setting</span>
  </li>
</ul>

hover & underline#

<ul class="breadcrumb">
  <li class="breadcrumb-item">
    <a class="link text-gray-700 hover:text-indigo-600 border-b border-gray-500 border-solid hover:border-indigo-500" href="#">Home</a>
  </li>
  <li class="breadcrumb-item px-2">
    <i class="ro-icon ro-icon-chevron-right leading-none align-baseline text-xs"></i>
  </li>
  <li class="breadcrumb-item">
    <a class="link text-gray-700 hover:text-indigo-600 border-b border-gray-500 border-solid hover:border-indigo-500" href="#">Mypage</a>
  </li>
  <li class="breadcrumb-item px-2">
    <i class="ro-icon ro-icon-chevron-right leading-none align-baseline text-xs"></i>
  </li>
  <li class="breadcrumb-item">
    <span class="text-indigo-600">Setting</span>
  </li>
</ul>