@fellesdatakatalog/breadcrumbs

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

Installation

npm i @fellesdatakatalog/breadcrumbs

Dependencies

• react
• styled-components
• @fellesdatakatalog/theme

Usage

Basic usage

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

import React, { FC } from 'react';
import ThemeProvider from '@fellesdatakatalog/theme';
import Breadcrumbs, { Breadcrumb } from '@fellesdatakatalog/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 '@fellesdatakatalog/theme';
import Breadcrumbs, { Breadcrumb } from '@fellesdatakatalog/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 and Breadcrumb components are polymorphic and can thus be customised using as prop. Furthermore, Breadcrumb components accept arbitrary text and element nodes as children.

import React, { FC } from 'react';
import styled from 'styled-components';
import ThemeProvider from '@fellesdatakatalog/theme';
import Breadcrumbs, { Breadcrumb } from '@fellesdatakatalog/breadcrumbs';

const CustomBreadcrumbs = styled.nav`
  padding: 16px;
`;

const CustomBreadcrumb = styled.li`
  padding: 16px;
`;

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

export default App;