@placardi/breadcrumbs

Breadcrumbs provide users with an alternative way to navigate an application.

Installation

npm i @placardi/breadcrumbs

Dependencies

• react
• styled-components
• @placardi/theme

Usage

Basic usage

In order to use the breadcrumbs component, wrap the application in global theme provider from @placardi/theme. Then, use the breadcrumbs as any regular component.

import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Breadcrumbs, { Breadcrumb } from '@placardi/breadcrumbs';

const App: FC = () => (
  <ThemeProvider>
    <Breadcrumbs>
      <Breadcrumb>
        Path 1
      </Breadcrumb>
      <Breadcrumb>
        Path 2
      </Breadcrumb>
      <Breadcrumb active>
        Path 3
      </Breadcrumb>
    </Breadcrumbs>
  </ThemeProvider>
)

export default App;

Custom separator

Breadcrumbs separator is fully customisable and accepts both text and element nodes.

import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Breadcrumbs, { Breadcrumb } from '@placardi/breadcrumbs';
import FavoriteIcon from '@material-ui/icons/Favorite';

const App: FC = () => (
  <ThemeProvider>
    <Breadcrumbs separator={<FavoriteIcon />}>
      <Breadcrumb>
        <a href="/path/1">Path 1</a>
      </Breadcrumb>
      <Breadcrumb>
        <a href="/path/2">Path 2</a>
      </Breadcrumb>
      <Breadcrumb active>
        <a href="/path/3">Path 3</a>
      </Breadcrumb>
    </Breadcrumbs>
  </ThemeProvider>
)

export default App;

Custom breadcrumbs

Breadcrumbs can be customised by passing any arbitrary text or element child to Breadcrumb component.

import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Breadcrumbs, { Breadcrumb } from '@placardi/breadcrumbs';

const App: FC = () => (
  <ThemeProvider>
    <Breadcrumbs>
      <Breadcrumb>
        <a href="/path/1">Path 1</a>
      </Breadcrumb>
      <Breadcrumb>
        <a href="/path/2">Path 2</a>
      </Breadcrumb>
      <Breadcrumb active>
        <a href="/path/3">Path 3</a>
      </Breadcrumb>
    </Breadcrumbs>
  </ThemeProvider>
)

export default App;