enter login & navigate all menu

src/pages/groups/ManageGroups.tsx

@@ -13,7 +13,9 @@ import {
   DialogTitle,
   Typography,
   Button,
-  Box
+  Box,
+  Breadcrumbs,
+  Link
 } from '@mui/material';
 import { useState, useEffect } from 'react';
 // import IconButton from '@mui/material/IconButton';
@@ -146,7 +148,7 @@ const ManageGroups = () => {
 
   return (
     <div>
-      <div className="container mx-auto">
+      <div className="container mx-auto pt-2">
         <ConfirmDialog
           open={dialogOpen}
           onClose={() => setDialogOpen(false)}
@@ -158,7 +160,20 @@ const ManageGroups = () => {
           onYes={handleYes}
           onNo={() => setDialogOpen(false)}
         />
-        <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Manage Groups</h1>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Groups</h1>
+        <Breadcrumbs>
+          <Link underline="none" color="inherit" href="/">
+            <span className="text-sm hover:underline">Dashboard</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Groups</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Manage Groups</span>
+          </Link>
+        </Breadcrumbs>
         <DataTable
           data={dataGroup}
           columns={columns}