[Breadcrumbs] Add new component

docs/src/modules/components/MarkdownLinks.js

@@ -16,6 +16,7 @@ async function handleClick(event) {
 
   // Ignore click for new tab / new window behavior
   if (
+    event.defaultPrevented ||
     event.metaKey ||
     event.ctrlKey ||
     event.shiftKey ||

docs/src/pages/lab/breadcrumbs/CollapsedBreadcrumbs.js

@@ -0,0 +1,62 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Breadcrumbs from '@material-ui/lab/Breadcrumbs';
+import Breadcrumb from '@material-ui/lab/Breadcrumb';
+import Link from '@material-ui/core/Link';
+
+const styles = theme => ({
+  root: {
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+  },
+  paper: {
+    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+  },
+});
+
+function handleClick(event) {
+  event.preventDefault();
+  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+}
+
+function CollapsedBreadcrumbs(props) {
+  const { classes } = props;
+
+  return (
+    <Paper className={classes.paper}>
+      <Breadcrumbs maxItems={2} arial-label="Breadcrumb navigation">
+        <Breadcrumb>
+          <Link color="inherit" href="#" onClick={handleClick}>
+            Home
+          </Link>
+        </Breadcrumb>
+        <Breadcrumb>
+          <Link color="inherit" href="#" onClick={handleClick}>
+            Catalog
+          </Link>
+        </Breadcrumb>
+        <Breadcrumb>
+          <Link color="inherit" href="#" onClick={handleClick}>
+            Accessories
+          </Link>
+        </Breadcrumb>
+        <Breadcrumb>
+          <Link color="inherit" href="#" onClick={handleClick}>
+            New Collection
+          </Link>
+        </Breadcrumb>
+        <Breadcrumb color="textPrimary">Belts</Breadcrumb>
+      </Breadcrumbs>
+    </Paper>
+  );
+}
+
+CollapsedBreadcrumbs.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CollapsedBreadcrumbs);

docs/src/pages/lab/breadcrumbs/CustomSeparator.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Breadcrumbs from '@material-ui/lab/Breadcrumbs';
+import Breadcrumb from '@material-ui/lab/Breadcrumb';
+import Link from '@material-ui/core/Link';
+import NavigateNextIcon from '@material-ui/icons/NavigateNext';
+
+const styles = theme => ({
+  root: {
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+  },
+  paper: {
+    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+  },
+});
+
+function handleClick(event) {
+  event.preventDefault();
+  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+}
+
+function CustomSeparator(props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.root}>
+      <Paper className={classes.paper}>
+        <Breadcrumbs separator="›" arial-label="Breadcrumb navigation">
+          <Breadcrumb>
+            <Link color="inherit" href="/" onClick={handleClick}>
+              Material-UI
+            </Link>
+          </Breadcrumb>
+          <Breadcrumb>
+            <Link color="inherit" href="/lab/about/" onClick={handleClick}>
+              Lab
+            </Link>
+          </Breadcrumb>
+          <Breadcrumb color="textPrimary">Breadcrumb</Breadcrumb>
+        </Breadcrumbs>
+      </Paper>
+      <br />
+      <Paper className={classes.paper}>
+        <Breadcrumbs separator="-" arial-label="Breadcrumb navigation">
+          <Breadcrumb>
+            <Link color="inherit" href="/" onClick={handleClick}>
+              Material-UI
+            </Link>
+          </Breadcrumb>
+          <Breadcrumb>
+            <Link color="inherit" href="/lab/about/" onClick={handleClick}>
+              Lab
+            </Link>
+          </Breadcrumb>
+          <Breadcrumb color="textPrimary">Breadcrumb</Breadcrumb>
+        </Breadcrumbs>
+      </Paper>
+      <br />
+      <Paper className={classes.paper}>
+        <Breadcrumbs
+          separator={<NavigateNextIcon fontSize="small" />}
+          arial-label="Breadcrumb navigation"
+        >
+          <Breadcrumb>
+            <Link color="inherit" href="/" onClick={handleClick}>
+              Material-UI
+            </Link>
+          </Breadcrumb>
+          <Breadcrumb>
+            <Link color="inherit" href="/lab/about/" onClick={handleClick}>
+              Lab
+            </Link>
+          </Breadcrumb>
+          <Breadcrumb color="textPrimary">Breadcrumb</Breadcrumb>
+        </Breadcrumbs>
+      </Paper>
+    </div>
+  );
+}
+
+CustomSeparator.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomSeparator);

