+
+ It might be the case that you want to keep your breadcrumbs outside of
+ the header. In that case, they should be positioned above the title of
+ the page.
+
+
+ Standard breadcrumbs
+
+ Underlined pages are links. This should show a hierarchical
+ relationship.
+
+
+
+
+
+ General Page
+ Second Page
+ Current page
+
+
+ Hidden breadcrumbs
+
+ Use this when you have more than three breadcrumbs. When user clicks on
+ ellipses, expand the breadcrumbs out.
+
+
+
+ General Page
+ Second Page
+ Third Page
+ Fourth Page
+ Current page
+
+
+ Layered breadcrumbs
+
+ Use this when you want to show alternative breadcrumbs on the same
+ hierarchical level.
+
+
+
+
+ General Page
+
+
+ Second Page
+ {open ? : }
+
+
+ Current page
+
+
+
+
+ Parallel second page
+
+
+ Another parallel second page
+
+
+ Yet another, parallel second page
+
+
+
+
+
+ );
+};
diff --git a/packages/core/src/layout/Breadcrumbs/Breadcrumbs.test.tsx b/packages/core/src/layout/Breadcrumbs/Breadcrumbs.test.tsx
new file mode 100644
index 0000000000..0a490afb76
--- /dev/null
+++ b/packages/core/src/layout/Breadcrumbs/Breadcrumbs.test.tsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { renderInTestApp } from '@backstage/test-utils';
+import { Typography } from '@material-ui/core';
+import { fireEvent } from '@testing-library/react';
+import React from 'react';
+import { Link } from '../..';
+import { Breadcrumbs } from './Breadcrumbs';
+
+describe('