Breadcrumbs Svelte Component

Breadcrumbs Components
Breadcrumbs Props
BreadcrumbsItem Props
BreadcrumbsCollapsed Props
Examples

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.

Breadcrumbs Components

There are following components included:

Breadcrumbs
BreadcrumbsItem
BreadcrumbsSeparator
BreadcrumbsCollapsed

Breadcrumbs Props

Name	Type	Default	Description
fontSizeIos	string	'text-[17px]'	Font size in iOS theme
fontSizeMaterial	string	'text-[16px]'	Font size in Material theme

BreadcrumbsItem Props

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)		`click` event handler

BreadcrumbsCollapsed Props

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)		`click` event handler

Examples

Breadcrumbs.svelte

<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 />
      <BreadcrumbsCollapsed
        class="breadcrumbs-popover-link"
        onClick={() => (popoverOpened = true)}
      />
      <BreadcrumbsSeparator />
      <BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>
    </Breadcrumbs>
    <Popover
      target=".breadcrumbs-popover-link"
      style="width: 120px"
      onBackdropClick={() => (popoverOpened = false)}
      opened={popoverOpened}
    >
      <List nested hairlines={false} colors={{ bg: 'bg-transparent' }}>
        <ListItem
          link
          title="Catalog"
          onClick={() => (popoverOpened = false)}
        />
        <ListItem link title="Phones" onClick={() => (popoverOpened = false)} />
        <ListItem link title="Apple" onClick={() => (popoverOpened = false)} />
      </List>
    </Popover>
  </Block>
</Page>