Skip to content
Lemonade

Breadcrumb

Breadcrumbs enable users to quickly see their location within a path of navigation and move up to a parent level if desired.

Best practices

  • Place Breadcrumbs near the top of the page.
  • Show hierarchy, not history.
  • Keep Breadcrumb titles short but descriptive.
  • Do not use a Breadcrumb if you are taking users through a multi-step process.
  • Use Breadcrumbs only if there are two or more navigation levels (ex.: Home > Settings).
import { Breadcrumbs, Link } from '@lemonade/ui'
import React from 'react'

function BreadcrumbDemo() {
  return (
    <Breadcrumbs>
      <Link color='inherit' textDecoration='none' href='/'>
        First level
      </Link>
      <Link color='inherit' textDecoration='none' href='/second/'>
        Second level
      </Link>
      <Link color='inherit' textDecoration='none' href='/second/third/'>
        Third level
      </Link>
      <Link color='inherit' textDecoration='none' href='/second/third/fourth/'>
        Fourth level
      </Link>
    </Breadcrumbs>
  )
}

export default BreadcrumbDemo