Tu View PlusBreadcrumb
A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.
Basic Usage
Basic usage of breadcrumb.
Home
/
Channel
/
News
<template>
<tu-breadcrumb>
<tu-breadcrumb-item>Home</tu-breadcrumb-item>
<tu-breadcrumb-item>Channel</tu-breadcrumb-item>
<tu-breadcrumb-item>News</tu-breadcrumb-item>
</tu-breadcrumb>
</template><template>
<tu-breadcrumb>
<tu-breadcrumb-item>Home</tu-breadcrumb-item>
<tu-breadcrumb-item>Channel</tu-breadcrumb-item>
<tu-breadcrumb-item>News</tu-breadcrumb-item>
</tu-breadcrumb>
</template>Custom Separator
Customize the delimiter through the separator attribute or slot. Bread crumb child items can also be customized through the separator attribute or slot delimiter, and the priority is higher than the parent item.
Home
Channel
News
Home
~
Channel
~
News
<template>
<tu-breadcrumb class="mb-2">
<template #separator>
<tu-icon><ArrowRight /></tu-icon>
</template>
<tu-breadcrumb-item>Home</tu-breadcrumb-item>
<tu-breadcrumb-item>Channel</tu-breadcrumb-item>
<tu-breadcrumb-item>News</tu-breadcrumb-item>
</tu-breadcrumb>
<br />
<tu-breadcrumb separator="~">
<tu-breadcrumb-item>Home</tu-breadcrumb-item>
<tu-breadcrumb-item>Channel</tu-breadcrumb-item>
<tu-breadcrumb-item>News</tu-breadcrumb-item>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
import { ArrowRight } from '@tu-view-plus/icons-vue';
</script><template>
<tu-breadcrumb class="mb-2">
<template #separator>
<tu-icon><ArrowRight /></tu-icon>
</template>
<tu-breadcrumb-item>Home</tu-breadcrumb-item>
<tu-breadcrumb-item>Channel</tu-breadcrumb-item>
<tu-breadcrumb-item>News</tu-breadcrumb-item>
</tu-breadcrumb>
<br />
<tu-breadcrumb separator="~">
<tu-breadcrumb-item>Home</tu-breadcrumb-item>
<tu-breadcrumb-item>Channel</tu-breadcrumb-item>
<tu-breadcrumb-item>News</tu-breadcrumb-item>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
import { ArrowRight } from '@tu-view-plus/icons-vue';
</script>Custom Size
Customize the breadcrumb size by specifying the style.
Home
/
Channel
/
News
Home
/
Channel
/
News
<template>
<tu-breadcrumb class="mb-2">
<tu-breadcrumb-item>Home</tu-breadcrumb-item>
<tu-breadcrumb-item>Channel</tu-breadcrumb-item>
<tu-breadcrumb-item>News</tu-breadcrumb-item>
</tu-breadcrumb>
<br />
<tu-breadcrumb :style="{ fontSize: '12px' }">
<tu-breadcrumb-item>Home</tu-breadcrumb-item>
<tu-breadcrumb-item>Channel</tu-breadcrumb-item>
<tu-breadcrumb-item>News</tu-breadcrumb-item>
</tu-breadcrumb>
</template><template>
<tu-breadcrumb class="mb-2">
<tu-breadcrumb-item>Home</tu-breadcrumb-item>
<tu-breadcrumb-item>Channel</tu-breadcrumb-item>
<tu-breadcrumb-item>News</tu-breadcrumb-item>
</tu-breadcrumb>
<br />
<tu-breadcrumb :style="{ fontSize: '12px' }">
<tu-breadcrumb-item>Home</tu-breadcrumb-item>
<tu-breadcrumb-item>Channel</tu-breadcrumb-item>
<tu-breadcrumb-item>News</tu-breadcrumb-item>
</tu-breadcrumb>
</template>Custom Icon
You can use custom icons in the content.
/
/
<template>
<tu-breadcrumb>
<tu-breadcrumb-item>
<tu-icon><Cloudy /></tu-icon>
</tu-breadcrumb-item>
<tu-breadcrumb-item>
<tu-icon><PartlyCloudy /></tu-icon>
</tu-breadcrumb-item>
<tu-breadcrumb-item>
<tu-icon><Pouring /></tu-icon>
</tu-breadcrumb-item>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
import { Cloudy, PartlyCloudy, Pouring } from '@tu-view-plus/icons-vue';
</script><template>
<tu-breadcrumb>
<tu-breadcrumb-item>
<tu-icon><Cloudy /></tu-icon>
</tu-breadcrumb-item>
<tu-breadcrumb-item>
<tu-icon><PartlyCloudy /></tu-icon>
</tu-breadcrumb-item>
<tu-breadcrumb-item>
<tu-icon><Pouring /></tu-icon>
</tu-breadcrumb-item>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
import { Cloudy, PartlyCloudy, Pouring } from '@tu-view-plus/icons-vue';
</script>Routes
Transfer breadcrumb data through routes. If you want to customize bread crumbs, it is recommended to use the a-breadcrumb-item component. the path is bound with the href attribute of the a tag by default, you can customize the rendering through the item slot.
<template>
<tu-breadcrumb class="mb-2" :routes="routes" />
<br />
<tu-breadcrumb :routes="routes">
<template #item-render="{ route, paths }">
<tu-link :href="paths.join('/')">
{{ route.label }}
</tu-link>
</template>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
const routes = [
{
path: '/',
label: 'Home'
},
{
path: '/channel',
label: 'Channel'
},
{
path: '/news',
label: 'News'
}
];
</script><template>
<tu-breadcrumb class="mb-2" :routes="routes" />
<br />
<tu-breadcrumb :routes="routes">
<template #item-render="{ route, paths }">
<tu-link :href="paths.join('/')">
{{ route.label }}
</tu-link>
</template>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
const routes = [
{
path: '/',
label: 'Home'
},
{
path: '/channel',
label: 'Channel'
},
{
path: '/news',
label: 'News'
}
];
</script>Dropdown Menu
Use droplist or routes settings dropdown menu
<template>
<tu-breadcrumb class="mb-2" :routes="routes" />
<br />
<tu-breadcrumb>
<tu-breadcrumb-item>Home</tu-breadcrumb-item>
<tu-breadcrumb-item :droplist="droplist">Channel</tu-breadcrumb-item>
<tu-breadcrumb-item>News</tu-breadcrumb-item>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
const routes = [
{
path: '/',
label: 'Home'
},
{
path: '/channel',
label: 'Channel',
children: [
{
path: '/live',
label: 'Live'
},
{
path: '/video',
label: 'Video'
}
]
},
{
path: '/news',
label: 'News'
}
];
const droplist = [
{
path: '/live',
label: 'Live'
},
{
path: '/video',
label: 'Video'
}
];
</script><template>
<tu-breadcrumb class="mb-2" :routes="routes" />
<br />
<tu-breadcrumb>
<tu-breadcrumb-item>Home</tu-breadcrumb-item>
<tu-breadcrumb-item :droplist="droplist">Channel</tu-breadcrumb-item>
<tu-breadcrumb-item>News</tu-breadcrumb-item>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
const routes = [
{
path: '/',
label: 'Home'
},
{
path: '/channel',
label: 'Channel',
children: [
{
path: '/live',
label: 'Live'
},
{
path: '/video',
label: 'Video'
}
]
},
{
path: '/news',
label: 'News'
}
];
const droplist = [
{
path: '/live',
label: 'Live'
},
{
path: '/video',
label: 'Video'
}
];
</script>Ellipsis
Use max-count to specify the maximum number of breadcrumbs to render, and the excess will be displayed as an ellipsis.
Home
/
/
Post
Home
/
/
Post
<template>
<tu-breadcrumb class="mb-2" :max-count="2">
<tu-breadcrumb-item>Home</tu-breadcrumb-item>
<tu-breadcrumb-item>Categorize</tu-breadcrumb-item>
<tu-breadcrumb-item>Channel</tu-breadcrumb-item>
<tu-breadcrumb-item>News</tu-breadcrumb-item>
<tu-breadcrumb-item>Post</tu-breadcrumb-item>
</tu-breadcrumb>
<br />
<tu-breadcrumb class="mb-2" :max-count="2">
<template #more-icon>
<tu-tooltip content="Categorize / Channel / News">
<tu-icon><MoreFilled /></tu-icon>
</tu-tooltip>
</template>
<tu-breadcrumb-item>Home</tu-breadcrumb-item>
<tu-breadcrumb-item>Categorize</tu-breadcrumb-item>
<tu-breadcrumb-item>Channel</tu-breadcrumb-item>
<tu-breadcrumb-item>News</tu-breadcrumb-item>
<tu-breadcrumb-item>Post</tu-breadcrumb-item>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
import { MoreFilled } from '@tu-view-plus/icons-vue';
</script><template>
<tu-breadcrumb class="mb-2" :max-count="2">
<tu-breadcrumb-item>Home</tu-breadcrumb-item>
<tu-breadcrumb-item>Categorize</tu-breadcrumb-item>
<tu-breadcrumb-item>Channel</tu-breadcrumb-item>
<tu-breadcrumb-item>News</tu-breadcrumb-item>
<tu-breadcrumb-item>Post</tu-breadcrumb-item>
</tu-breadcrumb>
<br />
<tu-breadcrumb class="mb-2" :max-count="2">
<template #more-icon>
<tu-tooltip content="Categorize / Channel / News">
<tu-icon><MoreFilled /></tu-icon>
</tu-tooltip>
</template>
<tu-breadcrumb-item>Home</tu-breadcrumb-item>
<tu-breadcrumb-item>Categorize</tu-breadcrumb-item>
<tu-breadcrumb-item>Channel</tu-breadcrumb-item>
<tu-breadcrumb-item>News</tu-breadcrumb-item>
<tu-breadcrumb-item>Post</tu-breadcrumb-item>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
import { MoreFilled } from '@tu-view-plus/icons-vue';
</script>Breadcrumb API
Breadcrumb Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| max-count | Maximum number of breadcrumbs displayed (0 means no limit) | Number | 0 |
| routes | Setting routes | Array | - |
| separator | Separator text | StringNumber | - |
| custom-url | Custom link address | Function | - |
Breadcrumb Slots
| Name | Description |
|---|---|
| more-icon | Custom more icon |
| item-render | Effective when setting routes, custom render breadcrumbs |
| separator | Custom separator |
Breadcrumb-Item Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| separator | Separator text | StringNumber | - |
| droplist | Dropdown content | Object | - |
| dropdown-props | Dropdown props | Object | - |
Breadcrumb-Item Slots
| Name | Description |
|---|---|
| droplist | Custom droplist |
| separator | Custom separator |
BreadcrumbRoute
| Name | Description | Type | Default |
|---|---|---|---|
| label | Breadcrumb name | String | - |
| path | Jump path (a tag href value) | String | - |
| children | Dropdown menu items | Array | - |