druxt-breadcrumb
Version:
Decoupled Router based Breadcrumb Druxt component.
74 lines (53 loc) • 2.06 kB
Markdown
# DruxtBreadcrumb
[](https://www.npmjs.com/package/druxt-breadcrumb)
[](https://circleci.com/gh/druxt/druxt-breadcrumb)
[](https://snyk.io/test/github/druxt/druxt-breadcrumb?targetFile=package.json)
[](https://codecov.io/gh/druxt/druxt-breadcrumb)
> 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`
```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.
```vue
<DruxtBreadcrumb />
```
The crumbs can be themed by providing a default scoped slot:
```vue
<DruxtBreadcrumb>
<template #default="{ crumbs }">
{{ crumbs }}
</template>
</DruxtBreadcrumb>
```
The DruxtBreadcrumb also provide a DruxtWrapper component for theming:
```vue
<!-- DruxtBreadcrumbDefault.vue -->
<template>
<div>
<slot />
<div>
</template>
```
See the [DruxtBreadcrumb API documentation](https://druxtjs.org/api/packages/breadcrumb/components/DruxtBreadcrumb) 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](https://github.com/axios/axios#axioscreateconfig). |
| `druxt.baseUrl` | `string` | Yes | `null` | Base URL for the Drupal installation. |