diff --git a/src/components/MUI/DataDisplay/Badge.stories.tsx b/src/components/MUI/DataDisplay/Badge.stories.tsx
index 18ab3b40..ba479284 100644
--- a/src/components/MUI/DataDisplay/Badge.stories.tsx
+++ b/src/components/MUI/DataDisplay/Badge.stories.tsx
@@ -65,7 +65,7 @@ export const InvisibleNumber: Story = {
   render: (args) => <Badge {...args} invisible={true} />,
 };
 
-export const Colors: Story = {
+export const Colours: Story = {
   args: { badgeContent: 7 },
   render: (args) => (
     <>
diff --git a/src/components/MUI/MuiWrapped.tsx b/src/components/MUI/MuiWrapped.tsx
index 13284a4f..06fef5a8 100644
--- a/src/components/MUI/MuiWrapped.tsx
+++ b/src/components/MUI/MuiWrapped.tsx
@@ -4,14 +4,23 @@ import MuiAddIcon from "@mui/icons-material/Add";
 import MuiAssignmentIcon from "@mui/icons-material/Assignment";
 import MuiDeleteIcon from "@mui/icons-material/Delete";
 import MuiExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import MuiFavoriteIcon from "@mui/icons-material/Favorite";
+import MuiFileCopyIcon from "@mui/icons-material/FileCopy";
 import MuiFolderIcon from "@mui/icons-material/Folder";
+import MuiGrainIcon from "@mui/icons-material/Grain";
+import MuiHomeIcon from "@mui/icons-material/Home";
 import MuiInboxIcon from "@mui/icons-material/Inbox";
+import MuiLocationOnIcon from "@mui/icons-material/LocationOn";
 import MuiMailIcon from "@mui/icons-material/Mail";
 import MuiMenuIcon from "@mui/icons-material/Menu";
 import MuiNotificationsIcon from "@mui/icons-material/Notifications";
 import MuiPageviewIcon from "@mui/icons-material/Pageview";
+import MuiPrintIcon from "@mui/icons-material/Print";
+import MuiRestoreIcon from "@mui/icons-material/Restore";
 import MuiSaveIcon from "@mui/icons-material/Save";
 import MuiSendIcon from "@mui/icons-material/Send";
+import MuiShareIcon from "@mui/icons-material/Share";
+import MuiWhatshotIcon from "@mui/icons-material/Whatshot";
 import MuiWorkIcon from "@mui/icons-material/Work";
 
 import MuiAccordion, {
@@ -29,8 +38,20 @@ import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar";
 import MuiAvatarGroup, {
   AvatarGroupProps as MuiAvatarGroupProps,
 } from "@mui/material/AvatarGroup";
+import MuiBackdrop, {
+  BackdropProps as MuiBackdropProps,
+} from "@mui/material/Backdrop";
 import MuiBadge, { BadgeProps as MuiBadgeProps } from "@mui/material/Badge";
+import MuiBottomNavigation, {
+  BottomNavigationProps as MuiBottomNavigationProps,
+} from "@mui/material/BottomNavigation";
+import MuiBottomNavigationAction, {
+  BottomNavigationActionProps as MuiBottomNavigationActionProps,
+} from "@mui/material/BottomNavigationAction";
 import MuiBox, { BoxProps as MuiBoxProps } from "@mui/material/Box";
+import MuiBreadcrumbs, {
+  BreadcrumbsProps as MuiBreadcrumbsProps,
+} from "@mui/material/Breadcrumbs";
 import MuiButton, { ButtonProps as MuiButtonProps } from "@mui/material/Button";
 import MuiCard, { CardProps as MuiCardProps } from "@mui/material/Card";
 import MuiCardActions, {
@@ -43,13 +64,31 @@ import MuiCardMedia, {
   CardMediaProps as MuiCardMediaProps,
 } from "@mui/material/CardMedia";
 import MuiChip, { ChipProps as MuiChipProps } from "@mui/material/Chip";
+import MuiCircularProgress, {
+  CircularProgressProps as MuiCircularProgressProps,
+} from "@mui/material/CircularProgress";
+import MuiDialog, { DialogProps as MuiDialogProps } from "@mui/material/Dialog";
+import MuiDialogActions, {
+  DialogActionsProps as MuiDialogActionsProps,
+} from "@mui/material/DialogActions";
+import MuiDialogContent, {
+  DialogContentProps as MuiDialogContentProps,
+} from "@mui/material/DialogContent";
+import MuiDialogTitle, {
+  DialogTitleProps as MuiDialogTitleProps,
+} from "@mui/material/DialogTitle";
 import MuiDivider, {
   DividerProps as MuiDividerProps,
 } from "@mui/material/Divider";
+import MuiDrawer, { DrawerProps as MuiDrawerProps } from "@mui/material/Drawer";
 import MuiIcon, { IconProps as MuiIconProps } from "@mui/material/Icon";
 import MuiIconButton, {
   IconButtonProps as MuiIconButtonProps,
 } from "@mui/material/IconButton";
+import MuiLinearProgress, {
+  LinearProgressProps as MuiLinearProgressProps,
+} from "@mui/material/LinearProgress";
+import MuiLink, { LinkProps as MuiLinkProps } from "@mui/material/Link";
 import MuiList, { ListProps as MuiListProps } from "@mui/material/List";
 import MuiListItem, {
   ListItemProps as MuiListItemProps,
@@ -69,25 +108,13 @@ import MuiListItemText, {
 import MuiListSubheader, {
   ListSubheaderProps as MuiListSubheaderProps,
 } from "@mui/material/ListSubheader";
-import MuiBackdrop, {
-  BackdropProps as MuiBackdropProps,
-} from "@mui/material/Backdrop";
-import MuiCircularProgress, {
-  CircularProgressProps as MuiCircularProgressProps,
-} from "@mui/material/CircularProgress";
-import MuiDialog, { DialogProps as MuiDialogProps } from "@mui/material/Dialog";
-import MuiDialogTitle, {
-  DialogTitleProps as MuiDialogTitleProps,
-} from "@mui/material/DialogTitle";
-import MuiDialogActions, {
-  DialogActionsProps as MuiDialogActionsProps,
-} from "@mui/material/DialogActions";
-import MuiDialogContent, {
-  DialogContentProps as MuiDialogContentProps,
-} from "@mui/material/DialogContent";
-import MuiLinearProgress, {
-  LinearProgressProps as MuiLinearProgressProps,
-} from "@mui/material/LinearProgress";
+import MuiMenu, { MenuProps as MuiMenuProps } from "@mui/material/Menu";
+import MuiMenuItem, {
+  MenuItemProps as MuiMenuItemProps,
+} from "@mui/material/MenuItem";
+import MuiPagination, {
+  PaginationProps as MuiPaginationProps,
+} from "@mui/material/Pagination";
 import MuiPaper, { PaperProps as MuiPaperProps } from "@mui/material/Paper";
 import MuiSkeleton, {
   SkeletonProps as MuiSkeletonProps,
@@ -95,10 +122,28 @@ import MuiSkeleton, {
 import MuiSnackbar, {
   SnackbarProps as MuiSnackbarProps,
 } from "@mui/material/Snackbar";
+import MuiSpeedDial, {
+  SpeedDialProps as MuiSpeedDialProps,
+} from "@mui/material/SpeedDial";
+import MuiSpeedDialAction, {
+  SpeedDialActionProps as MuiSpeedDialActionProps,
+} from "@mui/material/SpeedDialAction";
+import MuiSpeedDialIcon from "@mui/material/SpeedDial";
 import MuiStack, { StackProps as MuiStackProps } from "@mui/material/Stack";
+import MuiStepper, {
+  StepperProps as MuiStepperProps,
+} from "@mui/material/Stepper";
+import MuiStep, { StepProps as MuiStepProps } from "@mui/material/Step";
+import MuiStepLabel, {
+  StepLabelProps as MuiStepLabelProps,
+} from "@mui/material/StepLabel";
+import MuiStepContent, {
+  StepContentProps as MuiStepContentProps,
+} from "@mui/material/StepContent";
 import MuiSvgIcon, {
   SvgIconProps as MuiSvgIconProps,
 } from "@mui/material/SvgIcon";
+import MuiTab, { TabProps as MuiTabProps } from "@mui/material/Tab";
 import MuiTable, { TableProps as MuiTableProps } from "@mui/material/Table";
 import MuiTableBody, {
   TableBodyProps as MuiTableBodyProps,
@@ -124,6 +169,7 @@ import MuiTableRow, {
 import MuiTableSortLabel, {
   TableSortLabelProps as MuiTableSortLabelProps,
 } from "@mui/material/TableSortLabel";
+import MuiTabs, { TabsProps as MuiTabsProps } from "@mui/material/Tabs";
 import MuiToolbar, {
   ToolbarProps as MuiToolbarProps,
 } from "@mui/material/Toolbar";
@@ -131,6 +177,99 @@ import MuiTypography, {
   TypographyProps as MuiTypographyProps,
 } from "@mui/material/Typography";
 
+export const AddIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiAddIcon,
+  "AddIcon",
+);
+export const AssignmentIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiAssignmentIcon,
+  "AssignmentIcon",
+);
+export const DeleteIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiDeleteIcon,
+  "DeleteIcon",
+);
+export const ExpandMoreIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiExpandMoreIcon,
+  "ExpandMoreIcon",
+);
+export const FavoriteIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiFavoriteIcon,
+  "FavoriteIcon",
+);
+export const FileCopyIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiFileCopyIcon,
+  "FileCopyIcon",
+);
+export const FolderIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiFolderIcon,
+  "FolderIcon",
+);
+export const GrainIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiGrainIcon,
+  "GrainIcon",
+);
+export const HomeIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiHomeIcon,
+  "HomeIcon",
+);
+export const InboxIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiInboxIcon,
+  "InboxIcon",
+);
+export const LocationOnIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiLocationOnIcon,
+  "LocationOnIcon",
+);
+export const MailIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiMailIcon,
+  "MailIcon",
+);
+export const MenuIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiMenuIcon,
+  "MenuIcon",
+);
+export const NotificationsIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiNotificationsIcon,
+  "NotificationIcon",
+);
+export const PageviewIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiPageviewIcon,
+  "PageviewIcon",
+);
+export const PrintIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiPrintIcon,
+  "PrintIcon",
+);
+export const RestoreIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiRestoreIcon,
+  "RestoreIcon",
+);
+export const SaveIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiSaveIcon,
+  "SaveIcon",
+);
+export const SendIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiSendIcon,
+  "SendIcon",
+);
+export const ShareIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiShareIcon,
+  "ShareIcon",
+);
+export const SpeedDialIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiSpeedDialIcon,
+  "SpeedDialIcon",
+);
+export const WhatshotIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiWhatshotIcon,
+  "WhatshotIcon",
+);
+export const WorkIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiWorkIcon,
+  "WorkIcon",
+);
+
 export const Accordion = MuiWrapper<MuiAccordionProps>(
   MuiAccordion,
   "Accordion",
@@ -143,18 +282,29 @@ export const AccordionSummary = MuiWrapper<MuiAccordionSummaryProps>(
   MuiAccordionSummary,
   "AccordionSummary",
 );
-export const AddIcon = MuiWrapper(MuiAddIcon, "AddIcon");
 export const Alert = MuiWrapper<MuiAlertProps>(MuiAlert, "Alert");
 export const AppBar = MuiWrapper<MuiAppBarProps>(MuiAppBar, "AppBar");
-export const AssignmentIcon = MuiWrapper(MuiAssignmentIcon, "AssignmentIcon");
 export const Avatar = MuiWrapper<MuiAvatarProps>(MuiAvatar, "Avatar");
 export const AvatarGroup = MuiWrapper<MuiAvatarGroupProps>(
   MuiAvatarGroup,
   "AvatarGroup",
 );
-export const Badge = MuiWrapper<MuiBadgeProps>(MuiBadge, "Badge");
 export const Backdrop = MuiWrapper<MuiBackdropProps>(MuiBackdrop, "Backdrop");
+export const Badge = MuiWrapper<MuiBadgeProps>(MuiBadge, "Badge");
+export const BottomNavigation = MuiWrapper<MuiBottomNavigationProps>(
+  MuiBottomNavigation,
+  "BottomNavigation",
+);
+export const BottomNavigationAction =
+  MuiWrapper<MuiBottomNavigationActionProps>(
+    MuiBottomNavigationAction,
+    "BottomNavigationAction",
+  );
 export const Box = MuiWrapper<MuiBoxProps>(MuiBox, "Box");
+export const Breadcrumbs = MuiWrapper<MuiBreadcrumbsProps>(
+  MuiBreadcrumbs,
+  "Breadcrumbs",
+);
 export const Button = MuiWrapper<MuiButtonProps>(MuiButton, "Button");
 export const Card = MuiWrapper<MuiCardProps>(MuiCard, "Card");
 export const CardActions = MuiWrapper<MuiCardActionsProps>(
@@ -170,8 +320,6 @@ export const CardMedia = MuiWrapper<MuiCardMediaProps>(
   "CardMedia",
 );
 export const Chip = MuiWrapper<MuiChipProps>(MuiChip, "Chip");
-export const DeleteIcon = MuiWrapper(MuiDeleteIcon, "DeleteIcon");
-export const Divider = MuiWrapper<MuiDividerProps>(MuiDivider, "Divider");
 export const CircularProgress = MuiWrapper<
   MuiCircularProgressProps,
   HTMLSpanElement
@@ -189,14 +337,18 @@ export const DialogTitle = MuiWrapper<MuiDialogTitleProps>(
   MuiDialogTitle,
   "DialogTitle",
 );
-export const ExpandMoreIcon = MuiWrapper(MuiExpandMoreIcon, "ExpandMoreIcon");
-export const FolderIcon = MuiWrapper(MuiFolderIcon, "FolderIcon");
+export const Divider = MuiWrapper<MuiDividerProps>(MuiDivider, "Divider");
+export const Drawer = MuiWrapper<MuiDrawerProps>(MuiDrawer, "Drawer");
 export const Icon = MuiWrapper<MuiIconProps>(MuiIcon, "Icon");
 export const IconButton = MuiWrapper<MuiIconButtonProps>(
   MuiIconButton,
   "IconButton",
 );
-export const InboxIcon = MuiWrapper(MuiInboxIcon, "InboxIcon");
+export const LinearProgress = MuiWrapper<MuiLinearProgressProps>(
+  MuiLinearProgress,
+  "LinearProgress",
+);
+export const Link = MuiWrapper<MuiLinkProps>(MuiLink, "Link");
 export const List = MuiWrapper<MuiListProps>(MuiList, "List");
 export const ListItem = MuiWrapper<MuiListItemProps>(MuiListItem, "ListItem");
 export const ListItemAvatar = MuiWrapper<MuiListItemAvatarProps>(
@@ -219,25 +371,36 @@ export const ListSubheader = MuiWrapper<MuiListSubheaderProps>(
   MuiListSubheader,
   "ListSubheader",
 );
-export const MailIcon = MuiWrapper(MuiMailIcon, "MailIcon");
-
-export const LinearProgress = MuiWrapper<MuiLinearProgressProps>(
-  MuiLinearProgress,
-  "LinearProgress",
-);
-export const MenuIcon = MuiWrapper(MuiMenuIcon, "MenuIcon");
-export const NotificationsIcon = MuiWrapper(
-  MuiNotificationsIcon,
-  "NotificationIcon",
+export const Menu = MuiWrapper<MuiMenuProps>(MuiMenu, "Menu");
+export const MenuItem = MuiWrapper<MuiMenuItemProps>(MuiMenuItem, "MenuItem");
+export const Pagination = MuiWrapper<MuiPaginationProps>(
+  MuiPagination,
+  "Pagination",
 );
-export const PageviewIcon = MuiWrapper(MuiPageviewIcon, "PageviewIcon");
 export const Paper = MuiWrapper<MuiPaperProps>(MuiPaper, "Paper");
-export const SaveIcon = MuiWrapper(MuiSaveIcon, "SaveIcon");
-export const SendIcon = MuiWrapper(MuiSendIcon, "SendIcon");
 export const Skeleton = MuiWrapper<MuiSkeletonProps>(MuiSkeleton, "Skeleton");
 export const Snackbar = MuiWrapper<MuiSnackbarProps>(MuiSnackbar, "Snackbar");
+export const SpeedDial = MuiWrapper<MuiSpeedDialProps>(
+  MuiSpeedDial,
+  "SpeedDial",
+);
+export const SpeedDialAction = MuiWrapper<MuiSpeedDialActionProps>(
+  MuiSpeedDialAction,
+  "SpeedDialAction",
+);
 export const Stack = MuiWrapper<MuiStackProps>(MuiStack, "Stack");
+export const Stepper = MuiWrapper<MuiStepperProps>(MuiStepper, "Stepper");
+export const Step = MuiWrapper<MuiStepProps>(MuiStep, "Step");
+export const StepLabel = MuiWrapper<MuiStepLabelProps>(
+  MuiStepLabel,
+  "StepLabel",
+);
+export const StepContent = MuiWrapper<MuiStepContentProps>(
+  MuiStepContent,
+  "StepContent",
+);
 export const SvgIcon = MuiWrapper<MuiSvgIconProps>(MuiSvgIcon, "SvgIcon");
+export const Tab = MuiWrapper<MuiTabProps>(MuiTab, "Tab");
 export const Table = MuiWrapper<MuiTableProps>(MuiTable, "Table");
 export const TableBody = MuiWrapper<MuiTableBodyProps>(
   MuiTableBody,
@@ -268,9 +431,9 @@ export const TableSortLabel = MuiWrapper<MuiTableSortLabelProps>(
   MuiTableSortLabel,
   "TableSortLabel",
 );
+export const Tabs = MuiWrapper<MuiTabsProps>(MuiTabs, "Tabs");
 export const Toolbar = MuiWrapper<MuiToolbarProps>(MuiToolbar, "Toolbar");
 export const Typography = MuiWrapper<MuiTypographyProps>(
   MuiTypography,
   "Typography",
 );
-export const WorkIcon = MuiWrapper(MuiWorkIcon, "WorkIcon");
diff --git a/src/components/MUI/Navigation/BottomNavigation.stories.tsx b/src/components/MUI/Navigation/BottomNavigation.stories.tsx
new file mode 100644
index 00000000..8656852f
--- /dev/null
+++ b/src/components/MUI/Navigation/BottomNavigation.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import * as React from "react";
+import {
+  BottomNavigation,
+  BottomNavigationAction,
+  FavoriteIcon,
+  LocationOnIcon,
+  RestoreIcon,
+} from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof BottomNavigation> = {
+  title: "MUI/Navigation/BottomNavigation",
+  component: BottomNavigation,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    showLabels: { control: "boolean" },
+  },
+  args: { showLabels: true },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => {
+    const [value, setValue] = React.useState(0);
+    return (
+      <BottomNavigation
+        {...args}
+        value={value}
+        onChange={(_, v) => setValue(v)}
+      >
+        <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
+        <BottomNavigationAction label="Favourites" icon={<FavoriteIcon />} />
+        <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
+      </BottomNavigation>
+    );
+  },
+};
diff --git a/src/components/MUI/Navigation/Breadcrumbs.stories.tsx b/src/components/MUI/Navigation/Breadcrumbs.stories.tsx
new file mode 100644
index 00000000..860f8a9a
--- /dev/null
+++ b/src/components/MUI/Navigation/Breadcrumbs.stories.tsx
@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Breadcrumbs,
+  GrainIcon,
+  HomeIcon,
+  Link,
+  Typography,
+  WhatshotIcon,
+  WorkIcon,
+} from "../MuiWrapped";
+import {
+  muiDocsParameters,
+  muiDocsText,
+} from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof Breadcrumbs> = {
+  title: "MUI/Navigation/Breadcrumbs",
+  component: Breadcrumbs,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    ...muiDocsParameters,
+    docs: {
+      description: {
+        component: `
+${muiDocsText}
+Not to be confused with custom [Breadcrumbs component](?path=/docs/components-navigation-breadcrumbs--docs)  (opens in this tab).  
+`,
+      },
+    },
+  },
+  argTypes: {
+    separator: { control: "text" },
+    maxItems: { control: { type: "number", min: 2, max: 10, step: 1 } },
+    itemsBeforeCollapse: {
+      control: { type: "number", min: 0, max: 5, step: 1 },
+    },
+    itemsAfterCollapse: {
+      control: { type: "number", min: 0, max: 5, step: 1 },
+    },
+  },
+  args: {
+    separator: "/",
+    maxItems: 8,
+    itemsBeforeCollapse: 1,
+    itemsAfterCollapse: 1,
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <Breadcrumbs {...args}>
+      <Link>Home</Link>
+      <Link>Instrument Session</Link>
+      <Link>Data Collection</Link>
+      <Typography color="text.primary">Scan</Typography>
+    </Breadcrumbs>
+  ),
+};
+
+export const CustomSeparator: Story = {
+  args: { separator: "›" },
+  render: (args) => (
+    <Breadcrumbs {...args}>
+      <Link>Home</Link>
+      <Link>Instrument Session</Link>
+      <Link>Data Collection</Link>
+      <Typography color="text.primary">Scan</Typography>
+    </Breadcrumbs>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: (args) => (
+    <Breadcrumbs {...args} separator="›">
+      <Link>
+        <HomeIcon fontSize="inherit" />
+        Home
+      </Link>
+      <Link>
+        <WhatshotIcon fontSize="inherit" />
+        Instrument Session
+      </Link>
+      <Typography
+        color="text.primary"
+        sx={{ display: "inline-flex", alignItems: "center", gap: 0.5 }}
+      >
+        <GrainIcon fontSize="inherit" />
+        Data Collection
+      </Typography>
+      <Typography
+        color="text.primary"
+        sx={{ display: "inline-flex", alignItems: "center", gap: 0.5 }}
+      >
+        <WorkIcon fontSize="inherit" />
+        Data Collection
+      </Typography>
+    </Breadcrumbs>
+  ),
+};
+
+export const Collapsed: Story = {
+  args: {
+    maxItems: 3,
+    itemsBeforeCollapse: 1,
+    itemsAfterCollapse: 1,
+    separator: "/",
+  },
+  render: (args) => (
+    <Breadcrumbs {...args}>
+      <Link>Home</Link>
+      <Link>Instrument Session</Link>
+      <Link>Data Collection</Link>
+      <Link>Scan</Link>
+      <Typography color="text.primary">Item</Typography>
+    </Breadcrumbs>
+  ),
+};
diff --git a/src/components/MUI/Navigation/Drawer.stories.tsx b/src/components/MUI/Navigation/Drawer.stories.tsx
new file mode 100644
index 00000000..9921588a
--- /dev/null
+++ b/src/components/MUI/Navigation/Drawer.stories.tsx
@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import * as React from "react";
+import {
+  Box,
+  Button,
+  Drawer,
+  List,
+  ListItem,
+  ListItemText,
+} from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof Drawer> = {
+  title: "MUI/Navigation/Drawer",
+  component: Drawer,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    anchor: { control: "select", options: ["left", "right", "top", "bottom"] },
+  },
+  args: { anchor: "left" },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <Box style={{ display: "flex", gap: 12 }}>
+        <Button onClick={() => setOpen(true)}>Open drawer</Button>
+        <Drawer {...args} open={open} onClose={() => setOpen(false)}>
+          <Box
+            role="presentation"
+            style={{
+              width:
+                args.anchor === "top" || args.anchor === "bottom"
+                  ? "100%"
+                  : 250,
+            }}
+          >
+            <List>
+              <ListItem>
+                <ListItemText primary="Item 1" />
+              </ListItem>
+              <ListItem>
+                <ListItemText primary="Item 2" />
+              </ListItem>
+              <ListItem>
+                <ListItemText primary="Item 3" />
+              </ListItem>
+            </List>
+          </Box>
+        </Drawer>
+      </Box>
+    );
+  },
+};
diff --git a/src/components/MUI/Navigation/Link.stories.tsx b/src/components/MUI/Navigation/Link.stories.tsx
new file mode 100644
index 00000000..d4f5b658
--- /dev/null
+++ b/src/components/MUI/Navigation/Link.stories.tsx
@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Link } from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof Link> = {
+  title: "MUI/Navigation/Link",
+  component: Link,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    underline: { control: "select", options: ["none", "hover", "always"] },
+    color: {
+      control: "select",
+      options: [
+        "inherit",
+        "primary",
+        "secondary",
+        "success",
+        "error",
+        "info",
+        "warning",
+      ],
+    },
+    href: { control: "text" },
+    target: { control: "select", options: ["", "_self", "_blank"] },
+    rel: { control: "text" },
+    children: { name: "text", control: "text" },
+  },
+  args: {
+    underline: "hover",
+    color: "primary",
+    href: "https://mui.com/",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    children: "MUI docs",
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = { render: (args) => <Link {...args} /> };
diff --git a/src/components/MUI/Navigation/Menu.stories.tsx b/src/components/MUI/Navigation/Menu.stories.tsx
new file mode 100644
index 00000000..ec684b3b
--- /dev/null
+++ b/src/components/MUI/Navigation/Menu.stories.tsx
@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import {
+  Box,
+  Button,
+  ListItemIcon,
+  Menu,
+  MenuItem,
+  SaveIcon,
+  SendIcon,
+} from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const originMap = {
+  tl: { vertical: "top", horizontal: "left" },
+  tc: { vertical: "top", horizontal: "center" },
+  tr: { vertical: "top", horizontal: "right" },
+  bl: { vertical: "bottom", horizontal: "left" },
+  bc: { vertical: "bottom", horizontal: "center" },
+  br: { vertical: "bottom", horizontal: "right" },
+} as const;
+
+const meta: Meta<typeof Menu> = {
+  title: "MUI/Navigation/Menu",
+  component: Menu,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    anchorOrigin: {
+      control: "select",
+      options: Object.keys(originMap),
+      mapping: originMap,
+    },
+    transformOrigin: {
+      control: "select",
+      options: Object.keys(originMap),
+      mapping: originMap,
+    },
+    keepMounted: { control: "boolean" },
+    variant: { control: "select", options: ["selectedMenu", "menu"] },
+  },
+  args: {
+    anchorOrigin: { vertical: "bottom", horizontal: "left" },
+    transformOrigin: { vertical: "top", horizontal: "left" },
+    keepMounted: false,
+    variant: "menu",
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => {
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const open = Boolean(anchorEl);
+    return (
+      <Box style={{ display: "flex", gap: 12 }}>
+        <Button onClick={(e) => setAnchorEl(e.currentTarget)}>Open menu</Button>
+        <Menu
+          {...args}
+          anchorEl={anchorEl}
+          open={open}
+          onClose={() => setAnchorEl(null)}
+        >
+          <MenuItem onClick={() => setAnchorEl(null)}>Profile</MenuItem>
+          <MenuItem onClick={() => setAnchorEl(null)}>My account</MenuItem>
+          <MenuItem onClick={() => setAnchorEl(null)}>Logout</MenuItem>
+        </Menu>
+      </Box>
+    );
+  },
+};
+
+export const WithIcons: Story = {
+  render: (args) => {
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const open = Boolean(anchorEl);
+    return (
+      <Box style={{ display: "flex", gap: 12 }}>
+        <Button onClick={(e) => setAnchorEl(e.currentTarget)}>Open menu</Button>
+        <Menu
+          {...args}
+          anchorEl={anchorEl}
+          open={open}
+          onClose={() => setAnchorEl(null)}
+        >
+          <MenuItem onClick={() => setAnchorEl(null)}>
+            <ListItemIcon>
+              <SaveIcon />
+            </ListItemIcon>
+            Save
+          </MenuItem>
+          <MenuItem onClick={() => setAnchorEl(null)}>
+            <ListItemIcon>
+              <SendIcon />
+            </ListItemIcon>
+            Send
+          </MenuItem>
+        </Menu>
+      </Box>
+    );
+  },
+};
diff --git a/src/components/MUI/Navigation/Pagination.stories.tsx b/src/components/MUI/Navigation/Pagination.stories.tsx
new file mode 100644
index 00000000..f599cdac
--- /dev/null
+++ b/src/components/MUI/Navigation/Pagination.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Pagination } from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof Pagination> = {
+  title: "MUI/Navigation/Pagination",
+  component: Pagination,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    count: { control: { type: "number", min: 1, max: 20, step: 1 } },
+    color: { control: "select", options: ["primary", "secondary", "standard"] },
+    variant: { control: "select", options: ["text", "outlined"] },
+    shape: { control: "select", options: ["rounded", "circular"] },
+    size: { control: "select", options: ["small", "medium", "large"] },
+    showFirstButton: { control: "boolean" },
+    showLastButton: { control: "boolean" },
+    disabled: { control: "boolean" },
+  },
+  args: {
+    count: 10,
+    color: "primary",
+    variant: "outlined",
+    shape: "rounded",
+    size: "medium",
+    showFirstButton: false,
+    showLastButton: false,
+    disabled: false,
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => {
+    const [page, setPage] = React.useState(1);
+    return <Pagination {...args} page={page} onChange={(_, p) => setPage(p)} />;
+  },
+};
diff --git a/src/components/MUI/Navigation/SpeedDial.stories.tsx b/src/components/MUI/Navigation/SpeedDial.stories.tsx
new file mode 100644
index 00000000..ebd23ec8
--- /dev/null
+++ b/src/components/MUI/Navigation/SpeedDial.stories.tsx
@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Box,
+  FileCopyIcon,
+  PrintIcon,
+  SaveIcon,
+  ShareIcon,
+  SpeedDialAction,
+  SpeedDial,
+  WorkIcon,
+} from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+import React from "react";
+
+const meta: Meta<typeof SpeedDial> = {
+  title: "MUI/Navigation/SpeedDial",
+  component: SpeedDial,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    ariaLabel: { control: "text" },
+    direction: { control: "select", options: ["up", "down", "left", "right"] },
+  },
+  args: { ariaLabel: "SpeedDial", direction: "up" },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => {
+    const [open, setOpen] = React.useState(true);
+
+    return (
+      <Box
+        sx={{
+          position: "relative",
+          height: 320,
+          overflow: "visible",
+        }}
+      >
+        <SpeedDial
+          {...args}
+          ariaLabel="SpeedDial actions"
+          open={open}
+          onOpen={() => setOpen(true)}
+          onClose={() => setOpen(false)}
+          icon={<WorkIcon aria-label="Open actions" />}
+          sx={{
+            position: "absolute",
+            bottom: 16,
+            right: 16,
+          }}
+        >
+          <SpeedDialAction
+            icon={<FileCopyIcon />}
+            slotProps={{ tooltip: { title: "Copy" } }}
+            onClick={() => setOpen(false)}
+          />
+          <SpeedDialAction
+            icon={<SaveIcon />}
+            slotProps={{ tooltip: { title: "Save" } }}
+            onClick={() => setOpen(false)}
+          />
+          <SpeedDialAction
+            icon={<PrintIcon />}
+            slotProps={{ tooltip: { title: "Print" } }}
+            onClick={() => setOpen(false)}
+          />
+          <SpeedDialAction
+            icon={<ShareIcon />}
+            slotProps={{ tooltip: { title: "Share" } }}
+            onClick={() => setOpen(false)}
+          />
+        </SpeedDial>
+      </Box>
+    );
+  },
+};
diff --git a/src/components/MUI/Navigation/Stepper.stories.tsx b/src/components/MUI/Navigation/Stepper.stories.tsx
new file mode 100644
index 00000000..4be0679b
--- /dev/null
+++ b/src/components/MUI/Navigation/Stepper.stories.tsx
@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import {
+  Box,
+  Button,
+  Step,
+  StepContent,
+  StepLabel,
+  Stepper,
+} from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const steps = ["Calibrate instrument", "Acquire data", "Analyse results"];
+
+const meta: Meta<typeof Stepper> = {
+  title: "MUI/Navigation/Stepper",
+  component: Stepper,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    orientation: { control: "select", options: ["horizontal", "vertical"] },
+    alternativeLabel: { control: "boolean" },
+    activeStep: {
+      control: { type: "number", min: 0, max: steps.length - 1, step: 1 },
+    },
+  },
+  args: {
+    orientation: "horizontal",
+    alternativeLabel: false,
+    activeStep: 0,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => {
+    const [active, setActive] = React.useState(0);
+
+    return (
+      <Box>
+        <Stepper {...args} activeStep={active}>
+          {steps.map((label) => (
+            <Step key={label}>
+              <StepLabel>{label}</StepLabel>
+            </Step>
+          ))}
+        </Stepper>
+
+        <Box style={{ display: "flex", gap: 8, marginTop: 16 }}>
+          <Button onClick={() => setActive((a) => Math.max(a - 1, 0))}>
+            Previous step
+          </Button>
+          <Button
+            variant="contained"
+            onClick={() => setActive((a) => Math.min(a + 1, steps.length - 1))}
+          >
+            Next step
+          </Button>
+        </Box>
+      </Box>
+    );
+  },
+};
+
+export const VerticalWorkflow: Story = {
+  args: { orientation: "vertical" },
+  render: (args) => {
+    const [active, setActive] = React.useState(0);
+
+    return (
+      <Box>
+        <Stepper {...args} activeStep={active}>
+          {steps.map((label) => (
+            <Step key={label}>
+              <StepLabel>{label}</StepLabel>
+              <StepContent>
+                <Box style={{ display: "flex", gap: 8 }}>
+                  <Button onClick={() => setActive((a) => Math.max(a - 1, 0))}>
+                    Previous
+                  </Button>
+                  <Button
+                    variant="contained"
+                    onClick={() =>
+                      setActive((a) => Math.min(a + 1, steps.length - 1))
+                    }
+                  >
+                    Continue
+                  </Button>
+                </Box>
+              </StepContent>
+            </Step>
+          ))}
+        </Stepper>
+      </Box>
+    );
+  },
+};
+
+export const AlternativeLabel: Story = {
+  args: { alternativeLabel: true },
+  render: (args) => (
+    <Stepper {...args}>
+      {steps.map((label) => (
+        <Step key={label}>
+          <StepLabel>{label}</StepLabel>
+        </Step>
+      ))}
+    </Stepper>
+  ),
+};
diff --git a/src/components/MUI/Navigation/Tabs.stories.tsx b/src/components/MUI/Navigation/Tabs.stories.tsx
new file mode 100644
index 00000000..b508f1c8
--- /dev/null
+++ b/src/components/MUI/Navigation/Tabs.stories.tsx
@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Box, Tab, Tabs } from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof Tabs> = {
+  title: "MUI/Navigation/Tabs",
+  component: Tabs,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    orientation: { control: "select", options: ["horizontal", "vertical"] },
+    variant: {
+      control: "select",
+      options: ["standard", "scrollable", "fullWidth"],
+    },
+    textColor: {
+      control: "select",
+      options: ["inherit", "primary", "secondary"],
+    },
+    indicatorColor: { control: "select", options: ["primary", "secondary"] },
+  },
+  args: {
+    orientation: "horizontal",
+    variant: "standard",
+    textColor: "primary",
+    indicatorColor: "primary",
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => {
+    const [value, setValue] = React.useState(0);
+    return (
+      <Box>
+        <Tabs {...args} value={value} onChange={(_, v) => setValue(v)}>
+          <Tab label="Tab One" />
+          <Tab label="Tab Two" />
+          <Tab label="Tab Three" />
+        </Tabs>
+      </Box>
+    );
+  },
+};
+
+export const Vertical: Story = {
+  args: { orientation: "vertical" },
+  render: (args) => {
+    const [value, setValue] = React.useState(0);
+    return (
+      <Box>
+        <Tabs {...args} value={value} onChange={(_, v) => setValue(v)}>
+          <Tab label="Item A" />
+          <Tab label="Item B" />
+          <Tab label="Item C" />
+        </Tabs>
+      </Box>
+    );
+  },
+};
diff --git a/src/components/MUI/Surfaces/AppBar.stories.tsx b/src/components/MUI/Surfaces/AppBar.stories.tsx
index 798a5a88..8120b82d 100644
--- a/src/components/MUI/Surfaces/AppBar.stories.tsx
+++ b/src/components/MUI/Surfaces/AppBar.stories.tsx
@@ -23,7 +23,7 @@ const meta: Meta<typeof AppBar> = {
       description: {
         component: `
 ${muiDocsText}
-Not to be confused with custom [AppTitleBar component](?path=/docs/navigation-apptitlebar--docs)  (opens in this tab).  
+Not to be confused with custom [AppTitleBar component](?path=/docs/components-controls-apptitlebar--docs)  (opens in this tab).  
 `,
       },
     },
diff --git a/src/components/navigation/Breadcrumbs.stories.tsx b/src/components/navigation/Breadcrumbs.stories.tsx
index 3c78bb0f..aac11e01 100644
--- a/src/components/navigation/Breadcrumbs.stories.tsx
+++ b/src/components/navigation/Breadcrumbs.stories.tsx
@@ -6,8 +6,17 @@ const meta: Meta<typeof Breadcrumbs> = {
   title: "Components/Navigation/Breadcrumbs",
   component: Breadcrumbs,
   tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `Not to be confused with MUI's Breadcrumbs component.  
+        See also:  
+        [Breadcrumbs Story](?path=/docs/mui-navigation-breadcrumbs--docs) (opens in this tab)  
+        [MUI Breadcrumbs documentation](https://v7.mui.com/material-ui/react-breadcrumbs/)`,
+      },
+    },
+  },
 };
-
 export default meta;
 type Story = StoryObj<typeof meta>;