DruxtBreadcrumb

Decoupled Router based Breadcrumb Druxt component.

Links

• DruxtJS: https://druxtjs.org
• Documentation: https://druxtjs.org/modules/breadcrumb
• 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. |