Breadcrumb
パンくずリストの作成例を紹介します。
Usage
↓
実装例-1
- Menu item 1
- Menu item 2
- 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
- Menu item 1
- Menu item 2
- 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>