docs/src/pages/lab/breadcrumbs/CustomizedBreadcrumbs.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { emphasize } from '@material-ui/core/styles/colorManipulator';
+import Paper from '@material-ui/core/Paper';
+import Breadcrumbs from '@material-ui/lab/Breadcrumbs';
+import Breadcrumb from '@material-ui/lab/Breadcrumb';
+import Chip from '@material-ui/core/Chip';
+import Avatar from '@material-ui/core/Avatar';
+import HomeIcon from '@material-ui/icons/Home';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+const styles = theme => ({
+  root: {
+    padding: theme.spacing.unit,
+  },
+  chip: {
+    backgroundColor: theme.palette.grey[100],
+    height: 24,
+    color: theme.palette.grey[800],
+    fontWeight: theme.typography.fontWeightRegular,
+    '&:hover, &:focus': {
+      backgroundColor: theme.palette.grey[300],
+    },
+    '&:active': {
+      boxShadow: theme.shadows[1],
+      backgroundColor: emphasize(theme.palette.grey[300], 0.12),
+    },
+  },
+  avatar: {
+    background: 'none',
+    marginRight: -theme.spacing.unit * 1.5,
+  },
+});
+
+function handleClick(event) {
+  event.preventDefault();
+  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+}
+
+function CustomBreadcrumb(props) {
+  const { classes, ...rest } = props;
+  return <Chip className={classes.chip} {...rest} />;
+}
+
+CustomBreadcrumb.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const StyledBreadcrumb = withStyles(styles)(CustomBreadcrumb);
+
+function CustomizedBreadcrumbs(props) {
+  const { classes } = props;
+
+  return (
+    <Paper className={classes.root}>
+      <Breadcrumbs arial-label="Breadcrumb navigation">
+        <Breadcrumb>
+          <StyledBreadcrumb
+            component="a"
+            href="#"
+            label="Home"
+            avatar={
+              <Avatar className={classes.avatar}>
+                <HomeIcon />
+              </Avatar>
+            }
+            onClick={handleClick}
+          />
+        </Breadcrumb>
+        <Breadcrumb>
+          <StyledBreadcrumb component="a" href="#" label="Catalog" onClick={handleClick} />
+        </Breadcrumb>
+        <Breadcrumb>
+          <StyledBreadcrumb
+            label="Accessories"
+            deleteIcon={<ExpandMoreIcon />}
+            onClick={handleClick}
+            onDelete={handleClick}
+          />
+        </Breadcrumb>
+      </Breadcrumbs>
+    </Paper>
+  );
+}
+
+CustomizedBreadcrumbs.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomizedBreadcrumbs);

docs/src/pages/lab/breadcrumbs/IconBreadcrumbs.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Breadcrumbs from '@material-ui/lab/Breadcrumbs';
+import Breadcrumb from '@material-ui/lab/Breadcrumb';
+import Link from '@material-ui/core/Link';
+import HomeIcon from '@material-ui/icons/Home';
+import WhatshotIcon from '@material-ui/icons/Whatshot';
+import GrainIcon from '@material-ui/icons/Grain';
+
+const styles = theme => ({
+  root: {
+    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+  },
+  link: {
+    display: 'flex',
+  },
+  icon: {
+    marginRight: theme.spacing.unit / 2,
+    width: 20,
+    height: 20,
+  },
+});
+
+function handleClick(event) {
+  event.preventDefault();
+  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+}
+
+function IconBreadcrumbs(props) {
+  const { classes } = props;
+  return (
+    <Paper className={classes.root}>
+      <Breadcrumbs arial-label="Breadcrumb navigation">
+        <Breadcrumb>
+          <Link color="inherit" href="/" onClick={handleClick} className={classes.link}>
+            <HomeIcon className={classes.icon} />
+            Material-UI
+          </Link>
+        </Breadcrumb>
+        <Breadcrumb>
+          <Link color="inherit" href="/lab/about/" onClick={handleClick} className={classes.link}>
+            <WhatshotIcon className={classes.icon} />
+            Lab
+          </Link>
+        </Breadcrumb>
+        <Breadcrumb color="textPrimary" className={classes.link}>
+          <GrainIcon className={classes.icon} />
+          Breadcrumb
+        </Breadcrumb>
+      </Breadcrumbs>
+    </Paper>
+  );
+}
+
+IconBreadcrumbs.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(IconBreadcrumbs);