diff --git a/src/components/Breadcrumbs/Breadcrumbs.stories.tsx b/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
index 684acb58..130d9be4 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
+++ b/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
@@ -24,6 +24,10 @@ import HomeIcon from "../../icons/HomeIcon";
import TestIcon from "../../utils/TestIcon";
import EyeIcon from "../../icons/EyeIcon";
import GlobalStyles from "../GlobalStyles";
+import ButtonGroup from "../ButtonGroup";
+import Button from "../Button";
+import CopyIcon from "../../icons/CopyIcon";
+import FolderPlusIcon from "../../icons/FolderPlusIcon";
export default {
title: "MDS/Layout/Breadcrumbs",
@@ -168,3 +172,21 @@ WithSubMenus.args = {
console.log(`CLICKED OPTION`, to);
},
};
+
+export const WithPathActions = Template.bind({});
+WithPathActions.args = {
+ options: subMenuOptions,
+ markCurrentItem: true,
+ onClickOption: (to: string) => {
+ console.log(`CLICKED OPTION`, to);
+ },
+ goBackFunction: () => {
+ alert("Go back!");
+ },
+ pathActions: (
+
+ } />
+ } />
+
+ ),
+};
diff --git a/src/components/Breadcrumbs/Breadcrumbs.styles.ts b/src/components/Breadcrumbs/Breadcrumbs.styles.ts
index 4bbf98c6..e82c831d 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.styles.ts
+++ b/src/components/Breadcrumbs/Breadcrumbs.styles.ts
@@ -26,12 +26,12 @@ export const breadcrumbsTheme = (theme: Theme) => ({
display: "flex",
alignItems: "center",
marginRight: 10,
+ gap: 8,
"& .breadcrumbsList": {
display: "flex",
flexWrap: "nowrap",
flexGrow: 1,
textAlign: "left" as const,
- marginLeft: 15,
marginRight: 10,
overflow: "hidden",
userSelect: "none",
diff --git a/src/components/Breadcrumbs/Breadcrumbs.types.ts b/src/components/Breadcrumbs/Breadcrumbs.types.ts
index 77645696..f7c386d5 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.types.ts
+++ b/src/components/Breadcrumbs/Breadcrumbs.types.ts
@@ -25,6 +25,7 @@ export interface BreadcrumbsProps {
displayLastItems?: false | number;
onClickOption?: (to?: string) => void;
children?: React.ReactNode;
+ pathActions?: React.ReactNode;
markCurrentItem?: boolean;
}
diff --git a/src/components/Breadcrumbs/index.tsx b/src/components/Breadcrumbs/index.tsx
index ad269755..c2cb988a 100644
--- a/src/components/Breadcrumbs/index.tsx
+++ b/src/components/Breadcrumbs/index.tsx
@@ -36,6 +36,7 @@ const Breadcrumbs: FC = ({
onClickOption,
markCurrentItem = false,
children,
+ pathActions,
}) => {
const theme = useTheme();
@@ -120,6 +121,7 @@ const Breadcrumbs: FC = ({
}}
/>
)}
+ {pathActions && {pathActions}}
{hasCollapsedOpts ? (