diff --git a/static_src/components/app_container.jsx b/static_src/components/app_container.jsx
index 1fa98fb3..0599554d 100644
--- a/static_src/components/app_container.jsx
+++ b/static_src/components/app_container.jsx
@@ -7,7 +7,7 @@ import { appHealth, worstAppInstanceState } from '../util/health';
 import { appStates } from '../constants';
 import { config } from 'skin';
 import AppStore from '../stores/app_store.js';
-import Breadcrumbs from './breadcrumbs.jsx';
+import Breadcrumbs from './breadcrumbs';
 import DomainStore from '../stores/domain_store.js';
 import EnvStore from '../stores/env_store.js';
 import RouteStore from '../stores/route_store.js';
@@ -193,7 +193,7 @@ export default class AppContainer extends React.Component {
 
 
   render() {
-    const { app, envRequest, envUpdateError } = this.state;
+    const { org, space, app, envRequest, envUpdateError } = this.state;
 
     let loading = <Loading text="Loading app" />;
     let content = <div>{ loading }</div>;
@@ -211,7 +211,7 @@ export default class AppContainer extends React.Component {
         <div>
           <div className={ this.styler('grid') }>
             <div className={ this.styler('grid-width-12') }>
-              <Breadcrumbs />
+              <Breadcrumbs org={org} space={space} app={app} />
               <PageHeader title={ title }>
                 { this.error }
                 { this.openApp }
diff --git a/static_src/components/breadcrumbs.jsx b/static_src/components/breadcrumbs.jsx
deleted file mode 100644
index 49b78788..00000000
--- a/static_src/components/breadcrumbs.jsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from 'react';
-import style from 'cloudgov-style/css/cloudgov-style.css';
-
-import createStyler from '../util/create_styler';
-import AppStore from '../stores/app_store';
-import BreadcrumbsItem from './breadcrumbs_item.jsx';
-import OrgStore from '../stores/org_store';
-import SpaceStore from '../stores/space_store';
-import { orgHref, spaceHref } from '../util/url';
-
-
-function stateSetter() {
-  const app = AppStore.get(AppStore.currentAppGuid);
-  const space = SpaceStore.get(SpaceStore.currentSpaceGuid);
-  const org = OrgStore.get(OrgStore.currentOrgGuid);
-
-  return {
-    app,
-    org,
-    space
-  };
-}
-
-export default class Breadcrumbs extends React.Component {
-  constructor(props) {
-    super(props);
-    this.styler = createStyler(style);
-    this.state = stateSetter();
-    this._onChange = this._onChange.bind(this);
-  }
-
-  componentDidMount() {
-    AppStore.addChangeListener(this._onChange);
-    OrgStore.addChangeListener(this._onChange);
-    SpaceStore.addChangeListener(this._onChange);
-  }
-
-  componentWillUnmount() {
-    AppStore.removeChangeListener(this._onChange);
-    OrgStore.removeChangeListener(this._onChange);
-    SpaceStore.removeChangeListener(this._onChange);
-  }
-
-  _onChange() {
-    this.setState(stateSetter());
-  }
-
-  render() {
-    let breadcrumbs = [];
-    const { org, space, app } = this.state;
-
-    // Add the parent states
-    if (org && org.name) {
-      breadcrumbs.push(<BreadcrumbsItem key="home" url="/#/">Overview</BreadcrumbsItem>);
-    }
-
-    if (org && space && space.name) {
-      breadcrumbs.push(
-        <BreadcrumbsItem key={ org.guid } url={ orgHref(org) }>{ org.name }</BreadcrumbsItem>
-      );
-    }
-
-    if (org && space && app && app.name) {
-      breadcrumbs.push(
-        (
-          <BreadcrumbsItem key={ space.guid } url={ spaceHref(org, space) }>
-            { space.name }
-          </BreadcrumbsItem>
-        )
-      );
-    }
-
-    return (
-      <ol className={ this.styler('breadcrumbs', 'test-breadcrumbs') }>
-        { breadcrumbs }
-      </ol>
-    );
-  }
-}
diff --git a/static_src/components/breadcrumbs/breadcrumbs.js b/static_src/components/breadcrumbs/breadcrumbs.js
new file mode 100644
index 00000000..bf4833d7
--- /dev/null
+++ b/static_src/components/breadcrumbs/breadcrumbs.js
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { appPropType } from '../../stores/app_store';
+import { orgPropType } from '../../stores/org_store';
+import { spacePropType } from '../../stores/space_store';
+import Item from './breadcrumbs_item';
+import { orgHref, spaceHref } from '../../util/url';
+
+const propTypes = {
+  org: orgPropType.isRequired,
+  space: spacePropType,
+  app: appPropType
+};
+
+const Breadcrumbs = ({ org, space, app }) => {
+  const items = [
+    <Item key="home" href="/" testLabel="overview">
+      Overview
+    </Item>
+  ];
+
+  if (org && space) {
+    items.push(
+      <Item key={org.guid} href={orgHref(org)} testLabel="org">
+        {org.name}
+      </Item>
+    );
+  }
+
+  if (org && space && app) {
+    items.push(
+      <Item key={space.guid} href={spaceHref(org, space)} testLabel="space">
+        {space.name}
+      </Item>
+    );
+  }
+
+  return (
+    <ol className="breadcrumbs" data-test="breadcrumbs">
+      {items}
+    </ol>
+  );
+};
+
+Breadcrumbs.propTypes = propTypes;
+
+export default Breadcrumbs;
diff --git a/static_src/components/breadcrumbs/breadcrumbs_item.js b/static_src/components/breadcrumbs/breadcrumbs_item.js
new file mode 100644
index 00000000..1739f146
--- /dev/null
+++ b/static_src/components/breadcrumbs/breadcrumbs_item.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  href: PropTypes.string,
+  testLabel: PropTypes.string
+};
+
+const BreadcrumbsItem = ({ children, href, testLabel }) => (
+  <li className="breadcrumbs-item">
+    {href ? (
+      <a className="breadcrumbs-item-link" href={href} data-test={testLabel}>
+        {children}
+      </a>
+    ) : (
+      <span className="breadcrumbs-item-current" data-test={testLabel}>
+        {children}
+      </span>
+    )}
+  </li>
+);
+
+BreadcrumbsItem.propTypes = propTypes;
+
+export default BreadcrumbsItem;
diff --git a/static_src/components/breadcrumbs/index.js b/static_src/components/breadcrumbs/index.js
new file mode 100644
index 00000000..7b9b184b
--- /dev/null
+++ b/static_src/components/breadcrumbs/index.js
@@ -0,0 +1 @@
+export { default } from './breadcrumbs';
diff --git a/static_src/components/breadcrumbs_item.jsx b/static_src/components/breadcrumbs_item.jsx
deleted file mode 100644
index 99ef1830..00000000
--- a/static_src/components/breadcrumbs_item.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import style from 'cloudgov-style/css/cloudgov-style.css';
-
-import createStyler from '../util/create_styler';
-
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  url: PropTypes.string
-};
-
-export default class BreadcrumbsItem extends React.Component {
-  constructor(props) {
-    super(props);
-    this.styler = createStyler(style);
-  }
-
-  render() {
-    const url = this.props.url;
-    const content = url ?
-      (
-        <a className={ this.styler('breadcrumbs-item-link') } href={ url }>
-          { this.props.children }
-        </a>
-      )
-      : <span className={ this.styler('breadcrumbs-item-current') }>{ this.props.children }</span>;
-
-    return (
-      <li className={ this.styler('breadcrumbs-item') }>
-        { content }
-      </li>
-    );
-  }
-}
-
-BreadcrumbsItem.propTypes = propTypes;
diff --git a/static_src/components/org_container.jsx b/static_src/components/org_container.jsx
index fc0e3624..70af1bf4 100644
--- a/static_src/components/org_container.jsx
+++ b/static_src/components/org_container.jsx
@@ -7,7 +7,7 @@ import style from 'cloudgov-style/css/cloudgov-style.css';
 
 
 import AppCountStatus from './app_count_status.jsx';
-import Breadcrumbs from './breadcrumbs.jsx';
+import Breadcrumbs from './breadcrumbs';
 import EntityIcon from './entity_icon.jsx';
 import EntityEmpty from './entity_empty.jsx';
 import Loading from './loading.jsx';
@@ -126,12 +126,13 @@ export default class OrgContainer extends React.Component {
   }
 
   render() {
+    const { org } = this.state;
     const state = this.state;
     let loading = <Loading text="Loading organization" />;
     let content = <div>{ loading }</div>;
     const title = (
       <span>
-        <EntityIcon entity="org" iconSize="large" /> { state.org.name }
+        <EntityIcon entity="org" iconSize="large" /> { org.name }
       </span>
     );
     const spaces = !state.spaces.length ? this.emptyState :
@@ -147,7 +148,7 @@ export default class OrgContainer extends React.Component {
 
     if (state.empty) {
       content = <h4 className="test-none_message">No organizations</h4>;
-    } else if (!state.loading && state.org) {
+    } else if (!state.loading && org) {
       const allApps = this.allApps();
       const allServices = this.allServices();
 
@@ -156,7 +157,7 @@ export default class OrgContainer extends React.Component {
       <div className={ this.styler('grid') }>
         <div className={ this.styler('grid') }>
           <div className={ this.styler('grid-width-12') }>
-            <Breadcrumbs />
+            <Breadcrumbs org={org} />
             <PageHeader title={ title } />
           </div>
         </div>
diff --git a/static_src/components/space_container.jsx b/static_src/components/space_container.jsx
index 5e3964d0..b6a903b9 100644
--- a/static_src/components/space_container.jsx
+++ b/static_src/components/space_container.jsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import AppCountStatus from './app_count_status.jsx';
 import AppList from '../components/app_list.jsx';
-import Breadcrumbs from './breadcrumbs.jsx';
+import Breadcrumbs from './breadcrumbs';
 import EntityIcon from './entity_icon.jsx';
 import Loading from './loading.jsx';
 import Marketplace from './marketplace.jsx';
@@ -77,20 +77,21 @@ export default class SpaceContainer extends React.Component {
       return <Loading />;
     }
 
+    const { currentOrg: org, space } = this.state;
+
     let main = <div></div>;
     const title = (
       <span>
-        <EntityIcon entity="space" iconSize="large" /> { this.state.space.name }
+        <EntityIcon entity="space" iconSize="large" /> { space.name }
       </span>
     );
 
-    if (this.state.space && this.state.space.guid) {
-      const space = this.state.space;
+    if (space && space.guid) {
       main = (
       <div>
         <div className={ this.styler('grid') }>
           <div className={ this.styler('grid-width-12') }>
-            <Breadcrumbs />
+            <Breadcrumbs org={org} space={space} />
             <PageHeader title={ title } />
           </div>
         </div>
diff --git a/static_src/stores/org_store.js b/static_src/stores/org_store.js
index 25086387..15d24307 100644
--- a/static_src/stores/org_store.js
+++ b/static_src/stores/org_store.js
@@ -1,8 +1,4 @@
-
-/*
- * Store for org data. Will store and update org data on changes from UI and
- * server.
- */
+import PropTypes from 'prop-types';
 
 import AppDispatcher from '../dispatcher';
 import BaseStore from './base_store.js';
@@ -10,6 +6,11 @@ import LoginStore from './login_store.js';
 import { orgActionTypes } from '../constants.js';
 import Quicklook from '../models/quicklook';
 
+export const orgPropType = PropTypes.shape({
+  guid: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired
+});
+
 export class OrgStore extends BaseStore {
   constructor() {
     super();
diff --git a/static_src/stores/space_store.js b/static_src/stores/space_store.js
index 74fe60a8..592f405d 100644
--- a/static_src/stores/space_store.js
+++ b/static_src/stores/space_store.js
@@ -4,10 +4,16 @@
  */
 
 import Immutable from 'immutable';
+import PropTypes from 'prop-types';
 
 import BaseStore from './base_store.js';
 import { orgActionTypes, spaceActionTypes } from '../constants.js';
 
+export const spacePropType = PropTypes.shape({
+  guid: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired
+});
+
 class SpaceStore extends BaseStore {
   constructor() {
     super();
diff --git a/static_src/test/functional/pageobjects/breadcrumbs.element.js b/static_src/test/functional/pageobjects/breadcrumbs.element.js
index 42bce331..257f3411 100644
--- a/static_src/test/functional/pageobjects/breadcrumbs.element.js
+++ b/static_src/test/functional/pageobjects/breadcrumbs.element.js
@@ -1,19 +1,12 @@
-
 import BaseElement from './base.element';
 
-// https://www.martinfowler.com/bliki/PageObject.html
-//
-// Represents a DOM element for making assertions against. This makes it
-// easier to abstract some of the webdriver details from the UI component.
-
-// TODO attach to class as static property
-const breadcrumbs = '.test-breadcrumbs';
+const breadcrumbs = '[data-test="breadcrumbs"]';
 
 const selectors = {
   primary: breadcrumbs,
-  overview: `${breadcrumbs} li:first-child a`,
-  org: `${breadcrumbs} li:nth-child(1) a`,
-  space: `${breadcrumbs} li:last-child a`
+  overview: `${breadcrumbs} [data-test="overview"]`,
+  org: `${breadcrumbs} [data-test="org"]`,
+  space: `${breadcrumbs} [data-test="space"]`
 };
 
 export default class Breadcrumbs extends BaseElement {
@@ -40,4 +33,3 @@ export default class Breadcrumbs extends BaseElement {
 }
 
 Breadcrumbs.primarySelector = selectors.primary;
-