Side Navigation customization

packages/itwinui-react/src/core/SideNavigation/SideNavigation.test.tsx

@@ -274,3 +274,52 @@ it('should not show submenu if isSubmenuOpen is false', () => {
   expect(wrapper.querySelector('.iui-side-navigation-submenu')).toBeFalsy();
   expect(screen.queryByText('submenu content')).toBeFalsy();
 });
+
+it('passes custom props to subcomponents', () => {
+  const { container } = renderComponent({
+    sideNavProps: {
+      className: 'custom-sidenav-class',
+      style: { width: 70 },
+    },
+    sideNavContentProps: {
+      className: 'custom-sidenav-content-class',
+      style: { width: 80 },
+    },
+    sideNavTopProps: {
+      className: 'custom-sidenav-top-class',
+      style: { width: 90 },
+    },
+    sideNavBottomProps: {
+      className: 'custom-sidenav-bottom-class',
+      style: { width: 100 },
+    },
+  });
+
+  // sideNav props test
+  const sideNavElement = container.querySelector(
+    '.iui-side-navigation.iui-collapsed.custom-sidenav-class',
+  ) as HTMLElement;
+  expect(sideNavElement).toBeTruthy();
+  expect(sideNavElement.style.width).toBe('70px');
+
+  // content props test
+  const contentElement = container.querySelector(
+    '.iui-sidenav-content.custom-sidenav-content-class',
+  ) as HTMLElement;
+  expect(contentElement).toBeTruthy();
+  expect(contentElement.style.width).toBe('80px');
+
+  // top props test
+  const topElement = container.querySelector(
+    '.iui-top.custom-sidenav-top-class',
+  ) as HTMLElement;
+  expect(topElement).toBeTruthy();
+  expect(topElement.style.width).toBe('90px');
+
+  // bottom props test
+  const bottomElement = container.querySelector(
+    '.iui-bottom.custom-sidenav-bottom-class',
+  ) as HTMLElement;
+  expect(bottomElement).toBeTruthy();
+  expect(bottomElement.style.width).toBe('100px');
+});

packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx

@@ -57,6 +57,22 @@ type SideNavigationProps = {
    * @default false
    */
   isSubmenuOpen?: boolean;
+  /**
+   * Passes props for SideNav.
+   */
+  sideNavProps?: React.ComponentProps<'div'>;
+  /**
+   * Passes props for SideNav content.
+   */
+  sideNavContentProps?: React.ComponentProps<'div'>;
+  /**
+   * Passes props for SideNav top.
+   */
+  sideNavTopProps?: React.ComponentProps<'div'>;
+  /**
+   * Passes props for SideNav bottom.
+   */
+  sideNavBottomProps?: React.ComponentProps<'div'>;
 };
 
 /**
@@ -83,6 +99,10 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
     onExpanderClick,
     submenu,
     isSubmenuOpen = false,
+    sideNavProps,
+    sideNavContentProps,
+    sideNavTopProps,
+    sideNavBottomProps,
     ...rest
   } = props;
 
@@ -110,14 +130,28 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
       {...rest}
     >
       <Box
-        className={cx('iui-side-navigation', {
-          'iui-expanded': _isExpanded,
-          'iui-collapsed': !_isExpanded,
-        })}
+        as='div'
+        {...sideNavProps}
+        className={cx(
+          'iui-side-navigation',
+          {
+            'iui-expanded': _isExpanded,
+            'iui-collapsed': !_isExpanded,
+          },
+          sideNavProps?.className,
+        )}
       >
         {expanderPlacement === 'top' && ExpandButton}
-        <Box className='iui-sidenav-content'>
-          <Box className='iui-top'>
+        <Box
+          as='div'
+          {...sideNavContentProps}
+          className={cx('iui-sidenav-content', sideNavContentProps?.className)}
+        >
+          <Box
+            as='div'
+            {...sideNavTopProps}
+            className={cx('iui-top', sideNavTopProps?.className)}
+          >
             {items.map((sidenavButton: JSX.Element, index) =>
               !_isExpanded ? (
                 <Tooltip
@@ -132,7 +166,11 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
               ),
             )}
           </Box>
-          <Box className='iui-bottom'>
+          <Box
+            as='div'
+            {...sideNavBottomProps}
+            className={cx('iui-bottom', sideNavBottomProps?.className)}
+          >
             {secondaryItems?.map((sidenavButton: JSX.Element, index) =>
               !_isExpanded ? (
                 <Tooltip