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 |
---|---|---|---|
component | string | 'div' | Component's HTML Element |
fontSizeIos | string | 'text-[17px]' | Font size in iOS theme |
fontSizeMaterial | string | 'text-[14px]' | 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.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' | |
component | string | 'div' | Component's HTML Element |
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' | |
component | string | 'div' | Component's HTML Element |
<template><k-page><k-navbar title="Breadcrumbs" /><k-block strong inset><p>Breadcrumbs allow users to keep track and maintain awareness of theirlocations within the app or website. They should be used for large sitesand 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 thescreen</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-collapsedref="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-itemlinktitle="Catalog"@click="() => (popoverOpened = false)"/><k-list-itemlinktitle="Phones"@click="() => (popoverOpened = false)"/><k-list-itemlinktitle="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>