Breadcrumb

Shows page hierarchy and parent navigation.

View preview API reference View in Figma

FrameworksAstro · React · Elements

Registry commandlumen add Breadcrumb

InteractionNative markup

Design sourceLinked component node

See it in context

Preview

Copy a working example

Usage

---
import { Breadcrumb } from '@santi020k/lumen-astro'
---

<Breadcrumb>
  <ol>
    <li><a href="/docs">Docs</a></li>
    <li><a href="/docs/components">Components</a></li>
    <li><span aria-current="page">Breadcrumb</span></li>
  </ol>
</Breadcrumb>

---
import { Breadcrumb } from '@santi020k/lumen-astro'
---

<Breadcrumb>
  <ol>
    <li><a href="/docs">Docs</a></li>
    <li><a href="/docs/components">Components</a></li>
    <li><span aria-current="page">Breadcrumb</span></li>
  </ol>
</Breadcrumb>

import { Breadcrumb } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <Breadcrumb>
      <ol>
        <li><a href="/docs">Docs</a></li>
        <li><a href="/docs/components">Components</a></li>
        <li><span aria-current="page">Breadcrumb</span></li>
      </ol>
    </Breadcrumb>
  </>
)

import { Breadcrumb } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <Breadcrumb>
      <ol>
        <li><a href="/docs">Docs</a></li>
        <li><a href="/docs/components">Components</a></li>
        <li><span aria-current="page">Breadcrumb</span></li>
      </ol>
    </Breadcrumb>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-breadcrumb>
  <ol>
    <li><a href="/docs">Docs</a></li>
    <li><a href="/docs/components">Components</a></li>
    <li><span aria-current="page">Breadcrumb</span></li>
  </ol>
</lumen-breadcrumb>

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-breadcrumb>
  <ol>
    <li><a href="/docs">Docs</a></li>
    <li><a href="/docs/components">Components</a></li>
    <li><span aria-current="page">Breadcrumb</span></li>
  </ol>
</lumen-breadcrumb>

Choose your target

Add this component

Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.

API reference

Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.

Attribute	Values	Default	Description
children	<ol><li>...</li></ol>	required	Use an ordered list inside the nav and set aria-current="page" on the final item.
class, className	string	""	Merges custom classes with the generated ui-* root classes.
...native attributes	HTML attributes	-	Forwards standard attributes to the root element unless the component consumes them.