From bb1747fbbf37aa73c5dd2449b37d78b16ca88530 Mon Sep 17 00:00:00 2001
From: Samuel Jansem <samuel.jansem@gmail.com>
Date: Wed, 21 Jan 2026 17:39:36 -0300
Subject: [PATCH 1/3] BA-3031 Add slot props and customization options to
 navigation components

---
 .../navigations/web/NavCentered/index.tsx     | 17 ++++++++++---
 .../navigations/web/NavCentered/types.ts      |  6 ++++-
 .../navigations/web/NavHorizontal/index.tsx   | 19 ++++++++++++---
 .../navigations/web/NavHorizontal/types.ts    |  6 ++++-
 .../modules/navigations/web/NavMini/index.tsx | 17 +++++++++++--
 .../modules/navigations/web/NavMini/types.ts  |  7 +++++-
 .../navigations/web/NavVertical/index.tsx     | 17 ++++++++++---
 .../navigations/web/NavVertical/types.ts      |  7 +++++-
 .../web/NavigationLayout/index.tsx            | 24 +++++++++++++++++--
 .../navigations/web/NavigationLayout/types.ts |  7 ++++--
 .../web/__shared__/VerticalDrawer/index.tsx   | 12 +++++++++-
 .../web/__shared__/VerticalDrawer/types.ts    |  3 +++
 12 files changed, 122 insertions(+), 20 deletions(-)

diff --git a/packages/components/modules/navigations/web/NavCentered/index.tsx b/packages/components/modules/navigations/web/NavCentered/index.tsx
index 9cc8382c1..e6fc32f3d 100644
--- a/packages/components/modules/navigations/web/NavCentered/index.tsx
+++ b/packages/components/modules/navigations/web/NavCentered/index.tsx
@@ -9,13 +9,24 @@ import NavSectionHorizontal from '../__shared__/NavSectionHorizontal'
 import VerticalDrawer from '../__shared__/VerticalDrawer'
 import { NavCenteredProps } from './types'
 
-const NavCentered: FC<NavCenteredProps> = ({ navData, openNav, onCloseNav }) => {
+const NavCentered: FC<NavCenteredProps> = ({
+  navData,
+  openNav,
+  onCloseNav,
+  slotProps,
+  VerticalDrawerProps,
+}) => {
   const lgDown = useResponsive('down', 'lg')
 
   if (lgDown) {
     return (
       <>
-        <VerticalDrawer navData={navData} openNav={openNav} onCloseNav={onCloseNav} />
+        <VerticalDrawer
+          navData={navData}
+          openNav={openNav}
+          onCloseNav={onCloseNav}
+          DrawerProps={VerticalDrawerProps}
+        />
         <div />
       </>
     )
@@ -29,7 +40,7 @@ const NavCentered: FC<NavCenteredProps> = ({ navData, openNav, onCloseNav }) =>
         },
       }}
     >
-      <NavSectionHorizontal navData={navData} hasTabLayout />
+      <NavSectionHorizontal navData={navData} hasTabLayout slotProps={slotProps} />
     </Scrollbar>
   )
 }
diff --git a/packages/components/modules/navigations/web/NavCentered/types.ts b/packages/components/modules/navigations/web/NavCentered/types.ts
index 70d42d893..b8c2f6024 100644
--- a/packages/components/modules/navigations/web/NavCentered/types.ts
+++ b/packages/components/modules/navigations/web/NavCentered/types.ts
@@ -1,7 +1,11 @@
-import { NavigationData } from '../types'
+import { DrawerProps } from '@mui/material'
+
+import { NavigationData, SlotProps } from '../types'
 
 export interface NavCenteredProps {
   navData: NavigationData
   openNav: boolean
   onCloseNav: VoidFunction
+  slotProps?: SlotProps
+  VerticalDrawerProps?: Partial<DrawerProps>
 }
diff --git a/packages/components/modules/navigations/web/NavHorizontal/index.tsx b/packages/components/modules/navigations/web/NavHorizontal/index.tsx
index bcf635064..913775eee 100644
--- a/packages/components/modules/navigations/web/NavHorizontal/index.tsx
+++ b/packages/components/modules/navigations/web/NavHorizontal/index.tsx
@@ -16,12 +16,25 @@ import { HEADER_HEIGHT } from '../constants'
 import HeaderShadow from './HeaderShadow'
 import { NavHorizontalProps } from './types'
 
