Breadcrumbs allow users to keep track and maintain awareness of their locations within the app or website. They should be used for large sites and apps with hierarchically arranged pages.
There are following components included:
Breadcrumbs
BreadcrumbsItem
BreadcrumbsSeparator
BreadcrumbsCollapsed
Name | Type | Default | Description |
---|---|---|---|
fontSizeIos | string | 'text-[17px]' | Font size in iOS theme |
fontSizeMaterial | string | 'text-[16px]' | Font size in Material theme |
Name | Type | Default | Description |
---|---|---|---|
active | boolean | false | Marks breadcrumb item as active/current (usually last item in breadcrumbs) |
colors | object | Object with Tailwind CSS colors classes | |
colors.text | string | 'text-black text-opacity-55 dark:text-white dark:text-opacity-55' | Breadcrumbs item text color |
colors.textActive | string | 'text-black dark:text-white' | Breadcrumbs active item text color |
onClick | function(e) |
|
Name | Type | Default | Description |
---|---|---|---|
colors | object | Object with Tailwind CSS colors classes | |
colors.bg | string | 'bg-black bg-opacity-15 dark:bg-white dark:bg-opacity-15' | Collapsed bg color |
colors.dotBg | string | 'bg-black dark:bg-white' | Collapsed "dot" bg color |
onClick | function(e) |
|
<script>import {Page,Navbar,NavbarBackLink,BlockTitle,BlockHeader,Block,Breadcrumbs,BreadcrumbsItem,BreadcrumbsSeparator,BreadcrumbsCollapsed,Popover,List,ListItem,Link,} from 'konsta/svelte';let popoverOpened = false;</script><Page><Navbar title="Breadcrumbs" /><BlockTitle>Basic</BlockTitle><Block strong><Breadcrumbs><BreadcrumbsItem><Link colors={{ text: 'text-inherit' }}>Home</Link></BreadcrumbsItem><BreadcrumbsSeparator /><BreadcrumbsItem><Link colors={{ text: 'text-inherit' }}>Catalog</Link></BreadcrumbsItem><BreadcrumbsSeparator /><BreadcrumbsItem active>Phones</BreadcrumbsItem></Breadcrumbs></Block><BlockTitle>Scrollable</BlockTitle><BlockHeader>Breadcrumbs will be scrollable if they don't fit the screen</BlockHeader><Block strong><Breadcrumbs><BreadcrumbsItem><Link colors={{ text: 'text-inherit' }}>Home</Link></BreadcrumbsItem><BreadcrumbsSeparator /><BreadcrumbsItem><Link colors={{ text: 'text-inherit' }}>Catalog</Link></BreadcrumbsItem><BreadcrumbsSeparator /><BreadcrumbsItem><Link colors={{ text: 'text-inherit' }}>Phones</Link></BreadcrumbsItem><BreadcrumbsSeparator /><BreadcrumbsItem><Link colors={{ text: 'text-inherit' }}>Apple</Link></BreadcrumbsItem><BreadcrumbsSeparator /><BreadcrumbsItem active>iPhone 12</BreadcrumbsItem></Breadcrumbs></Block><BlockTitle>Collapsed</BlockTitle><Block strong><Breadcrumbs><BreadcrumbsItem><Link colors={{ text: 'text-inherit' }}>Home</Link></BreadcrumbsItem><BreadcrumbsSeparator /><BreadcrumbsCollapsedclass="breadcrumbs-popover-link"onClick={() => (popoverOpened = true)}/><BreadcrumbsSeparator /><BreadcrumbsItem active>iPhone 12</BreadcrumbsItem></Breadcrumbs><Popovertarget=".breadcrumbs-popover-link"style="width: 120px"onBackdropClick={() => (popoverOpened = false)}opened={popoverOpened}><List nested hairlines={false} colors={{ bg: 'bg-transparent' }}><ListItemlinktitle="Catalog"onClick={() => (popoverOpened = false)}/><ListItem link title="Phones" onClick={() => (popoverOpened = false)} /><ListItem link title="Apple" onClick={() => (popoverOpened = false)} /></List></Popover></Block></Page>