Dynamic Multi-Language Breadcrumb on Vue

:cd: Project setup

npm install vue-breadcrumb-dynamic

Notice: Install the version 2 of this package if you use Vue 2. npm i vue-breadcrumb-dynamic@2

Notice: Install the version 3 of this package if you use Vue 3. npm i vue-breadcrumb-dynamic@3

import globally

//On Vue 2
import Vue from "vue";
import Breadcrumb from "vue-breadcrumb-dynamic";

Vue.component("Breadcrumb", Breadcrumb);

    
//On Vue 3
import { createApp } from "vue";
import App from "./App.vue";
import Breadcrumb from "vue-breadcrumb-dynamic";

const app = createApp(App);
app.component("Breadcrumb", Breadcrumb);

You can call that on Vue2 or Vue3 according to the above commands. I have named this component to Breadcrumb, you can change it any name.

Notice: Since we usually use Breadcrumb on 1 component or a few components, it is better to call that locally, which is stated below.

These above commands must be written in the main.js file.

import locally

import Breadcrumb from "vue-breadcrumb-dynamic";

export default {
  components: { Breadcrumb },
  ...
}

You can also define and use this component locally.

call in the complete HTML format

<Breadcrumb :data="paths" language="en" dir="ltr" separator="/" pathAfter="1"/>

Notice: All props are optional, based on your demand. If you put no props and write <Breadcrumb />, the breadcrumb will display exactly the same as what you see in the URL path with the capital first letter of each route. For example, the breadcrumb of this URL path /panel/transactions/deposit/cash/user/david will be Panel/Transactions/Deposit/Cash/User/David.

:data="paths" => It's optional. "paths" must be defined in an object format like below. You can put it as a variable in the data property of <script>

paths: {
    "/panel": { en: "Panel", fa: "پنل", gr: "πίνακας" },
    "/panel/transactions": { en: "Transactions", fa: "تراکنش ها", gr: "συναλλαγές" },
    "/panel/transactions/deposit": { en: "Deposit", fa: "سپرده", gr: "κατάθεση" },
    "/panel/transactions/deposit/?/user": { en: "User", fa: "کاربر", gr: "χρήστης" },
    "/panel/transactions/deposit/?/user/?": { en: "Personal", fa: "شخصی", gr: "προσωπικός" },
    "/panel/transactions/deposit/?/user/?/vip": { en: "VIP", fa: "ویژه", gr: "πολύ σπουδαίο πρόσωπο" },
    "/panel/transactions/deposit/?/user/?/?": { en: "-", fa: "-", gr: "-" },
    "/panel/transactions/deposit/?/user/?/vip/status": { en: "Status", fa: "وضعیت", gr: "κατάσταση" },
    "/panel/transactions/deposit/?/user/?/?/status": { en: "Status", fa: "وضعیت", gr: "κατάσταση" },
}

Notice: question marks ? in the keys of paths object means they will be dynamic, or we want to see exactly what will be displayed in the URL path.

Notice: dash sign - in the values of paths object means we don't want to see this path in the breadcrumb.

Notice: You can also have a root path "/" as Key of paths object and different language as its value like below.

paths: {
    "/": { en: "Root", fa: "ریشه", gr: "Ρίζα" },
    "/panel": { en: "Panel", fa: "پنل", gr: "πίνακας" },
    "/panel/transactions": { en: "Transactions", fa: "تراکنش ها", gr: "συναλλαγές" },
    ...
}

language="en" => The language is necessary when we have defined an object in front of data, which here is paths :data="paths". In this format we want to see the English texts to show in the Breadcrumb, because we have put "en" in the front of language. If you want the Farsi or Greek texts, you should put "fa" or "gr" in front of language. Of course, you can put any other language with your own abbreviation letters.

For instance, if we have this URL Path /panel/transactions/deposit/cash/user/david/normal/status According to your language choice, you will see the following breadcrumbs:

language="en" => Panel/Transactions/Deposit/Cash/User/Personal/Status

language="fa" => سپرده/تراکنش ها/پنل/Cash/وضعیت/شخصی/کاربر

language="gr" => πίνακας/συναλλαγές/κατάθεση/Cash/χρήστης/προσωπικός/κατάσταση

dir="ltr" => It's optional. You can specify the direction of Breadcrumb display. If you want to see the Breadcrumb from right to left, you should put dir="rtl"

