Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

This component is still under development. Please only use the snippets provided below to avoid breaking changes.

View the official docs here

Examples

Basic

Astro file

---
import { Breadcrumb } from 'astro-bootstrap';
---
<Breadcrumb />

Set optional properties

Astro file

---
import { Breadcrumb } from 'astro-bootstrap';
---

<Breadcrumb
  id="BreadcrumbsExample"
  class="breadcrumb-class"
  itemClass="breadcrumb-item-class"
  aria-label="Breadcrumb Display"
/>

Manual usage

Astro file

---
import { Breadcrumb } from 'astro-bootstrap';
---
<Breadcrumb>
  <Breadcrumb.Item><a href="/">Home</a></Breadcrumb.Item>
  <Breadcrumb.Item><a href="/components">Components</a></Breadcrumb.Item>
  <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>
</Breadcrumb>

API

import { Breadcrumb } from 'astro-bootstrap'

Name	Type	Default	Description
aria-label	string	`'Breadcrumb'`	Set the `aria-label` property value on the "breadcrumb" div.
id	string		Set the `id` on the "breadcrumb" div.
class	string		Set the `class` on the "breadcrumb" div.
itemClass	string		Set the `class` on the "breadcrumb-item" div. Does not function if children are passed to this component.
children	node \| string		Passing children disabled auto generation of breadcrumbs

Breadcrumb.Item

import { Breadcrumb } from 'astro-bootstrap'

Name	Type	Default	Description
class	string		Set the `class` on the "breadcrumb-item" div.
active	boolean	`false`	Add's and `active` class.
children	node \| string		Passing children disabled auto generation of breadcrumbs