Added extra functionality to breadcrumbs

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: (
+    <ButtonGroup>
+      <Button id={"button-1"} icon={<FolderPlusIcon />} />
+      <Button id={"button-2"} icon={<CopyIcon />} />
+    </ButtonGroup>
+  ),
+};

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",

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;
 }
 

src/components/Breadcrumbs/index.tsx

@@ -36,6 +36,7 @@ const Breadcrumbs: FC<BreadcrumbsProps> = ({
   onClickOption,
   markCurrentItem = false,
   children,
+  pathActions,
 }) => {
   const theme = useTheme();
 
@@ -120,6 +121,7 @@ const Breadcrumbs: FC<BreadcrumbsProps> = ({
           }}
         />
       )}
+      {pathActions && <Box>{pathActions}</Box>}
       <Box className={"breadcrumbsList"}>
         {hasCollapsedOpts ? (
           <Fragment>