diff --git a/src/pages/Organizations/components/OrganizationBreadcrumb.jsx b/src/pages/Organizations/components/OrganizationBreadcrumb.jsx
index 3ee4b4ca23..96f668d83c 100644
--- a/src/pages/Organizations/components/OrganizationBreadcrumb.jsx
+++ b/src/pages/Organizations/components/OrganizationBreadcrumb.jsx
@@ -3,7 +3,9 @@ import { Trans } from '@lingui/macro';
import {
PageSection,
PageSectionVariants,
- Title,
+ Breadcrumb,
+ BreadcrumbItem,
+ BreadcrumbHeading
} from '@patternfly/react-core';
import {
Link
@@ -21,20 +23,22 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location
.map(({ url, name }, index) => {
let elem;
if (noLastLink && parentObj.length - 1 === index) {
- elem = ({name});
+ elem = ({name});
} else {
elem = (
-
- {name}
-
+
+
+ {name}
+
+
);
}
return elem;
})
- .reduce((prev, curr) => [prev, ' > ', curr])}
+ .reduce((prev, curr) => [prev, curr])}
);
@@ -42,25 +46,31 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location
breadcrumb = (
{generateCrumb()}
- {' > '}
- {getTabName(currentTab)}
+
+ {getTabName(currentTab)}
+
);
} else if (location.pathname.indexOf('edit') > -1) {
breadcrumb = (
{generateCrumb()}
- {' > edit'}
+
+ Edit
+
);
} else if (location.pathname.indexOf('add') > -1) {
breadcrumb = (
{generateCrumb()}
- {' > add'}
+
+ Add
+
);
} else {
+
breadcrumb = (
{generateCrumb(true)}
@@ -71,7 +81,7 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location
return (
- {breadcrumb}
+ {breadcrumb}
);
};
diff --git a/src/pages/Organizations/tabs.scss b/src/pages/Organizations/tabs.scss
index 2afa2f5ee7..324bdb1c89 100644
--- a/src/pages/Organizations/tabs.scss
+++ b/src/pages/Organizations/tabs.scss
@@ -15,4 +15,9 @@
a {
display: block;
}
+}
+
+.pf-c-breadcrumb__item.heading {
+ flex: 100%;
+ font-size: 20px;
}
\ No newline at end of file