G-Loot DS — breadcrumbs with animations

by Augustin Hiebel

HTML

<nav className="breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li className="animate-slide-in-top animate-delay" style={{ "--delay": "calc(0 * 0.05s)" }}>
      <a href="#">
        <span className="icon icon-20 icon-home-2" />
        <span>Home</span>
      </a>
    </li>
    <li className="animate-slide-in-top animate-delay" style={{ "--delay": "calc(1 * 0.05s)" }}>
      <a href="#">
        <span>Games</span>
      </a>
    </li>
    <li className="animate-slide-in-top animate-delay" style={{ "--delay": "calc(2 * 0.05s)" }}>
      <a href="#">
        <span>Tournaments</span>
      </a>
    </li>
    <li className="animate-slide-in-top animate-delay" style={{ "--delay": "calc(3 * 0.05s)" }} aria-current="page">
      <div>
        <span>European Champions European Champions</span>
      </div>
    </li>
  </ol>
</nav>