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-[14px]'	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.bgIos	string	''
colors.bgMaterial	string	'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.textActiveIos	string	'text-black dark:text-white'
colors.textActiveMaterial	string	'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.textIos	string	'text-black text-opacity-55 dark:text-white dark:text-opacity-55'
colors.textMaterial	string	'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
onClick	function(e)		`click` event handler

BreadcrumbsCollapsed Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.bgIos	string	'bg-black bg-opacity-15 dark:bg-white dark:bg-opacity-15'
colors.bgMaterial	string	'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.dotBgIos	string	'bg-black dark:bg-white'
colors.dotBgMaterial	string	'bg-md-light-primary dark:bg-md-dark-primary'
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" />

  <Block strong inset>
    <p>
      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.
    </p>
  </Block>

  <BlockTitle>Basic</BlockTitle>
  <Block strongIos outlineIos>
    <Breadcrumbs>
      <BreadcrumbsItem>
        <Link>Home</Link>
      </BreadcrumbsItem>
      <BreadcrumbsSeparator />
      <BreadcrumbsItem>
        <Link>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 strongIos outlineIos>
    <Breadcrumbs>
      <BreadcrumbsItem>
        <Link>Home</Link>
      </BreadcrumbsItem>
      <BreadcrumbsSeparator />
      <BreadcrumbsItem>
        <Link>Catalog</Link>
      </BreadcrumbsItem>
      <BreadcrumbsSeparator />
      <BreadcrumbsItem>
        <Link>Phones</Link>
      </BreadcrumbsItem>
      <BreadcrumbsSeparator />
      <BreadcrumbsItem>
        <Link>Apple</Link>
      </BreadcrumbsItem>
      <BreadcrumbsSeparator />
      <BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>
    </Breadcrumbs>
  </Block>

  <BlockTitle>Collapsed</BlockTitle>
  <Block strongIos outlineIos>
    <Breadcrumbs>
      <BreadcrumbsItem>
        <Link>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>
        <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>