druxt-breadcrumb

DruxtBreadcrumb

Decoupled Router based Breadcrumb Druxt component.

Links

• DruxtJS: https://druxtjs.org
• Documentation: https://breadcrumb.druxtjs.org
• Community Discord server: https://discord.druxtjs.org

Install

$ npm install druxt-breadcrumb

Nuxt.js

Add module to nuxt.config.js

module.exports = {
  modules: ['druxt-breadcrumb'],
  druxt: {
    baseUrl: 'https://demo-api.druxtjs.org',
  },
}

Usage

DruxtBreadcrumb component

The DruxtBreadcrumb component uses the Vue Router and DruxtRouter to build a list of crumbs.

<DruxtBreadcrumb />

The crumbs can be themed by providing a default scoped slot:

<DruxtBreadcrumb>
  <template #default="{ crumbs }">
    {{ crumbs }}
  </template>
</DruxtBreadcrumb>

The DruxtBreadcrumb also provide a DruxtWrapper component for theming:

<!-- DruxtBreadcrumbDefault.vue -->
<template>
  <div>
    <slot />
  <div>
</template>

See the DruxtBreadcrumb API documentation for more information.

Options

Base Druxt options

These options are available to all Druxt modules, in the nuxt.config.js file.

Option	Type	Required	Default	Description
druxt.axios	object	No	{}	Axios instance settings.
druxt.baseUrl	string	Yes	null	Base URL for the Drupal installation.