Navigation

Breadcrumbs

Where a page sits in the hierarchy.

import { Breadcrumbs, BreadcrumbItem } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Basic

breadcrumbs/basic.tsx

import { BreadcrumbItem, Breadcrumbs } from '@jsonresume/ui';

export default function BreadcrumbsBasic() {
  return (
    <Breadcrumbs>
      <BreadcrumbItem href="https://jsonresume.org">Home</BreadcrumbItem>
      <BreadcrumbItem href="https://jsonresume.org/themes">
        Themes
      </BreadcrumbItem>
      <BreadcrumbItem current>Pro</BreadcrumbItem>
    </Breadcrumbs>
  );
}

Accessibility

A named <nav> with an ordered list; the current page sets aria-current.

Props

Also accepts the attributes of the element Breadcrumbs renders.
Prop	Type	Default	Description
label	string	Breadcrumb

Also accepts the attributes of the element BreadcrumbItem renders.
Prop	Type	Default	Description
asChild	boolean	false
current	boolean	false