Lemonade Design System

O breadcrumb, em tradução literal "migalhas de pão", auxilia os usuários a visualizar a localização atual em um nível de navegação hierárquico e permite que se movam rapidamente para um nível pai.

Boas práticas

Posicione o breadcrumb próximo ao topo da página.
O breadcrumb deve mostrar a hierarquia das interfaces e não o histórico de navegação.
Mantenha os títulos curtos e descritivos.
Não utilize breadcrumbs para um processo com várias etapas.
Somente utilize o componente quando existirem dois ou mais níveis de navegação (Ex.: Home > Configurações).

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