v2.1.0

BreadCrumb

  • Basic

    Outset

    <nav class="breadcrumb outset-neomo p-1">
      <ul>
        <li>
          <a href="#">
            <span>Neomo</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>Documentation</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>Components</span>
          </a>
        </li>
        <li class="is-active">
          <a href="#" aria-current="page">
            <span>Breadcrumb</span>
          </a>
        </li>
      </ul>
    </nav>
    

    Inset

    <nav class="breadcrumb inset-neomo p-1">
      <ul>
        <li>
          <a href="#">
            <span>Neomo</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>Documentation</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>Components</span>
          </a>
        </li>
        <li class="is-active">
          <a href="#" aria-current="page">
            <span>Breadcrumb</span>
          </a>
        </li>
      </ul>
    </nav>
    
  • Justify

    Centered

    <nav class="breadcrumb centered inset-neomo p-1" aria-label="breadcrumbs">
      <ul>
        <li>
          <a href="#">
            <div class="icon-circle--sm" style="margin-right: 10px">
              <i class="fas fa-home fa-sm" style="font-size: 0.4em"></i>
            </div>
            <span>Neomo</span>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon-circle--sm" style="margin-right: 10px">
              <i class="fas fa-file-alt fa-sm" style="font-size: 0.4em"></i>
            </div>
            <span>Documentation</span>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon-circle--sm" style="margin-right: 10px">
              <i class="fas fa-database fa-sm" style="font-size: 0.4em"></i>
            </div>
            <span>Components</span>
          </a>
        </li>
        <li class="is-active">
          <a href="#" aria-current="page">
            <div class="icon-circle--sm" style="margin-right: 10px">
              <i class="fas fa-bread-slice fa-sm" style="font-size: 0.4em"></i>
            </div>
            <span>Breadcrumb</span>
          </a>
        </li>
      </ul>
    </nav>
    

    Right

    <nav class="breadcrumb right inset-neomo p-1" aria-label="breadcrumbs">
      <ul>
        <li>
          <a href="#">
            <div class="icon-circle--sm" style="margin-right: 10px">
              <i class="fas fa-home fa-sm" style="font-size: 0.4em"></i>
            </div>
            <span>Neomo</span>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon-circle--sm" style="margin-right: 10px">
              <i class="fas fa-file-alt fa-sm" style="font-size: 0.4em"></i>
            </div>
            <span>Documentation</span>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon-circle--sm" style="margin-right: 10px">
              <i class="fas fa-database fa-sm" style="font-size: 0.4em"></i>
            </div>
            <span>Components</span>
          </a>
        </li>
        <li class="is-active">
          <a href="#" aria-current="page">
            <div class="icon-circle--sm" style="margin-right: 10px">
              <i class="fas fa-bread-slice fa-sm" style="font-size: 0.4em"></i>
            </div>
            <span>Breadcrumb</span>
          </a>
        </li>
      </ul>
    </nav>
    
  • Separator

    Direction

    <nav
      class="breadcrumb centered direction inset-neomo p-1"
      aria-label="breadcrumbs"
    >
      <ul>
        <li>
          <a href="#">
            <div class="icon-circle--sm" style="margin-right: 10px">
              <i class="fas fa-home fa-sm" style="font-size: 0.4em"></i>
            </div>
            <span>Neomo</span>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon-circle--sm" style="margin-right: 10px">
              <i class="fas fa-file-alt fa-sm" style="font-size: 0.4em"></i>
            </div>
            <span>Documentation</span>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon-circle--sm" style="margin-right: 10px">
              <i class="fas fa-database fa-sm" style="font-size: 0.4em"></i>
            </div>
            <span>Components</span>
          </a>
        </li>
        <li class="is-active">
          <a href="#" aria-current="page">
            <div class="icon-circle--sm" style="margin-right: 10px">
              <i class="fas fa-bread-slice fa-sm" style="font-size: 0.4em"></i>
            </div>
            <span>Breadcrumb</span>
          </a>
        </li>
      </ul>
    </nav>
    

    Aroow

    <nav class="breadcrumb centered arrow inset-neomo p-1" aria-label="breadcrumbs">
      <ul>
        <li>
          <a href="#">
            <div class="icon-circle--sm" style="margin-right: 10px">
              <i class="fas fa-home fa-sm" style="font-size: 0.4em"></i>
            </div>
            <span>Neomo</span>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon-circle--sm" style="margin-right: 10px">
              <i class="fas fa-file-alt fa-sm" style="font-size: 0.4em"></i>
            </div>
            <span>Documentation</span>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon-circle--sm" style="margin-right: 10px">
              <i class="fas fa-database fa-sm" style="font-size: 0.4em"></i>
            </div>
            <span>Components</span>
          </a>
        </li>
        <li class="is-active">
          <a href="#" aria-current="page">
            <div class="icon-circle--sm" style="margin-right: 10px">
              <i class="fas fa-bread-slice fa-sm" style="font-size: 0.4em"></i>
            </div>
            <span>Breadcrumb</span>
          </a>
        </li>
      </ul>
    </nav>