Breadcrumbs

A simple breadcrumb generator component! Used to indicate the current page’s location within a navigational hierarchy.

Usage

'Read the “', Usage, '” section'

Preview

Home>Docs>Components>Breadcrumbs>

Code

ButtonExample.astro

---
import { Breadcrumbs } from 'studiocms:ui/components';
---

<Breadcrumbs
  segments={[
    { label: "Home", segment: "" },
    { label: "Docs", segment: "docs" },
    { label: "Components", segment: "components" },
    { label: "Breadcrumbs", segment: "breadcrumbs" },
  ]}
/>

Changing the separator

'Read the “', Changing the separator, '” section'

You can change the separator by passing a separator prop.

Preview

Home/Docs/Components/Breadcrumbs/

Code

ButtonExample.astro

---
import { Breadcrumbs } from 'studiocms:ui/components';
---

<Breadcrumbs
  segments={[
    { label: "Home", segment: "" },
    { label: "Docs", segment: "docs" },
    { label: "Components", segment: "components" },
    { label: "Breadcrumbs", segment: "breadcrumbs" },
  ]}
  separator="/"
/>