Components/Navigation/Breadcrumbs

Breadcrumbs

Navigation

Breadcrumb trail with customisable separator.

Renders a <nav aria-label="Breadcrumb"> with an ordered list of links. The last BreadcrumbItem with current prop receives aria-current="page".

Usage

import { Breadcrumbs, BreadcrumbItem } from "nosible-ux"

export default function Example() {
  return (
    <Breadcrumbs>
      <BreadcrumbItem href="/">Home</BreadcrumbItem>
      <BreadcrumbItem href="/signals">Signals</BreadcrumbItem>
      <BreadcrumbItem current>AAPL earnings</BreadcrumbItem>
    </Breadcrumbs>
  )
}

Examples

Custom separator

Accessibility

<nav aria-label="Breadcrumb"> landmark with <ol> list. Current page item receives aria-current="page" and is not a link.

Props

Name	Type	Default	Description
`separator`	`ReactNode`	`"›"`	Character or element rendered between crumbs.

← All Components Getting Started →