Breadcrumb

기본 사용

• gn-breadcrumb 내부에 ul, li, anchor를 사용

<nav class="gn-breadcrumb">
  <ul>
    <li><a href="#genians">Genians</a></li>
    <li><a href="#rndcenter">R&amp;D Center</a></li>
    <li><a href="#fd">Front-end</a></li>
    <li class="is-active"><a href="#gnui">GNUI</a></li>
  </ul>
</nav>

크기

<nav class="gn-breadcrumb is-normal">
  <ul>
    <li><a href="#genians">Genians</a></li>
    <li><a href="#rndcenter">R&amp;D Center</a></li>
    <li><a href="#fd">Front-end</a></li>
    <li class="is-active"><a href="#gnui">GNUI</a></li>
  </ul>
</nav>
<nav class="gn-breadcrumb is-medium">
  <ul>
    <li><a href="#genians">Genians</a></li>
    <li><a href="#rndcenter">R&amp;D Center</a></li>
    <li><a href="#fd">Front-end</a></li>
    <li class="is-active"><a href="#gnui">GNUI</a></li>
  </ul>
</nav>
<nav class="gn-breadcrumb is-large">
  <ul>
    <li><a href="#genians">Genians</a></li>
    <li><a href="#rndcenter">R&amp;D Center</a></li>
    <li><a href="#fd">Front-end</a></li>
    <li class="is-active"><a href="#gnui">GNUI</a></li>
  </ul>
</nav>

스타일

<nav class="gn-breadcrumb has-separator-dash">
  <ul>
    <li><a href="#genians">Genians</a></li>
    <li><a href="#rndcenter">R&amp;D Center</a></li>
    <li><a href="#fd">Front-end</a></li>
    <li class="is-active"><a href="#gnui">GNUI</a></li>
  </ul>
</nav>
<nav class="gn-breadcrumb has-separator-disc">
  <ul>
    <li><a href="#genians">Genians</a></li>
    <li><a href="#rndcenter">R&amp;D Center</a></li>
    <li><a href="#fd">Front-end</a></li>
    <li class="is-active"><a href="#gnui">GNUI</a></li>
  </ul>
</nav>
<nav class="gn-breadcrumb has-separator-bar">
  <ul>
    <li><a href="#genians">Genians</a></li>
    <li><a href="#rndcenter">R&amp;D Center</a></li>
    <li><a href="#fd">Front-end</a></li>
    <li class="is-active"><a href="#gnui">GNUI</a></li>
  </ul>
</nav>
<nav class="gn-breadcrumb has-separator-arrow">
  <ul>
    <li><a href="#genians">Genians</a></li>
    <li><a href="#rndcenter">R&amp;D Center</a></li>
    <li><a href="#fd">Front-end</a></li>
    <li class="is-active"><a href="#gnui">GNUI</a></li>
  </ul>
</nav>

정렬

-center 정렬은 사용하지 않는다.

<nav class="gn-breadcrumb">
  <ul>
    <li><a href="#genians">Genians</a></li>
    <li><a href="#rndcenter">R&amp;D Center</a></li>
    <li><a href="#fd">Front-end</a></li>
    <li class="is-active"><a href="#gnui">GNUI</a></li>
  </ul>
</nav>

<nav class="gn-breadcrumb is-right">
  <ul>
    <li><a href="#genians">Genians</a></li>
    <li><a href="#rndcenter">R&amp;D Center</a></li>
    <li><a href="#fd">Front-end</a></li>
    <li class="is-active"><a href="#gnui">GNUI</a></li>
  </ul>
</nav>