Falcon UI

breadcrumbs

Both Breadcrumb and Breadcrumbs components accept all of the responsive, theme-based style props that allow further styling customizations.

xxxxxxxxxx
 
import { Breadcrumbs, Breadcrumb } from '@deity/falcon-ui';

One
Two
Three

 
<Breadcrumbs>
  <Breadcrumb>
    <Link>One</Link>
  </Breadcrumb>
  <Breadcrumb>
    <Link>Two</Link>
  </Breadcrumb>
  <Breadcrumb>
    <Link>Three</Link>
  </Breadcrumb>
</Breadcrumbs>

Breadcrumb's default separator is implemented as CSS ::after pseudo element and can be easily changed via custom theme provided to ThemeProvider.

One
Two
Three

 
<ThemeProvider theme={themeWithCustomBreadcrumbSeparator}>
  <Breadcrumbs>
    <Breadcrumb>
      <Link>One</Link>
    </Breadcrumb>
    <Breadcrumb>
      <Link>Two</Link>
    </Breadcrumb>
    <Breadcrumb>
      <Link>Three</Link>
    </Breadcrumb>
  </Breadcrumbs>
</ThemeProvider>

xxxxxxxxxx
 
const themeWithCustomBreadcrumbSeparator = createTheme({
  components: {
    breadcrumb: {
      css: {
        '::after': {
          content: '"/"'
        }
      }
    }
  }
});