コンテンツにスキップ
Lism CSS

Breadcrumb

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

Examples

Section titled “Examples”
↓
実装例-1: with slash
  1. Menu item 1
  2. Menu item 2
  3. Current page titile… 
<Cluster tag='ol' g='20'>
  <HTML.li d='in-flex' ai='center' g='20'>
    <HTML.a href='#menu-1' c='20' >Menu item 1</HTML.a>
  </HTML.li>
  <HTML.li d='in-flex' ai='center' g='20'>
    <Decorator o='-20'>/</Decorator>
    <HTML.a href='#menu-2' c='20' >Menu item 2</HTML.a>
  </HTML.li>
  <HTML.li d='in-flex' ai='center' g='20'>
    <Decorator o='-20'>/</Decorator>
    <span>Current page titile...</span>
  </HTML.li>
</Cluster>
↓
例-2: with Icon
  1. Menu item 1
  2. Menu item 2
  3. Current page titile… 
<Cluster tag='ol' g='20'>
  <HTML.li d='in-flex' ai='center' g='20'>
    <a class='set-plain' href='#menu-1'>Menu item 1</a>
  </HTML.li>
  <HTML.li d='in-flex' ai='center' g='20'>
    <Icon icon='caret-right' c='text-2' />
    <a class='set-plain' href='#menu-2'>Menu item 2</a>
  </HTML.li>
  <HTML.li d='in-flex' ai='center' g='20'>
    <Icon icon='caret-right' c='text-2' />
    <span class='-c:text-2'>Current page titile...</span>
  </HTML.li>
</Cluster>