Material-UI Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS with Material-ui breadcrumb.

Example

Copy

import React from "react";
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import Link from "@material-ui/core/Link";

function handleClick(event) {
  event.preventDefault();
  console.info("You clicked a breadcrumb.");
}

export default function SimpleBreadcrumbs() {
  return (
    <>
      <Breadcrumbs separator="-">
        <Link color="inherit" href="/" onClick={handleClick}>
          Home
        </Link>
      </Breadcrumbs>
      <Breadcrumbs separator="-">
        <Link color="primary" href="/" onClick={handleClick}>
          Home
        </Link>
        <Link color="inherit" href="/" onClick={handleClick}>
          Library
        </Link>
      </Breadcrumbs>
      <Breadcrumbs separator="-">
        <Link color="primary" href="/" onClick={handleClick}>
          Home
        </Link>
        <Link color="primary" href="/" onClick={handleClick}>
          Library
        </Link>
        <Link color="inherit" href="/" onClick={handleClick}>
          Data
        </Link>
      </Breadcrumbs>
    </>
  );
}

Dark

Copy

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import Link from "@material-ui/core/Link";

function handleClick(event) {
  event.preventDefault();
  console.info("You clicked a breadcrumb.");
}

const styles = (theme) => ({
  bgDark: {
    backgroundColor: theme.palette.dark.main,
  },
  bgPrimary: {
    backgroundColor: theme.palette.primary.main,
  },
  bgError: {
    backgroundColor: theme.palette.error.main,
  },
  links: {
    color: theme.palette.white.main,
    "&:hover": {
      color: theme.palette.gray[200],
    },
  },
  separator: {
    color: theme.palette.gray[400],
  },
});

const useStyles = makeStyles(styles);

export default function SimpleBreadcrumbs() {
  const classes = useStyles();
  const darkBreadcrumbs = {
    ol: classes.bgDark,
    li: classes.links,
    separator: classes.separator,
  };
  const primaryBreadcrumbs = {
    ol: classes.bgPrimary,
    li: classes.links,
    separator: classes.separator,
  };
  const errorBreadcrumbs = {
    ol: classes.bgError,
    li: classes.links,
    separator: classes.separator,
  };
  return (
    <>
      <Breadcrumbs separator="-" classes={darkBreadcrumbs}>
        <Link color="inherit" href="/" onClick={handleClick}>
          Home
        </Link>
      </Breadcrumbs>
      <Breadcrumbs separator="-" classes={primaryBreadcrumbs}>
        <Link color="inherit" href="/" onClick={handleClick}>
          Home
        </Link>
        <Link color="inherit" href="/" onClick={handleClick}>
          Library
        </Link>
      </Breadcrumbs>
      <Breadcrumbs separator="-" classes={errorBreadcrumbs}>
        <Link color="inherit" href="/" onClick={handleClick}>
          Home
        </Link>
        <Link color="inherit" href="/" onClick={handleClick}>
          Library
        </Link>
        <Link color="inherit" href="/" onClick={handleClick}>
          Data
        </Link>
      </Breadcrumbs>
    </>
  );
}

Links

Copy

import React from "react";
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import Link from "@material-ui/core/Link";

function handleClick(event) {
  event.preventDefault();
  console.info("You clicked a breadcrumb.");
}

export default function SimpleBreadcrumbs() {
  return (
    <>
      <Breadcrumbs separator="-">
        <Link color="primary" href="/" onClick={handleClick}>
          Home
        </Link>
        <Link color="primary" href="/" onClick={handleClick}>
          Library
        </Link>
        <Link color="inherit" href="/" onClick={handleClick}>
          Data
        </Link>
      </Breadcrumbs>
    </>
  );
}

Props

If you want to see more examples and properties please check the official Material-UI Documentation.