Breadcrumb

パンくずリストの作成例を紹介します。

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="inherit">
      Menu item 1
    </Link>
  </ListItem>
  <ListItem d="inline-flex" ai="center" g="15">
    <Decorator o="pp">/</Decorator>
    <Link href="#menu-2" c="inherit">
      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:inherit" 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:inherit" 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…

import { CaretRightIcon } from '@lism-css/icons/react';

<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={CaretRightIcon} 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={CaretRightIcon} 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>