Breadcrumb

このページは現在調整中です

Lism UI (@lism-css/ui) はまだ準備中です。

パンくずリストを表示するためのLismの使用例を紹介します。

Examples

↓

実装例-1: with slash

Menu item 1
Menu item 2
Current page titile…

<Cluster as="ol" g="15">
  <ListItem d="inline-flex" ai="center" g="15">
    <Link href="#menu-1" c="20">
      Menu item 1
    </Link>
  </ListItem>
  <ListItem d="inline-flex" ai="center" g="15">
    <Decorator o="pp">/</Decorator>
    <Link href="#menu-2" c="20">
      Menu item 2
    </Link>
  </ListItem>
  <ListItem d="inline-flex" ai="center" g="15">
    <Decorator o="pp">/</Decorator>
    <span>Current page titile...</span>
  </ListItem>
</Cluster>

<ol class="l--cluster -g:15">
  <li class="-d:inline-flex -ai:center -g:15">
    <a class="-c:20" href="#menu-1"> Menu item 1 </a>
  </li>
  <li class="-d:inline-flex -ai:center -g:15">
    <div class="a--decorator -o:pp" aria-hidden="true">/</div>
    <a class="-c:20" href="#menu-2"> Menu item 2 </a>
  </li>
  <li class="-d:inline-flex -ai:center -g:15">
    <div class="a--decorator -o:pp" aria-hidden="true">/</div>
    <span>Current page titile…</span>
  </li>
</ol>

↓

例-2: with Icon

Menu item 1
Menu item 2
Current page titile…

<Cluster as="ol" g="15">
  <ListItem d="inline-flex" ai="center" g="15">
    <a class="set--plain" href="#menu-1">
      Menu item 1
    </a>
  </ListItem>
  <ListItem d="inline-flex" ai="center" g="15">
    <Icon icon="caret-right" c="text-2" />
    <a class="set--plain" href="#menu-2">
      Menu item 2
    </a>
  </ListItem>
  <ListItem d="inline-flex" ai="center" g="15">
    <Icon icon="caret-right" c="text-2" />
    <span class="-c:text-2">Current page titile...</span>
  </ListItem>
</Cluster>

<ol class="l--cluster -g:15">
  <li class="-d:inline-flex -ai:center -g:15">
    <a class="set--plain" href="#menu-1">Menu item 1</a>
  </li>
  <li class="-d:inline-flex -ai:center -g:15">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 256 256"
      width="1em"
      height="1em"
      fill="currentColor"
      focusable="false"
      class="a--icon -c:text-2"
      aria-hidden="true"
    >
      <path d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"></path>
    </svg>
    <a class="set--plain" href="#menu-2">Menu item 2</a>
  </li>
  <li class="-d:inline-flex -ai:center -g:15">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 256 256"
      width="1em"
      height="1em"
      fill="currentColor"
      focusable="false"
      class="a--icon -c:text-2"
      aria-hidden="true"
    >
      <path d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"></path>
    </svg>
    <span class="-c:text-2">Current page titile…</span>
  </li>
</ol>