diff --git a/src/components/Breadcrump.vue b/src/components/Breadcrump.vue
new file mode 100644
index 0000000..2ac5052
--- /dev/null
+++ b/src/components/Breadcrump.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="breadcrump-box transition duration-300 ease-in-out py-3 ">
+    <div class="card-body">
+      <nav aria-label="breadcrumb" class="flex flex-wrap">
+        <ul v-for="(itm,i) in arrBcPath" :key="`bread-${i}`" class="breadcrumb">
+          <li v-if="i == 0 && itm[0] == '#'" class="breadcrumb-item flex-1 cursor-pointer" @click="bookselec(itm[i])">
+            <span class="shield">
+              <span class="icon">
+                <svg
+                  v-if="itm === '#fa-cloud'"
+                  aria-hidden="true"
+                  focusable="false"
+                  data-prefix="fas"
+                  data-icon="cloud"
+                  class="svg-inline--fa fa-cloud fa-w-16 dark:text-white text-blue-400"
+                  role="img"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 640 512"
+                ><path fill="currentColor" d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4z"></path></svg>
+                <svg
+                  v-if="itm === '#fa-book'"
+                  aria-hidden="true"
+                  focusable="false"
+                  data-prefix="fad"
+                  data-icon="book-reader"
+                  class="svg-inline--fa fa-book-reader fa-w-16 dark:text-white"
+                  role="img"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 512 512"
+                ><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M256 192a96 96 0 1 1 96-96 96 96 0 0 1-96 96z" opacity="0.4" /><path class="fa-primary" fill="currentColor" d="M233.59 241.1c-59.33-36.32-155.43-46.3-203.79-49C13.55 191.13 0 203.51 0 219.14v222.8c0 14.33 11.59 26.28 26.49 27.06 43.66 2.29 132 10.68 193 41.43 9.37 4.72 20.48-1.71 20.48-11.87v-246a13.31 13.31 0 0 0-6.38-11.46zm248.61-49c-48.35 2.74-144.46 12.73-203.78 49a13.56 13.56 0 0 0-6.42 11.63v245.79c0 10.19 11.14 16.63 20.54 11.9 61-30.72 149.32-39.11 193-41.4C500.42 468.24 512 456.29 512 442V219.14c0-15.63-13.55-28.01-29.8-27.09z" /></g></svg>
+                <span v-else class="iconify" :data-icon="itm.replace('#','').replace('fa-','fa:')" />
+              </span>
+            </span>
+            <span class="slash text-xs">/</span>
+          </li>
+          <li v-else-if="arrBcPath[i+1]" class="breadcrumb-item flex-1 cursor-pointer">
+            <a href="#{itm}" class="mx-1 leading-tight text-xs" @click="(e) => { e.preventDefault(); $router.push(`/${itm}`)}">
+              {{ translate(itm) }}</a>
+            <span class="slash text-xs">/</span>
+          </li>
+          <li v-else class="breadcrumb-item active flex-1 mx-1 ml-1 leading-tight text-xs cursor-pointer" aria-current="page">
+            <span style="line-height: 2.2em" @click="bookselec(itm)"> {{ translate(itm) }} </span>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  bcPath: {
+    type: String,
+    default: '',
+  },
+})
+const emit = defineEmits(['onBookSelec'])
+// const currAppTab = ref('')
+const arrBcPath = computed(() => props.bcPath.split('/'))
+const bookselec = (book: any) => {
+  emit('onBookSelec', book)
+}
+const { t, locale } = useI18n()
+const translate = (txt: any) => {
+  const tr_txt = t(`bc.${txt}`)
+  return tr_txt === `bc.${txt}` ? txt : tr_txt
+}
+// $: arrBcPath=bcPath.split("/");
+// const bookselec = (e) => {
+//  dispatch("bookselec","main");
+//   // console.log(`mode: ${mode} id: ${id} target: ${target}`);
+//   const parent=".tabs-menu";
+//   document.querySelectorAll(`${parent} span`).forEach(it => it.classList.remove('active') )
+//  // e.target.parentElement.childNodes.forEach(it => it.classList.remove('active') )
+//  // e.target.classList.add('active')
+//   document.querySelectorAll(`${parent} span`).forEach(it => it.classList.remove('active') )
+//   document.querySelectorAll(`${parent} span.itm-${id}`).forEach(it => it.classList.add('active') )
+//   dispatch("choosetab",id);
+//   //const tab=document.querySelector(`#${currTab}`);
+//   //if (tab) { }
+// }
+</script>
+<style scoped>
+.breadcrumb-item .shield {
+  padding: 0em 0.5em;
+/* margin-top: -0.4em; */
+}
+.breadcrumb-item .icon {
+  padding: 0em;
+  margin: 0;
+}
+.breadcrumb-item .icon svg {
+  width: 100%;
+}
+.breadcrumb .breadcrumb-item {
+  position: relative;
+}
+.breadcrumb-item a:hover {
+  padding-bottom: 0.2em;
+  border-bottom: 1px solid rgb(154, 154, 154);
+  border-bottom-width: thin;
+  border-bottom-style: dashed;
+}
+/*
+.breadcrumb .breadcrumb-item:first-child {
+  margin-left: 0 !important;
+}
+*/
+.breadcrumb .breadcrumb-item:not(:last-child):after {
+  content: '/';
+  color: rgb(154, 154, 154);
+}
+</style>
diff --git a/src/components/IconLink.vue b/src/components/IconLink.vue
new file mode 100644
index 0000000..21bf34e
--- /dev/null
+++ b/src/components/IconLink.vue
@@ -0,0 +1,44 @@
+<template>
+	<span class="flex" :class="{'justify-start': open}">
+			<span v-if="pfx" class="-ml-5 mr-2 text-xs" :class="{ 'lg:hidden': open }">
+				<small class="text-gray-400">{{ pfx }}</small>
+			</span>
+			<span v-if="icon === 'carbon-home'" class="mt-1"> <carbon-home /> </span>
+			<span v-if="icon === 'carbon-campsite'" class="mt-1"> <carbon-campsite /> </span>
+			<span v-if="icon === 'carbon-login'" class="mt-1"> <carbon-login /> </span>
+			<span v-if="icon === 'carbon-dicom-overlay'" class="mt-1"> <carbon-dicom-overlay /> </span>
+			<span v-if="icon === 'carbon-table'" class="mt-1"> <carbon-table class="dark:text-white" /> </span>
+			<span v-if="icon === 'carbon-image'" class="mt-1"> <carbon-image /> </span>
+			<span v-if="icon === 'carbon-storage-pool'" class="mt-1"> <carbon-storage-pool /> </span>
+			<span v-if="icon === 'carbon-application'"> <carbon-application /> </span>
+			<span v-if="icon === 'carbon-services'" class="mt-1"> <carbon-cloud-services /> </span>
+			<span v-if="icon === 'carbon-event'"> <carbon-event /> </span>
+			<span v-if="icon === 'carbon-operation'"> <carbon-operation /> </span>
+			<span v-if="icon === 'carbon-api'"> <carbon-api /> </span>
+			<span v-if="icon === 'carbon-cloud'" class="flex justify-center items-center"> <carbon-cloud /> </span>
+			<span v-if="icon === 'carbon-flow'"> <carbon-flow /> </span>
+			<span v-if="icon === 'carbon-nominal'"> <carbon-nominal /> </span>
+      <span v-if="icon === 'carbon-language'"> <carbon-language /> </span>
+			<span v-if="show_to && name && name !== 'items'" class="mt-1 ml-2 text-xs" :class="{ 'hidden': open }"> {{ t(`${name}`,name||'') || '' }}</span>
+			<span v-if="mode !== 'icon'" class="ml-2" :class="{ 'lg:hidden': !open }"> {{ t(`${title}`,title||'') }}</span>
+ 			<span v-if="show_to" :class="{ 'lg:hidden': !open }" class="ml-2 text-xs flex justify-center items-center "> {{ t(`${name}`,name || '') }}</span>
+	</span>
+</template>
+
+<script setup lang="ts">
+import { NavItemType } from '~/typs'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
+const props = defineProps<{
+  typ: NavItemType 
+  icon: string | undefined
+  pfx: string | undefined
+  name: string | undefined
+  show_to: boolean | false
+	title: string | undefined
+	mode: sring | undefined
+  open: boolean | false
+}>()
+
+</script>