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

Breadcrumb

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

Usage

↓
実装例-1
  1. Menu item 1
  2. Menu item 2
  3. Current page titile… 
<Flex variant='cluster' tag='ol' hasDelimiter g='10'>
  <Lism tag='li' d='if' ai='c' g='inherit'>
    <Link href='#menu-1' c='inherit' >Menu item 1</Link>
  </Lism>
  <Lism tag='li' d='if' ai='c' g='inherit'>
    <Link href='#menu-2' c='inherit' >Menu item 2</Link>
  </Lism>
  <Lism tag='li' d='if' ai='c' g='inherit'>
    <span>Current page titile...</span>
  </Lism>
</Flex>
↓
例-2
  1. Menu item 1
  2. Menu item 2
  3. Current page titile… 
<Flex variant='cluster' tag='ol' g='10' style={{'--c--link': 'currentColor'}}>
  <Lism tag='li' d='if' ai='c' g='inherit'>
    <a href='#menu-1'>Menu item 1</a>
  </Lism>
  <Lism tag='li' d='if' ai='c' g='inherit'>
    <Icon icon='caret-down' c='text-2' css={{rotate:'-90deg'}}/>
    <a href='#menu-2'>Menu item 2</a>
  </Lism>
  <Lism tag='li' d='if' ai='c' g='inherit'>
    <Icon icon='caret-down' c='text-2' css={{rotate:'-90deg'}}/>
    <span>Current page titile...</span>
  </Lism>
</Flex>