-const NavHorizontal: FC<NavHorizontalProps> = ({ navData, openNav, onCloseNav }) => {
+const NavHorizontal: FC<NavHorizontalProps> = ({
+  navData,
+  openNav,
+  onCloseNav,
+  slotProps,
+  VerticalDrawerProps,
+}) => {
   const theme = useTheme()
   const lgDown = useResponsive('down', 'lg')
 
   if (lgDown) {
-    return <VerticalDrawer navData={navData} openNav={openNav} onCloseNav={onCloseNav} />
+    return (
+      <VerticalDrawer
+        navData={navData}
+        openNav={openNav}
+        onCloseNav={onCloseNav}
+        DrawerProps={VerticalDrawerProps}
+      />
+    )
   }
 
   return (
@@ -47,7 +60,7 @@ const NavHorizontal: FC<NavHorizontalProps> = ({ navData, openNav, onCloseNav })
             },
           }}
         >
-          <NavSectionHorizontal navData={navData} />
+          <NavSectionHorizontal navData={navData} slotProps={slotProps} />
         </Scrollbar>
       </Toolbar>
       <HeaderShadow />
diff --git a/packages/components/modules/navigations/web/NavHorizontal/types.ts b/packages/components/modules/navigations/web/NavHorizontal/types.ts
index 61fb1b253..5cf613d11 100644
--- a/packages/components/modules/navigations/web/NavHorizontal/types.ts
+++ b/packages/components/modules/navigations/web/NavHorizontal/types.ts
@@ -1,7 +1,11 @@
-import { NavigationData } from '../types'
+import { DrawerProps } from '@mui/material'
+
+import { NavigationData, SlotProps } from '../types'
 
 export interface NavHorizontalProps {
   navData: NavigationData
   openNav: boolean
   onCloseNav: VoidFunction
+  slotProps?: SlotProps
+  VerticalDrawerProps?: Partial<DrawerProps>
 }
