Skip to main content
Browse docs

Marwes documentation

Breadcrumb

Navigation hierarchy component with optional home entry, current-page metadata, hidden separators, and shared nav/list semantics across adapters.

What this family solves

Navigation hierarchy component with optional home entry, current-page metadata, hidden separators, and shared nav/list semantics across adapters.

Use when

  • A page needs to show its location inside a broader hierarchy.
  • The current page should be announced as the current breadcrumb item.
  • React, Vue, and Svelte consumers need the same nav/list/separator semantics.

Avoid when

  • The UI needs primary site navigation rather than location context.
  • The hierarchy cannot identify a truthful current page.
  • Routing behavior, link resolution, or page ownership is still unclear.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Component

Breadcrumb

Types

BreadcrumbItem, BreadcrumbProps

Vue — @marwes-ui/vue

Component

Breadcrumb

Types

BreadcrumbItem, BreadcrumbProps

Svelte — @marwes-ui/svelte

Component

Breadcrumb

Types

BreadcrumbItem, BreadcrumbProps

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { Breadcrumb } from "@marwes-ui/react"

export function Example() {
  return (
    <Breadcrumb
      homeHref="/"
      items={[
        { label: "Label", href: "/section" },
        { label: "Label", href: "/section/child" },
        { label: "Current page" },
      ]}
    />
  )
}

Vue

<script setup lang="ts">
import { Breadcrumb } from "@marwes-ui/vue"
</script>

<template>
  <Breadcrumb
    home-href="/"
    :items="[
      { label: 'Label', href: '/section' },
      { label: 'Label', href: '/section/child' },
      { label: 'Current page' },
    ]"
  />
</template>

Svelte

<script lang="ts">
  import { Breadcrumb } from "@marwes-ui/svelte"
</script>

<Breadcrumb
  homeHref="/"
  items={[
    { label: "Label", href: "/section" },
    { label: "Label", href: "/section/child" },
    { label: "Current page" },
  ]}
/>

Accessibility requirements

  • Accurate current page: Keep the current page marked once so aria-current reflects the real location, not just the last item by default.
  • Honest link labels: Keep link labels short and honest; avoid truncating text in a way that hides the real destination.
  • Manual review boundary: Visual review against the synced light and dark Figma breadcrumb frames.
  • Manual review 2: Product-level review that the current item, page title, and URL hierarchy match.

Theming

Breadcrumb uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources