Breadcrumbs

A Breadcrumbs component shows where the current page sits in a hierarchy and gives a way back up it. Each entry but the last is a link to an ancestor, which makes a deep section navigable without reaching for the browser's back button.

Demo

Rendered live, with the same build of the library you install.

  1. Home
  2. React
  3. Breadcrumbs

Usage

Source
Breadcrumbs.tsx
import { NBreadcrumbs } from '@nayan-ui/react';


const items = [{ label: 'Home', href: '/' }, { label: 'React', href: '/react/components' }, { label: 'Breadcrumbs' }];


const Breadcrumbs = () => {
  return (
    <div>
      <NBreadcrumbs items={items} />
    </div>
  );
};


export default Breadcrumbs;

Attributes

6 props
NameTypeDefaultDetails
itemsNBreadcrumbItem[]RequiredThe items prop.
separatorReact.ReactNodeOptionalThe separator prop.
disabledbooleanfalseThe disabled prop.
classNamestring''The className prop.
itemClassNamestring''The itemClassName prop.
aria-labelstring'Breadcrumbs'The aria-label prop.

Tags

Other components solving nearby problems.