https://github.com/felix-berlin/astro-breadcrumbs

Well configurable breadcrumb component for Astro.js. Create breadcrumbs completely dynamically or specify exactly how they should look.
https://github.com/felix-berlin/astro-breadcrumbs

a11y astrojs breadcrumbs breadcrumbs-generator css navigation sass scss structured-data ui withastro zero-config

Last synced: 30 days ago
JSON representation

Well configurable breadcrumb component for Astro.js. Create breadcrumbs completely dynamically or specify exactly how they should look.

• Host: GitHub
• URL: https://github.com/felix-berlin/astro-breadcrumbs
• Owner: felix-berlin
• License: gpl-3.0
• Created: 2022-11-25T16:23:18.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-29T01:37:00.000Z (about 1 month ago)
• Last Synced: 2024-10-29T23:43:29.646Z (about 1 month ago)
• Topics: a11y, astrojs, breadcrumbs, breadcrumbs-generator, css, navigation, sass, scss, structured-data, ui, withastro, zero-config
• Language: TypeScript
• Homepage: https://docs.astro-breadcrumbs.kasimir.dev
• Size: 3.22 MB
• Stars: 71
• Watchers: 2
• Forks: 10
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-astro - Astro Breadcrumbs - Well configurable breadcrumb component for Astro. Create breadcrumbs completely dynamically or specify exactly how they should look. (Astro Packages/Libraries)

README

        
# 🍞 Astro | Breadcrumbs



![npm](https://img.shields.io/npm/dm/astro-breadcrumbs?logo=npm&style=flat-square)

![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/astro-breadcrumbs?logo=jsdelivr&style=flat-square)

![npm](https://img.shields.io/npm/v/astro-breadcrumbs?logo=npm&style=flat-square)

![GitHub package.json version](https://img.shields.io/github/package-json/v/felix-berlin/astro-breadcrumbs?label=github&logo=github&style=flat-square)

![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/felix-berlin/astro-breadcrumbs/release.yml?label=release&logo=github&style=flat-square)

[![codecov](https://codecov.io/gh/felix-berlin/astro-breadcrumbs/graph/badge.svg?token=8GTWBCTPYZ)](https://codecov.io/gh/felix-berlin/astro-breadcrumbs)

![GitHub file size in bytes](https://img.shields.io/github/size/felix-berlin/astro-breadcrumbs/src/Breadcrumbs.astro?label=component%20size&logo=astro&style=flat-square)

![GitHub file size in bytes](https://img.shields.io/github/size/felix-berlin/astro-breadcrumbs/src/breadcrumbs.css?label=CSS%20Size&logo=CSS3&style=flat-square)

![GitHub file size in bytes](https://img.shields.io/github/size/felix-berlin/astro-breadcrumbs/src/breadcrumbs.scss?label=SCSS%20Size&logo=SASS&style=flat-square)

![GitHub file size in bytes](https://img.shields.io/github/size/felix-berlin/astro-breadcrumbs/src/lib/truncated.ts?label=Client%20JS%20size&logo=JS&style=flat-square)

![Dependent repos (via libraries.io)](https://img.shields.io/librariesio/dependent-repos/npm/astro-breadcrumbs?style=flat-square)

Well configurable breadcrumb component for [Astro](https://astro.build/).

> Create breadcrumbs completely dynamically or specify exactly how they should look.

---

This component comes with:

- ✅ **Zero dependencies**

- ✅ **Fully customizable**

- ✅ **Dynamic or static mode**

- ✅ **Completely optional styles**

- ✅ **Choose between SCSS or CSS styles:**

  - **SCSS file with a lot of settings**

  - **CSS File with configurable CSS vars**

- ✅ **CSS classes with BEM naming convention**

- ✅ **A11y support**

- ✅ **Structured data [schema.org JSON-LD](https://schema.org/BreadcrumbList) script tag support**

- ✅ **Small size**

- ✅ **Zero Config Mode. Just install and use!**

## 📦 Installation

```bash

# Uisng NPM

npm install astro-breadcrumbs

# Using Yarn

yarn add astro-breadcrumbs

# Using PNPM

pnpm add astro-breadcrumbs

```

---

## 📖 Documentation

Please visit the [documentation](https://docs.astro-breadcrumbs.kasimir.dev/) for detailed information about all features and styling.