Breadcrumbs Vue Component

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
NameTypeDefaultDescription
componentstring'div'

Component's HTML Element

fontSizeIosstring'text-[17px]'

Font size in iOS theme

fontSizeMaterialstring'text-[14px]'

Font size in Material theme

NameTypeDefaultDescription
activebooleanfalse

Marks breadcrumb item as active/current (usually last item in breadcrumbs)

colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring''
colors.bgMaterialstring'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.textActiveIosstring'text-black dark:text-white'
colors.textActiveMaterialstring'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.textIosstring'text-black text-opacity-55 dark:text-white dark:text-opacity-55'
colors.textMaterialstring'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
componentstring'div'

Component's HTML Element

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'bg-black bg-opacity-15 dark:bg-white dark:bg-opacity-15'
colors.bgMaterialstring'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.dotBgIosstring'bg-black dark:bg-white'
colors.dotBgMaterialstring'bg-md-light-primary dark:bg-md-dark-primary'
componentstring'div'

Component's HTML Element

Examples

Breadcrumbs.vue
<template>
<k-page>
<k-navbar title="Breadcrumbs" />
<k-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>
</k-block>
<k-block-title>Basic</k-block-title>
<k-block strong-ios outline-ios>
<k-breadcrumbs>
<k-breadcrumbs-item>
<k-link>Home</k-link>
</k-breadcrumbs-item>
<k-breadcrumbs-separator />
<k-breadcrumbs-item>
<k-link>Catalog</k-link>
</k-breadcrumbs-item>
<k-breadcrumbs-separator />
<k-breadcrumbs-item active>Phones</k-breadcrumbs-item>
</k-breadcrumbs>
</k-block>
<k-block-title>Scrollable</k-block-title>
<k-block-header
>Breadcrumbs will be scrollable if they don't fit the
screen</k-block-header
>
<k-block strong-ios outline-ios>
<k-breadcrumbs>
<k-breadcrumbs-item>
<k-link>Home</k-link>
</k-breadcrumbs-item>
<k-breadcrumbs-separator />
<k-breadcrumbs-item>
<k-link>Catalog</k-link>
</k-breadcrumbs-item>
<k-breadcrumbs-separator />
<k-breadcrumbs-item>
<k-link>Phones</k-link>
</k-breadcrumbs-item>
<k-breadcrumbs-separator />
<k-breadcrumbs-item>
<k-link>Apple</k-link>
</k-breadcrumbs-item>
<k-breadcrumbs-separator />
<k-breadcrumbs-item active>iPhone 12</k-breadcrumbs-item>
</k-breadcrumbs>
</k-block>
<k-block-title>Collapsed</k-block-title>
<k-block strong-ios outline-ios>
<k-breadcrumbs>
<k-breadcrumbs-item>
<k-link>Home</k-link>
</k-breadcrumbs-item>
<k-breadcrumbs-separator />
<k-breadcrumbs-collapsed
ref="popoverTargetRef"
@click="() => (popoverOpened = true)"
/>
<k-breadcrumbs-separator />
<k-breadcrumbs-item active>iPhone 12</k-breadcrumbs-item>
</k-breadcrumbs>
</k-block>
<k-popover
:opened="popoverOpened"
:target="popoverTargetRef"
style="width: 120px"
@backdropclick="() => (popoverOpened = false)"
>
<k-list nested>
<k-list-item
link
title="Catalog"
@click="() => (popoverOpened = false)"
/>
<k-list-item
link
title="Phones"
@click="() => (popoverOpened = false)"
/>
<k-list-item
link
title="Apple"
@click="() => (popoverOpened = false)"
/>
</k-list>
</k-popover>
</k-page>
</template>
<script>
import { ref } from 'vue';
import {
kPage,
kNavbar,
kNavbarBackLink,
kLink,
kBlock,
kBlockTitle,
kBlockHeader,
kBreadcrumbs,
kBreadcrumbsItem,
kBreadcrumbsSeparator,
kBreadcrumbsCollapsed,
kPopover,
kList,
kListItem,
} from 'konsta/vue';
export default {
components: {
kPage,
kNavbar,
kNavbarBackLink,
kLink,
kBlock,
kBlockTitle,
kBlockHeader,
kBreadcrumbs,
kBreadcrumbsItem,
kBreadcrumbsSeparator,
kBreadcrumbsCollapsed,
kPopover,
kList,
kListItem,
},
setup() {
const popoverOpened = ref(false);
const popoverTargetRef = ref(null);
return {
popoverOpened,
popoverTargetRef,
};
},
};
</script>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.