Breadcrumb

The TkBreadcrumb provides a navigational aid, allowing users to keep track of their location within the application's hierarchy.

React

import { TkBreadcrumb, TkBreadcrumbItem } from '@takeoff-ui/react'

Vue

import { TkBreadcrumb, TkBreadcrumbItem } from '@takeoff-ui/vue'

Angular

import { TkBreadcrumb, TkBreadcrumbItem } from '@takeoff-ui/angular'

Basic

The basic usage of TkBreadcrumb demonstrates how to create a simple breadcrumb navigation using the model property.

View Code

React

const items = [
 { label: 'Home', href: '/', isExternal: true  },
 { label: 'Library', href: '/library', isExternal: true  },
 { label: 'Data', href: '/library/data', isExternal: true  },
 { label: 'Current Page' },
];

<TkBreadcrumb model={items} />

Vue

<script setup>
  import { TkBreadcrumb } from '@takeoff-ui/vue';
  
  const items = [
  { label: 'Home', href: '/', isExternal: true  },
  { label: 'Library', href: '/library', isExternal: true  },
  { label: 'Data', href: '/library/data', isExternal: true  },
  { label: 'Current Page' },
  ];
</script>
<template>
  <TkBreadcrumb :model.prop="items" />
</template>

Angular

<tk-breadcrumb [model]="[
    { label: 'Home', href: '/', isExternal: true },
    { label: 'Library', href: '/library', isExternal: true },
    { label: 'Data', href: '/library/data', isExternal: true },
    { label: 'Current Page' }
  ]" />

Separator

TkBreadcrumb offers various separator options to customize the visual appearance between items.

View Code

React

const items = [
 { label: 'Home', href: '/', isExternal: true  },
 { label: 'Library', href: '/library', isExternal: true  },
 { label: 'Data' },
];
<TkBreadcrumb model={items} separator="icon" />

Vue

<script setup>
import { TkBreadcrumb } from '@takeoff-ui/vue';
import { ref } from 'vue';

const items = [
  { label: 'Home', href: '/', isExternal: true },
  { label: 'Library', href: '/library', isExternal: true },
  { label: 'Data' },
];
const separator = ref('icon');
</script>
<template>
  <TkBreadcrumb :model.prop="items" :separator="separator" />
</template>

Angular

<tk-breadcrumb [model]="[  
    { label: 'Home', href: '/', isExternal: true },
    { label: 'Library', href: '/library', isExternal: true },
    { label: 'Data' }
  ]" separator="icon" />

Custom Icons

Illustrates how to use custom icons for breadcrumb items and as separators.

View Code

React

const items = [
 { label: 'Home', href: '/', icon: 'home', isExternal: true  },
 { label: 'Library', href: '/library', icon: 'local_library', isExternal: true  },
 { label: 'Data', icon: 'data_usage' },
];
<TkBreadcrumb model={items} separatorIcon="navigate_next" />

Vue

<script setup>
import { TkBreadcrumb } from '@takeoff-ui/vue';

const items = [
  { label: 'Home', href: '/', icon: 'home', isExternal: true },
  {
    label: 'Library',
    href: '/library',
    icon: 'local_library',
    isExternal: true,
  },
  { label: 'Data', icon: 'data_usage' },
];
</script>
<template>
  <TkBreadcrumb :model.prop="items" separatorIcon="navigate_next" />
</template>

Angular

<tk-breadcrumb [model]="[
    { label: 'Home', href: '/', icon: 'home', isExternal: true },
    { label: 'Library', href: '/library', icon: 'local_library', isExternal: true },
    { label: 'Data', icon: 'data_usage' }
  ]" separatorIcon="navigate_next" />

Design Type

Showcases the background type for TkBreadcrumb, providing a different visual style.

View Code

React

const items = [
 { label: 'Home', href: '/', isExternal: true  },
 { label: 'Library', href: '/library', isExternal: true  },
 { label: 'Data' },
];
<TkBreadcrumb model={items} type="outlined" />

Vue

<script setup>
import { TkBreadcrumb } from '@takeoff-ui/vue';

const items = [
  { label: 'Home', href: '/', isExternal: true },
  { label: 'Library', href: '/library', isExternal: true },
  { label: 'Data' },
];
</script>
<template>
  <TkBreadcrumb :model.prop="items" type="outlined" />
</template>

Angular

<tk-breadcrumb [model]="[
    { label: 'Home', href: '/', isExternal: true },
    { label: 'Library', href: '/library', isExternal: true },
    { label: 'Data' }
  ]" type="outlined" />

Breadcrumb API

Props

Name	Type	Default	Description
	IBreadcrumbModel[]	null	Array of breadcrumb items
	"dot", "icon", "slash", "vertical"	'icon'	Type of separator to use between breadcrumb items
	string	'chevron_right'	Icon to use as separator when separator is set to 'icon'
	"basic", "outlined"	'basic'	Defines the visual style of the component, possible values are 'basic' and 'outlined'.

Slots

Name	Description
default	Default slot to detect TkBreadcrumbItem components.

Interfaces

interface IBreadcrumbModel {
  /** Label text for the item */
  label: string;
  /** URL for the item */
  href?: string;
  /** Icon to display alongside the label */
  icon?: string;
  /** Whether the item is an external url */
  isExternal?: boolean;
}

Breadcrumb Item API

Props

Name	Type	Default	Description
	string	null	URL for the item
	IIconOptions, string	null	Icon to display alongside the label
	boolean	false	Indicates if the item is the last one
	boolean	false	Whether the item is an external url
	string	null	Label text for the breadcrumb item