diff --git a/packages/core/src/layout/Breadcrumbs/Breadcrumbs.stories.tsx b/packages/core/src/layout/Breadcrumbs/Breadcrumbs.stories.tsx
new file mode 100644
index 0000000000..18569a8dad
--- /dev/null
+++ b/packages/core/src/layout/Breadcrumbs/Breadcrumbs.stories.tsx
@@ -0,0 +1,45 @@
+/*
+ * 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 React from 'react';
+import { Breadcrumbs } from '.';
+
+export default {
+ title: 'Layout/Breadcrumbs',
+ component: Breadcrumbs,
+};
+
+const pages = [
+ {
+ href: '/',
+ name: 'A',
+ },
+ {
+ href: '/',
+ name: 'B',
+ },
+ {
+ href: '/',
+ name: 'C',
+ },
+ {
+ href: '/',
+ name: 'D',
+ },
+];
+
+// export const InHeader = () => ;
+export const OutsideOfHeader = () => ;
+// export const ExampleUsage = () => ;
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..f3b69cc361
--- /dev/null
+++ b/packages/core/src/layout/Breadcrumbs/Breadcrumbs.test.tsx
@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
diff --git a/packages/core/src/layout/Breadcrumbs/Breadcrumbs.tsx b/packages/core/src/layout/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 0000000000..78761d9db2
--- /dev/null
+++ b/packages/core/src/layout/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,93 @@
+/*
+ * 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 React from 'react';
+import {
+ Link,
+ Typography,
+ Breadcrumbs as MUIBreadcrumbs,
+ Popover,
+ withStyles,
+} from '@material-ui/core';
+
+type BreadcrumbPage = {
+ href: string;
+ name: string;
+};
+
+type BreadcrumbsProps = {
+ pages: (BreadcrumbPage | BreadcrumbPage)[];
+};
+
+const UnderlinedText = withStyles({ root: { textDecoration: 'underline' } })(
+ Typography,
+);
+
+const Breadcrumb = ({ page }: { page: BreadcrumbPage }) => (
+
+ {page.name}
+
+);
+
+// Should propbably take Routes instead, to work with the react-router
+export const Breadcrumbs = ({ pages }: BreadcrumbsProps) => {
+ const [anchorEl, setAnchorEl] = React.useState(
+ null,
+ );
+ const hasHiddenBreadcrumbs = pages.length > 3;
+ const [firstPage, secondPage, ...expandablePages] = pages;
+ const currentPage = pages[pages.length - 1];
+
+ const handleClick = (event: React.MouseEvent) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ const open = Boolean(anchorEl);
+
+ return (
+
+ {firstPage && pages.length > 1 && }
+ {secondPage && pages.length > 2 && }
+ {hasHiddenBreadcrumbs && (
+ ...
+ )}
+ {currentPage && {currentPage.name}}
+
+ The content of the Popover.
+
+
+ );
+};
diff --git a/packages/core/src/layout/Breadcrumbs/index.ts b/packages/core/src/layout/Breadcrumbs/index.ts
new file mode 100644
index 0000000000..6c5c2539df
--- /dev/null
+++ b/packages/core/src/layout/Breadcrumbs/index.ts
@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+
+export { Breadcrumbs } from './Breadcrumbs';
diff --git a/packages/core/src/layout/index.ts b/packages/core/src/layout/index.ts
index d97d30982e..2ab1ebaf5b 100644
--- a/packages/core/src/layout/index.ts
+++ b/packages/core/src/layout/index.ts
@@ -28,3 +28,4 @@ export * from './Page';
export * from './Sidebar';
export * from './SignInPage';
export * from './TabbedCard';
+export * from './Breadcrumbs';