Breadcrumb component

Breadcrumbs: Displays the position of the current page in the system hierarchy and can be returned up.

When to use

When the system has more than two levels of hierarchy;
When the user needs to be told "where you are";
When you need the ability to navigate up.

Basic

The simplest use.

<template>
    <kl-bread-crumb>
        <kl-bread-crumb-item> Home</kl-bread-crumb-item>
        <kl-bread-crumb-item><a href="../../../">Application Center</a></kl-bread-crumb-item>
        <kl-bread-crumb-item>
            <a href="../../data-display/list/list.html">Application List</a></kl-bread-crumb-item
        >
        <kl-bread-crumb-item> An Application</kl-bread-crumb-item>
    </kl-bread-crumb>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss"></style>

routed

Used together with vue-router,(After the vue-router is installed, configure the route in the route configuration file.)

<template>
    <kl-bread-crumb separator="/">
        <kl-bread-crumb-item> Home</kl-bread-crumb-item>
        <kl-bread-crumb-item to="/Button">Application Center</kl-bread-crumb-item>
        <kl-bread-crumb-item to="#"> Application List</kl-bread-crumb-item>
        <kl-bread-crumb-item> An Application</kl-bread-crumb-item>
    </kl-bread-crumb>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss"></style>

separator

The separator can be customized by setting the separator preperty: separator=">" .

<template>
    <kl-bread-crumb separator=">">
        <kl-bread-crumb-item>Home</kl-bread-crumb-item>
        <kl-bread-crumb-item><a href="">Application Center</a> </kl-bread-crumb-item>
        <kl-bread-crumb-item>Application List</kl-bread-crumb-item>
        <kl-bread-crumb-item>An Application</kl-bread-crumb-item>
    </kl-bread-crumb>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss"></style>

withiconed

The icon should be placed in front of the text.

<template>
    <kl-bread-crumb separator="/">
        <kl-bread-crumb-item>
            <KlSystemAdmin />
        </kl-bread-crumb-item>
        <kl-bread-crumb-item><a href="">Application Center</a></kl-bread-crumb-item>
        <kl-bread-crumb-item><a href="">Application List</a> </kl-bread-crumb-item>
        <kl-bread-crumb-item> An Application</kl-bread-crumb-item>
    </kl-bread-crumb>
</template>

<script setup lang="ts">
import { KlSystemAdmin } from '@kl-design/icons'
</script>

<style scoped lang="scss"></style>

API

Parameters	Description	Type	Default value
separator	Delimiter user-defined	string	'/'

Parameters	Description	Type	Default value
to	The destination of the route is the same as the to attribute of the vue-router	string/object	-
replace	If this property is set to true, the navigation will leave no history	boolean	-

Breadcrumb component #

When to use #

Basic #

routed #

separator #

withiconed #

API #

Breadcrumb.Item #

When to use

Basic

routed

separator

withiconed

API

Breadcrumb.Item