diff --git a/packages/components/modules/navigations/web/NavMini/index.tsx b/packages/components/modules/navigations/web/NavMini/index.tsx
index 1bddf85f7..af74bcbd5 100644
--- a/packages/components/modules/navigations/web/NavMini/index.tsx
+++ b/packages/components/modules/navigations/web/NavMini/index.tsx
@@ -22,11 +22,22 @@ const NavMini: FC<NavMiniProps> = ({
   openNav,
   onCloseNav,
   hideToggleButton = false,
+  slotProps,
+  VerticalDrawerProps,
+  NavToggleButtonProps,
 }) => {
   const lgDown = useResponsive('down', 'lg')
 
   if (lgDown) {
-    return <VerticalDrawer navData={navData} openNav={openNav} onCloseNav={onCloseNav} />
+    return (
+      <VerticalDrawer
+        navData={navData}
+        openNav={openNav}
+        onCloseNav={onCloseNav}
+        LogoIcon={LogoIcon}
+        DrawerProps={VerticalDrawerProps}
+      />
+    )
   }
 
   return (
@@ -40,9 +51,11 @@ const NavMini: FC<NavMiniProps> = ({
     >
       {!hideToggleButton && (
         <NavToggleButton
+          {...NavToggleButtonProps}
           sx={{
             top: 22,
             left: NAV_WIDTH.MINI - 12,
+            ...NavToggleButtonProps?.sx,
           }}
         />
       )}
@@ -61,7 +74,7 @@ const NavMini: FC<NavMiniProps> = ({
             <LogoIcon />
           </Logo>
         )}
-        <NavSectionMini navData={navData} />
+        <NavSectionMini navData={navData} slotProps={slotProps} />
       </Stack>
     </Box>
   )
diff --git a/packages/components/modules/navigations/web/NavMini/types.ts b/packages/components/modules/navigations/web/NavMini/types.ts
index e53152b13..6dd2a2978 100644
--- a/packages/components/modules/navigations/web/NavMini/types.ts
+++ b/packages/components/modules/navigations/web/NavMini/types.ts
@@ -1,6 +1,8 @@
 import { PartialLogoProps } from '@baseapp-frontend/design-system/components/web/logos'
 
-import { NavigationData } from '../types'
+import { DrawerProps, IconButtonProps } from '@mui/material'
+
+import { NavigationData, SlotProps } from '../types'
 
 export interface NavMiniProps {
   navData: NavigationData
@@ -9,4 +11,7 @@ export interface NavMiniProps {
   LogoIcon?: React.FC
   LogoProps?: PartialLogoProps
   hideToggleButton?: boolean
+  slotProps?: SlotProps
+  VerticalDrawerProps?: Partial<DrawerProps>
+  NavToggleButtonProps?: Partial<IconButtonProps>
 }
diff --git a/packages/components/modules/navigations/web/NavVertical/index.tsx b/packages/components/modules/navigations/web/NavVertical/index.tsx
index f76f02025..f10190698 100644
--- a/packages/components/modules/navigations/web/NavVertical/index.tsx
+++ b/packages/components/modules/navigations/web/NavVertical/index.tsx
@@ -22,11 +22,22 @@ const NavVertical: FC<NavVerticalProps> = ({
   openNav,
   onCloseNav,
   hideToggleButton = false,
+  slotProps,
+  VerticalDrawerProps,
+  NavToggleButtonProps,
 }) => {
   const lgDown = useResponsive('down', 'lg')
 
   if (lgDown) {
-    return <VerticalDrawer navData={navData} openNav={openNav} onCloseNav={onCloseNav} />
+    return (
+      <VerticalDrawer
+        navData={navData}
+        openNav={openNav}
+        onCloseNav={onCloseNav}
+        LogoIcon={LogoIcon}
+        DrawerProps={VerticalDrawerProps}
+      />
+    )
   }
 
   return (
@@ -37,7 +48,7 @@ const NavVertical: FC<NavVerticalProps> = ({
         display: { xs: 'none', lg: 'flex' },
       }}
     >
-      {!hideToggleButton && <NavToggleButton />}
+      {!hideToggleButton && <NavToggleButton {...NavToggleButtonProps} />}
       <Stack
         sx={{
           height: 1,
@@ -61,7 +72,7 @@ const NavVertical: FC<NavVerticalProps> = ({
               <LogoIcon />
             </Logo>
           )}
-          <NavSectionVertical navData={navData} />
+          <NavSectionVertical navData={navData} slotProps={slotProps} />
           <Box sx={{ flexGrow: 1 }} />
         </Scrollbar>
       </Stack>
diff --git a/packages/components/modules/navigations/web/NavVertical/types.ts b/packages/components/modules/navigations/web/NavVertical/types.ts
index b8832c61f..0380086aa 100644
--- a/packages/components/modules/navigations/web/NavVertical/types.ts
+++ b/packages/components/modules/navigations/web/NavVertical/types.ts
@@ -1,6 +1,8 @@
 import { PartialLogoProps } from '@baseapp-frontend/design-system/components/web/logos'
 
-import { NavigationData } from '../types'
+import { DrawerProps, IconButtonProps } from '@mui/material'
+
+import { NavigationData, SlotProps } from '../types'
 
 export interface NavVerticalProps {
   navData: NavigationData
@@ -9,4 +11,7 @@ export interface NavVerticalProps {
   openNav: boolean
   onCloseNav: VoidFunction
   hideToggleButton?: boolean
+  slotProps?: SlotProps
+  VerticalDrawerProps?: Partial<DrawerProps>
+  NavToggleButtonProps?: Partial<IconButtonProps>
 }
diff --git a/packages/components/modules/navigations/web/NavigationLayout/index.tsx b/packages/components/modules/navigations/web/NavigationLayout/index.tsx
index 3f26ee23a..e2aa0939b 100644
--- a/packages/components/modules/navigations/web/NavigationLayout/index.tsx
+++ b/packages/components/modules/navigations/web/NavigationLayout/index.tsx
@@ -25,6 +25,9 @@ const NavigationLayout: FC<NavigationLayoutProps> = ({
   children,
   MainContainerProps = {},
   MainContainer = DefaultMainContainer,
+  slotProps,
+  VerticalDrawerProps,
+  NavToggleButtonProps,
 }) => {
   const { settings } = useUISettings()
   const nav = useBoolean()
@@ -44,7 +47,12 @@ const NavigationLayout: FC<NavigationLayoutProps> = ({
           AccountMenuProps={AccountMenuProps}
           ToolbarProps={ToolbarProps}
         >
-          <NavCentered navData={navData} openNav={nav.value} onCloseNav={nav.onFalse} />
+          <NavCentered
+            navData={navData}
+            openNav={nav.value}
+            onCloseNav={nav.onFalse}
+            VerticalDrawerProps={VerticalDrawerProps}
+          />
         </Header>
         <MainContainer isNavCentered {...MainContainerProps}>
           {children}
@@ -64,7 +72,13 @@ const NavigationLayout: FC<NavigationLayoutProps> = ({
           AccountMenuProps={AccountMenuProps}
           ToolbarProps={ToolbarProps}
         />
-        <NavHorizontal navData={navData} openNav={nav.value} onCloseNav={nav.onFalse} />
+        <NavHorizontal
+          navData={navData}
+          openNav={nav.value}
+          onCloseNav={nav.onFalse}
+          slotProps={slotProps}
+          VerticalDrawerProps={VerticalDrawerProps}
+        />
         <MainContainer isNavHorizontal {...MainContainerProps}>
           {children}
         </MainContainer>
@@ -97,6 +111,9 @@ const NavigationLayout: FC<NavigationLayoutProps> = ({
             onCloseNav={nav.onFalse}
             LogoIcon={LogoIcon}
             LogoProps={LogoProps}
+            slotProps={slotProps}
+            VerticalDrawerProps={VerticalDrawerProps}
+            NavToggleButtonProps={NavToggleButtonProps}
           />
           <MainContainer isNavMini {...MainContainerProps}>
             {children}
@@ -129,6 +146,9 @@ const NavigationLayout: FC<NavigationLayoutProps> = ({
           LogoProps={LogoProps}
           openNav={nav.value}
           onCloseNav={nav.onFalse}
+          slotProps={slotProps}
+          VerticalDrawerProps={VerticalDrawerProps}
+          NavToggleButtonProps={NavToggleButtonProps}
         />
         <MainContainer {...MainContainerProps}>{children}</MainContainer>
       </Box>
diff --git a/packages/components/modules/navigations/web/NavigationLayout/types.ts b/packages/components/modules/navigations/web/NavigationLayout/types.ts
index b18d05ead..27c38b11f 100644
--- a/packages/components/modules/navigations/web/NavigationLayout/types.ts
+++ b/packages/components/modules/navigations/web/NavigationLayout/types.ts
@@ -2,10 +2,10 @@ import { FC, PropsWithChildren } from 'react'
 
 import { PartialLogoProps } from '@baseapp-frontend/design-system/components/web/logos'
 
-import { ToolbarProps as MuiToolbarProps } from '@mui/material'
+import { DrawerProps, IconButtonProps, ToolbarProps as MuiToolbarProps } from '@mui/material'
 
 import { AccountMenuProps } from '../Header/AccountMenu/types'
-import { NavigationData } from '../types'
+import { NavigationData, SlotProps } from '../types'
 import { MainContainerProps } from './MainContainer/types'
 
 export interface NavigationLayoutProps extends PropsWithChildren {
@@ -17,4 +17,7 @@ export interface NavigationLayoutProps extends PropsWithChildren {
   ToolbarProps?: MuiToolbarProps
   MainContainerProps?: Partial<MainContainerProps>
   MainContainer?: FC<MainContainerProps>
+  slotProps?: SlotProps
+  VerticalDrawerProps?: Partial<DrawerProps>
+  NavToggleButtonProps?: Partial<IconButtonProps>
 }
diff --git a/packages/components/modules/navigations/web/__shared__/VerticalDrawer/index.tsx b/packages/components/modules/navigations/web/__shared__/VerticalDrawer/index.tsx
index 8e99a0da1..1af2c8f40 100644
--- a/packages/components/modules/navigations/web/__shared__/VerticalDrawer/index.tsx
+++ b/packages/components/modules/navigations/web/__shared__/VerticalDrawer/index.tsx
@@ -13,8 +13,15 @@ import { NAV_WIDTH } from '../../constants'
 import NavSectionVertical from '../NavSectionVertical'
 import { VerticalDrawerProps } from './types'
 
-const VerticalDrawer: FC<VerticalDrawerProps> = ({ navData, LogoIcon, openNav, onCloseNav }) => {
+const VerticalDrawer: FC<VerticalDrawerProps> = ({
+  navData,
+  LogoIcon,
+  openNav,
+  onCloseNav,
+  DrawerProps = {},
+}) => {
   const pathname = usePathname()
+  const { PaperProps, ...restDrawerProps } = DrawerProps
 
   useEffect(() => {
     if (openNav) {
@@ -27,11 +34,14 @@ const VerticalDrawer: FC<VerticalDrawerProps> = ({ navData, LogoIcon, openNav, o
       open={openNav}
       onClose={onCloseNav}
       PaperProps={{
+        ...PaperProps,
         sx: {
           width: NAV_WIDTH.VERTICAL,
           height: '100% !important',
+          ...PaperProps?.sx,
         },
       }}
+      {...restDrawerProps}
     >
       <Scrollbar
         sx={{
diff --git a/packages/components/modules/navigations/web/__shared__/VerticalDrawer/types.ts b/packages/components/modules/navigations/web/__shared__/VerticalDrawer/types.ts
index 80af67d95..562839544 100644
--- a/packages/components/modules/navigations/web/__shared__/VerticalDrawer/types.ts
+++ b/packages/components/modules/navigations/web/__shared__/VerticalDrawer/types.ts
@@ -1,3 +1,5 @@
+import { DrawerProps } from '@mui/material'
+
 import { NavigationData } from '../../types'
 
 export interface VerticalDrawerProps {
@@ -5,4 +7,5 @@ export interface VerticalDrawerProps {
   LogoIcon?: React.FC
   openNav: boolean
   onCloseNav: VoidFunction
+  DrawerProps?: Partial<DrawerProps>
 }

From 9181817353bf558acb096a6115682b71ca99d70e Mon Sep 17 00:00:00 2001
From: Samuel Jansem <samuel.jansem@gmail.com>
Date: Wed, 21 Jan 2026 18:05:45 -0300
Subject: [PATCH 2/3] Add slotProps to Header component in NavigationLayout

---
 .../modules/navigations/web/NavigationLayout/index.tsx           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/modules/navigations/web/NavigationLayout/index.tsx b/packages/components/modules/navigations/web/NavigationLayout/index.tsx
index e2aa0939b..4d9818f84 100644
--- a/packages/components/modules/navigations/web/NavigationLayout/index.tsx
+++ b/packages/components/modules/navigations/web/NavigationLayout/index.tsx
@@ -52,6 +52,7 @@ const NavigationLayout: FC<NavigationLayoutProps> = ({
             openNav={nav.value}
             onCloseNav={nav.onFalse}
             VerticalDrawerProps={VerticalDrawerProps}
+            slotProps={slotProps}
           />
         </Header>
         <MainContainer isNavCentered {...MainContainerProps}>

From d466da2e8c59afa37d0b36eae1c337ed5a8e3213 Mon Sep 17 00:00:00 2001
From: Samuel Jansem <samuel.jansem@gmail.com>
Date: Mon, 26 Jan 2026 11:52:42 -0300
Subject: [PATCH 3/3] Bump version to 1.5.0 and update CHANGELOG for enhanced
 navigation component customization

---
 packages/components/CHANGELOG.md | 6 ++++++
 packages/components/package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 25b2798ac..446bf2f4c 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @baseapp-frontend/components
 
+## 1.5.0
+
+### Minor Changes
+
+- Navigation components now support extended customization through new optional properties for drawer configuration, slot customization, and toggle button styling, enabling more flexible navigation component theming and behavior configuration.
+
 ## 1.4.19
 
 ### Patch Changes
diff --git a/packages/components/package.json b/packages/components/package.json
index 2991de5c0..7324879d2 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "1.4.19",
+  "version": "1.5.0",
   "sideEffects": false,
   "scripts": {
     "build": "rm -rf dist && pnpm relay && tsc --build tsconfig.build.json",