@nextcloud/vue

Appearance

Return to top
On this page

NcBreadcrumbs

Props

Prop nameDescriptionTypeValuesDefault
rootIconSet a css icon-class for the icon of the root breadcrumb to be used.string-'icon-home'

Events

Event namePropertiesDescription
droppedundefined Event - e the drop DOM event
path string - The path of the breadcrumb		Event emitted when something is dropped on the breadcrumb.

Slots

NameDescriptionBindings
default
actions

General description

This component renders a breadcrumb bar. It adjusts to the available width by hiding breadcrumbs in a dropdown menu and emits an event when something is dropped on a creadcrumb.

Usage

vue
<template>
  <div>
    <div class="container">
      <NcBreadcrumbs @dropped="dropped">
        <NcBreadcrumb title="Home" href="/" @dropped="droppedOnCrumb">
          <template #icon>
            <Folder :size="20" />
          </template>
        </NcBreadcrumb>
        <NcBreadcrumb title="Folder 1" href="/Folder 1" />
        <NcBreadcrumb
          title="Folder 2"
          href="/Folder 1/Folder 2"
          :disable-drop="true"
        />
        <NcBreadcrumb title="Folder 3" href="/Folder 1/Folder 2/Folder 3" />
        <NcBreadcrumb
          title="Folder 4"
          href="/Folder 1/Folder 2/Folder 3/Folder 4"
        />
        <NcBreadcrumb
          title="Folder 5"
          href="/Folder 1/Folder 2/Folder 3/Folder 4/Folder 5"
          :disable-drop="true"
        >
          <template #menu-icon>
            <MenuDown :size="20" />
          </template>
          <NcActionButton @click="alert('Share')">
            <template #icon>
              <ShareVariant :size="20" />
            </template>
            Share
          </NcActionButton>
          <NcActionButton @click="alert('Download')">
            <template #icon>
              <Download :size="20" />
            </template>
            Download
          </NcActionButton>
        </NcBreadcrumb>
        <template #actions>
          <NcButton>
            <template #icon>
              <Plus :size="20" />
            </template>
            New
          </NcButton>
        </template>
      </NcBreadcrumbs>
    </div>
    <br />
    <div class="dragme" draggable="true" @dragstart="dragStart">
      <span>Drag me onto the breadcrumbs.</span>
    </div>
  </div>
</template>

<script>
import Download from "vue-material-design-icons/Download";
import Folder from "vue-material-design-icons/Folder";
import MenuDown from "vue-material-design-icons/MenuDown";
import Plus from "vue-material-design-icons/Plus";
import ShareVariant from "vue-material-design-icons/ShareVariant";

export default {
  components: {
    Download,
    Folder,
    MenuDown,
    Plus,
    ShareVariant
  },
  methods: {
    dropped(e, path) {
      alert("Global drop on " + path);
    },
    droppedOnCrumb(e, path) {
      alert("Drop on crumb " + path);
    },
    dragStart(e) {
      e.dataTransfer.setData("text/plain", "dragging");
    }
  }
};
</script>
<style>
.container {
  display: inline-flex;
  width: 100%;
}

.dragme {
  display: block;
  width: 100px;
  height: 44px;
  background-color: var(--color-background-dark);
}
</style>