Breadcrumb New
New
Breadcrumbs are a navigation system used to show a user's location in a site or app.
Usage
///
<template>
<PlBreadcrumb ref="breadcrumb" v-model="steps" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const breadcrumb = ref()
const steps = ref([
{
name: 'page1',
icon: 'basket2',
},
{
name: 'page2',
icon: 'bandaid',
},
{
name: 'page3',
},
])
</script>
<template>
<PlBreadcrumb ref="breadcrumb" v-model="steps" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const breadcrumb = ref()
const steps = ref([
{
name: 'page1',
icon: 'basket2',
},
{
name: 'page2',
icon: 'bandaid',
},
{
name: 'page3',
},
])
</script>
Props
Name | Type | Default | Description |
---|---|---|---|
modelValue | <{ name: string separator?: String to: RouteLocationRaw icon: string }>[] | [] | bind breadcrumb options. |
replace | boolean | false | equivalent to replace in vue router. |
separator | string | '/' | set toolseparator. |