https://github.com/vaadin-component-factory/vcf-breadcrumb
Web Component providing an easy way to display breadcrumb
https://github.com/vaadin-component-factory/vcf-breadcrumb
Last synced: 3 months ago
JSON representation
Web Component providing an easy way to display breadcrumb
- Host: GitHub
- URL: https://github.com/vaadin-component-factory/vcf-breadcrumb
- Owner: vaadin-component-factory
- License: apache-2.0
- Created: 2019-05-01T07:50:43.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-02-26T15:07:23.000Z (3 months ago)
- Last Synced: 2025-02-26T16:23:07.872Z (3 months ago)
- Language: TypeScript
- Size: 118 KB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# <vcf-breadcrumb>
[](https://www.npmjs.com/package/@vaadin-component-factory/vcf-breadcrumb)
This is the LitElement based version of `` Web Component.
## Installation
Install `vcf-breadcrumb`:
```sh
npm i @vaadin-component-factory/vcf-breadcrumb --save
```
## Usage
Once installed, import it in your application:
```js
import '@vaadin-component-factory/vcf-breadcrumb';
```
Add `` element to the page. Inside added element add few `` child elements, with `href` attribute. In case you want some `` elements collapse when there's not enough space, add attribute `collapse` to those elements. When user clicks on a `` element, it will navigate to the URL from `href` attribute of the element.
```html
Home
Directory
Components
VCF Components
Breadcrumb
```
## Updates since version 2.0.0
- Lit based component with theming support.
- The first item in the breadcrumb is always shown in full.
- The items can be collapsed when space runs out. This is configurable by using the attribute `collapse`. When availabe space is not enough to display the full label, then the label is shown with ellipsis.
- If space is even more limited, and some breadcrumbs have the `collapse` attribute:
- Consecutive collapsed items are grouped into ranges.
- Each range is hidden when necessary and replaced with an ellipsis element.
- `shift` attribute from previous version was removed. Responsive behavior is now given by the `collapse` attribute implementation.
### Customize separators
By default, there are few css variables that help you update the separator's style:
| CSS Variable | Definition | Default value |
|--------------|------------|---------------|
| --vcf-breadcrumb-separator-font-family | Font family of the separator icon | lumo-icons |
| --vcf-breadcrumb-separator-symbol | Separator icon | var(--lumo-icons-angle-right) |
| --vcf-breadcrumb-separator-color | Color of the separator icon | var(--lumo-contrast-40pct) |
| --vcf-breadcrumb-separator-size | Size of the separator icon | var(--lumo-font-size-s) |
| --vcf-breadcrumb-separator-margin | Margin of the separator icon | 0 |
| --vcf-breadcrumb-separator-padding | Padding of the separator icon | 0 var(--lumo-space-xs) |
## Running demo
1. Fork the `vcf-breadcrumb` repository and clone it locally.
1. Make sure you have [npm](https://www.npmjs.com/) installed.
1. When in the `vcf-breadcrumb` directory, run `npm install` to install dependencies.
1. Run `npm start` to open the demo.
## Contributing
To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first.
## License
Distributed under Apache Licence 2.0.
### Sponsored development
Major pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: [Support](https://vaadin.com/support) and [Pricing](https://vaadin.com/pricing).