Notice: Of course, generally the dir is set on ltr by default, you do not need to put it at all, but when you want to see that from right to left, such as in Farsi language, which you will put dir="rtl".

separator="/" => It's optional. You can specify any sign or letter, which you want to see as separator between routes, in front of separator.

Notice: The sign of slash / is set by default. If you want to have another sign, you should put this props. You can put any sign, letter, character or combination of them, such as -,⇨,👉, or even Ne💥t.

pathAfter="1" => It's optional. When you do not want to see the breadcrumb from the root of URL path, you can use this props with the value of larger than 0. Indeed, you can specify the breadcrumb gets displayed after which URL path. For instance, if you put the breadcrumb tag like <Breadcrumb pathAfter="2"/> with the URL path like /panel/transactions/deposit/cash/user/hami. The breadcrumb will show Deposit/Cash/User/Hami, and for the URL path like /panel/transactions, you will have no breadcrumb at all.

CSS format

A CSS is already set for the Breadcrumb, but you can change any part of that easily, such as font-size and font-family. But you can change the color of each part with the following addresses with ease.

<style>
/*Color of the background of the whole box*/
.breadcrumb-route.dynamic-breadcrumb {
  background-color: lightgray !important;
}
/*Color of the breadcrumb items*/
.breadcrumb-route .breadcrumb-item > .link-item {
  color: yellow;
}
/*Color of the breadcrumb items separators*/
.breadcrumb-route .breadcrumb-item > .link-item::before {
  color: dimgray;
}
/*Color of the last breadcrumb item, which is not clickable*/
.breadcrumb-route .breadcrumb-item:last-of-type > .link-item {
  color: gray;
}
</style>

Rules and Samples

<Breadcrumb /> In this format, you will have a breadcrumb exactly the same as path, but the first letter of each path will be capital.

<Breadcrumb :data="route" language="en" /> In this format, you must already have an object with the name of route by having different paths as object keys and the value of each of key must be another object by having at least a key with the name of en. Such as below example.

route: {
    "/panel": { en: "PL" },
    "/panel/transactions": { en: "TS" },
    "/panel/transactions/deposit": { en: "DT" },
    "/panel/transactions/deposit/cash": { en: "CH" },
    "/panel/transactions/deposit/cash/user": { en: "USER" },
    "/panel/transactions/deposit/?/user": { en: "UR" },
    "/panel/transactions/deposit/?/user/?": { en: "PL" },
    "/panel/transactions/deposit/?/user/?/vip": { en: "VIP" },
    "/panel/transactions/deposit/?/user/?/?": { en: "-" },
    "/panel/transactions/deposit/?/user/?/vip/status": { en: "ST" },
    "/panel/transactions/deposit/?/user/?/?/status": { en: "SS" },
}

Notice1: All the question marks ? in the Keys of variable of route object above mean they will be dynamic and the word which will be displayed in the breadcrumb is exactly the same as what is written in the URL path with the capital first letter.

Notice2: You should define all static paths and put a value in front of them, but the dynamic paths are optional. For instance, if you define the route variable like below and the URL path comes like /panel/amount/deposit. the Breadcrumb will show Pl/Amount/Deposit.

Notice3: the dash sign - in the value of route object above means this route doesn't have to be displayed. For instance, by considering the above route, the breadcrumb of this path /panel/transactions/deposit/cash/user/david/vip/status will be PL/TS/DT/CH/USER/PL/VIP/ST, because we have already defined a route for vip, but when we have something else, instead of vip, such as /panel/transactions/deposit/cash/user/david/normal/status, the breadcrumb will show PL/TS/DT/CH/USER/PL/SS. Because we specified by the question mark that if we don't have the vip path after PL, no path should be displayed in the breadcrumb.

route: {
    "/panel": { en: "PL" },
    "/panel/transactions/deposit": { en: "DT" },
}

If you expect to see PL/Amount/DT in the Breadcrumb, you should define the variable of route like below:

route: {
    "/panel": { en: "PL" },
    "/panel/?/deposit": { en: "DT" }, // or "/panel/amount/deposit": { en: "DT" }
}

Notice4: If you define a value for a dynamic path like "/panel/transactions/deposit/?": { en: "Credit" },, you will see just Credit instead of question mark which will be dynamic and might be anything such as cash, debit, Visa etc. in the URL path.

