ComponentsBeta

Breadcrumbs

A list of navigation items to the parent views of the current view in hierarchical order.

import React from 'react';
import { Breadcrumbs, Breadcrumb } from '@minddrop/ui';

export const BreadcrumbsDemo = () => (
  <div style={{ display: 'flex', alignItems: 'center' }}>
    <Breadcrumbs
      style={{
        padding: '8px 40px 8px 16px',
        backgroundColor: 'var(--bgApp)',
        borderRadius: 'var(--radiusLg)',
      }}
    >
      <Breadcrumb label="Tea" />
      <Breadcrumb label="Books" />
      <Breadcrumb label="The Book Of Tea" />
    </Breadcrumbs>
  </div>
);

export default BreadcrumbsDemo;

Features

Full keyboard navigation.

Usage

Import the component from the @minddrop/ui package.

import { Breadcrumbs, Breadcrumb } from '@minddrop/ui';

export default () => {
  return (
    <Breadcrumbs>
      <Breadcrumb label="Tea" />
      <Breadcrumb label="Books" />
      <Breadcrumb label="The Book Of Tea" />
    </Breadcrumbs>
  );
};