Hello, Next.js!

Give users context to their current location in a hierarchical navigation system with Breadcrumb.

The breadcrumb provides awareness in deeply nested page structures or views, and permits users to move freely up the structure, promoting discovery.

Navigation design guidelines ↗

#Usage

Import the Breadcrumb component into a React component in your project:

import {Breadcrumb} from 'hello-next-js'

The root Breadcrumb is a styling wrapper for the breadcrumb's items, exposed through the Breadcrumb.Item component. Compose these in a React component in your project to form a breadcrumb:

import React from 'react'
import {Breadcrumb} from 'hello-next-js'
export const MyComponent: React.FC<any> = () => {
  return (
    <Breadcrumb>
      <Breadcrumb.Item href="/music">Music</Breadcrumb.Item>
      <Breadcrumb.Item href="/music/hip-hop">Hip Hop</Breadcrumb.Item>
      <Breadcrumb.Item active>Wu-Tang Clan</Breadcrumb.Item>
    </Breadcrumb>
  )
}

#Accessibility

Ensure that Breadcrumb.Items have the appropriate href property to ensure the links are accessible:

<Breadcrumb.Item href="/path/to/sub-page">Sub Page</Breadcrumb.Item>

The Breadcrumb component applies aria-current="page" to a Breadcrumb.Item with an active property.

WAI-ARIA 1.1 aria-current spec ↗

#Component API

#Props

No props found

#Methods

No methods found

#Breadcrumb