Notice5: You can define a value for a specific value of dynamic path. In this state, you can see your own value for that specific path, but for the other value, you can see what will be displayed in the URL path. For instance, the Breadcrumb of this URL path /panel/transactions/deposit/cash/user/Hami with the route value below will be PL/TS/DT/CH/USER/Hami while the Breadcrumb of this URL path /panel/transactions/deposit/debit/user/Hami will be PL/TS/DT/Debit/UR/PL

route: {
    "/panel": { en: "PL" },
    "/panel/transactions": { en: "TS" },
    "/panel/transactions/deposit": { en: "DT" },
    "/panel/transactions/deposit/cash": { en: "CH" },
    "/panel/transactions/deposit/cash/user": { en: "USER" },
    "/panel/transactions/deposit/?/user": { en: "UR" },
    "/panel/transactions/deposit/?/user/?": { en: "PL" },
}

/panel/transactions/deposit/cash/user/hami => PL/TS/DT/CH/USER/Hami /panel/transactions/deposit/debit/user/hami => PL/TS/DT/Debit/UR/PL

Breadcrumb Component

<template>
  <Breadcrumb :data="paths" language="fa" dir="rtl" separator="=>" />
</template>

// on Vue 2
<script>
import Breadcrumb from "vue-breadcrumb-dynamic";

export default {
  components: { Breadcrumb },
  data() {
    return {
        paths: {
          "/panel": { en: "Panel", fa: "پنل", gr: "πίνακας" },
          "/panel/transactions": { en: "Transactions", fa: "تراکنش ها", gr: "συναλλαγές" },
          "/panel/transactions/deposit": { en: "Deposit", fa: "سپرده", gr: "κατάθεση" },
          "/panel/transactions/deposit/?/user": { en: "User", fa: "کاربر", gr: "χρήστης" },
          "/panel/transactions/deposit/?/user/?": { en: "Personal", fa: "شخصی", gr: "προσωπικός" }, 
          "/panel/transactions/deposit/?/user/?/vip": { en: "VIP", fa: "ویژه", gr: "πολύ σπουδαίο πρόσωπο" },
          "/panel/transactions/deposit/?/user/?/?": { en: "-", fa: "-", gr: "-" },
          "/panel/transactions/deposit/?/user/?/vip/status": { en: "Status", fa: "وضعیت", gr: "κατάσταση" },
          "/panel/transactions/deposit/?/user/?/?/status": { en: "Status", fa: "وضعیت", gr: "κατάσταση" },
        }
    };
  },
};
</script>

// on Vue 3
<script>
import { ref } from "vue";
import Breadcrumb from "vue-breadcrumb-dynamic";

export default {
  components: { Breadcrumb },
  setup() {
    const route = ref({
          "/panel": { en: "Panel", fa: "پنل", gr: "πίνακας" },
          "/panel/transactions": { en: "Transactions", fa: "تراکنش ها", gr: "συναλλαγές" },
          "/panel/transactions/deposit": { en: "Deposit", fa: "سپرده", gr: "κατάθεση" },
          "/panel/transactions/deposit/?/user": { en: "User", fa: "کاربر", gr: "χρήστης" },
          "/panel/transactions/deposit/?/user/?": { en: "Personal", fa: "شخصی", gr: "προσωπικός" }, 
          "/panel/transactions/deposit/?/user/?/vip": { en: "VIP", fa: "ویژه", gr: "πολύ σπουδαίο πρόσωπο" },
          "/panel/transactions/deposit/?/user/?/?": { en: "-", fa: "-", gr: "-" },
          "/panel/transactions/deposit/?/user/?/vip/status": { en: "Status", fa: "وضعیت", gr: "κατάσταση" },
          "/panel/transactions/deposit/?/user/?/?/status": { en: "Status", fa: "وضعیت", gr: "κατάσταση" },
        });
    return {
      route,
    };
  }
}
</script>

<style>
/*Color of the background of the whole box*/
.breadcrumb-route.dynamic-breadcrumb {
  background-color: lightgray !important;
}
/*Color of the breadcrumb items*/
.breadcrumb-route .breadcrumb-item > .link-item {
  color: yellow;
}
/*Color of the breadcrumb items separators*/
.breadcrumb-route .breadcrumb-item > .link-item::before {
  color: dimgray;
}
/*Color of the last breadcrumb item, which is not clickable*/
.breadcrumb-route .breadcrumb-item:last-of-type > .link-item {
  color: gray;
}
</style>

Contact Me

I hope these package will be useful for you. If you see any issue or concern in this case, please let me know through this email [email protected]. to get them fixed ASAP.