diff --git a/react/src/lib/CollapseButton/index.js b/react/src/lib/CollapseButton/index.js
index fc1d986aad..c091b0da68 100644
--- a/react/src/lib/CollapseButton/index.js
+++ b/react/src/lib/CollapseButton/index.js
@@ -5,7 +5,13 @@ import PropTypes from 'prop-types';
 import { Button, Icon } from '@momentum-ui/react';
 
 const CollapseButton = props => {
-  const { collapse, alignment, onClick, className, ...otherProps } = props;
+  const { 
+    alignment,
+    className,
+    collapse,
+    onClick,
+    ...otherProps
+  } = props;
 
   const handleClick = () => {
     onClick && onClick();
@@ -30,24 +36,24 @@ const CollapseButton = props => {
   );
 };
 
-CollapseButton.displayName = 'CollapseButton';
-
-CollapseButton.defaultProps = {
-  collapse: true,
-  alignment: 'left',
-  onClick: null,
-  className: '',
-};
-
 CollapseButton.propTypes = {
-  /** @prop Sets the collapse css styling | true */
-  collapse: PropTypes.bool,
   /** @prop Sets the positioning of the CollapseButton | 'left' */
   alignment: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
-  /** @prop Handler to be called when the user taps the CollapseButton | null */
-  onClick: PropTypes.func,
   /** @prop Optional css class string | '' */
   className: PropTypes.string,
+  /** @prop Sets the collapse css styling | true */
+  collapse: PropTypes.bool,
+  /** @prop Handler to be called when the user taps the CollapseButton | null */
+  onClick: PropTypes.func,
 };
 
+CollapseButton.defaultProps = {
+  alignment: 'left',
+  className: '',
+  collapse: true,
+  onClick: null,
+};
+
+CollapseButton.displayName = 'CollapseButton';
+
 export default CollapseButton;
diff --git a/react/src/lib/Sidebar/examples/WithIcons.js b/react/src/lib/Sidebar/examples/WithIcons.js
index bc3303fe66..6051d6eb79 100644
--- a/react/src/lib/Sidebar/examples/WithIcons.js
+++ b/react/src/lib/Sidebar/examples/WithIcons.js
@@ -9,7 +9,7 @@ import {
 export default class DefaultSidebar extends React.PureComponent {
   render() {
     return (
-      <Sidebar>
+      <Sidebar expandable withToggle>
         <SidebarBody>
           <SidebarNav>
             <SidebarNavItem
diff --git a/react/src/lib/Sidebar/index.js b/react/src/lib/Sidebar/index.js
index 0995e8c031..b2e635f823 100644
--- a/react/src/lib/Sidebar/index.js
+++ b/react/src/lib/Sidebar/index.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import SidebarContext from '../SidebarContext';
 import { UIDReset } from 'react-uid';
+import { CollapseButton } from '@momentum-ui/react';
 
 class Sidebar extends React.Component {
   constructor(props) {
@@ -48,14 +49,17 @@ class Sidebar extends React.Component {
 
   render() {
     const {
+      buttonProps,
       children,
       className,
       expandable,
       isFixed,
       isPageLevel,
       theme,
+      withToggle,
       withIcons,
       withTopbar,
+      wrapperClass,
       ...props
     } = this.props;
     const { expanded, sidebarContext } = this.state;
@@ -76,37 +80,68 @@ class Sidebar extends React.Component {
       }
     };
 
+    const getCollapseClass = prefix => {
+      if (expandable && !expanded && !withIcons) {
+        return ` ${prefix}--collapsed`;
+      } else if (expandable && !expanded && withIcons) {
+        return ` ${prefix}--minimized`;
+      } else return '';
+    };
+
     return (
-      <div
-        className={
-          'md-sidebar' +
-          `${theme && ` md-sidebar--${theme}` || ''}` +
-          `${isFixed && ` md-sidebar--fixed` || ''}` +
-          `${!isPageLevel && ` md-sidebar--global` || ''}` +
-          `${withTopbar && ` md-sidebar--topbar` || ''}` +
-          `${withIcons && !isPageLevel && ` md-sidebar--indented` || '' }` +
-          `${hasTiers() && ` md-sidebar--nested` || ''}` +
-          ` md-sidebar--${(!expandable || expanded) ? 'expanded' : 'collapsed'}` +
-          `${className && ` ${className}` || ''}`
+      <div className={
+        'md-sidebar__wrapper' +
+        `${isFixed && ` md-sidebar__wrapper--fixed` || ''}` +
+        `${wrapperClass && ` ${wrapperClass}` || ''}`
+      }>
+        <div
+          className={
+            'md-sidebar' +
+            `${theme && ` md-sidebar--${theme}` || ''}` +
+            `${isFixed && ` md-sidebar--fixed` || ''}` +
+            `${!isPageLevel && ` md-sidebar--global` || ''}` +
+            `${withTopbar && ` md-sidebar--topbar` || ''}` +
+            `${withIcons && !isPageLevel && ` md-sidebar--indented` || '' }` +
+            `${hasTiers() && ` md-sidebar--nested` || ''}` +
+            `${getCollapseClass('md-sidebar')}` +
+            `${className && ` ${className}` || ''}`
+          }
+          {...otherProps}
+        >
+          <SidebarContext.Provider value={sidebarContext}>
+            <UIDReset>
+              {children}
+            </UIDReset>
+          </SidebarContext.Provider>
+        </div>
+
+        {
+          withToggle && expandable &&
+          <div 
+            className={
+              'md-sidebar__toggle' +
+              `${getCollapseClass('md-sidebar__toggle')}`
+          }>
+            <CollapseButton 
+              collapse={!expanded}
+              onClick={this.handleNavToggle}
+              {...buttonProps}
+            />
+          </div>
         }
-        {...otherProps}
-      >
-        <SidebarContext.Provider value={sidebarContext}>
-          <UIDReset>
-            {children}
-          </UIDReset>
-        </SidebarContext.Provider>
       </div>
     );
   }
 }
 
 Sidebar.propTypes = {
+  /**  @prop Optional CSS class for the toggle button | {} */
+  buttonProps: PropTypes.object,
   /** @prop Children nodes to Render inside side navigation | null */
   children: PropTypes.node,
   /** @prop Optional CSS class string | '' */
   className: PropTypes.string,
-  /** @prop Set to make the navigation expandable | true */
+  /** @prop Set to make the navigation expandable | false */
   expandable: PropTypes.bool,
   /** @prop Set navigation expanded or collapsed | true */
   expanded: PropTypes.bool,
@@ -118,20 +153,27 @@ Sidebar.propTypes = {
   theme: PropTypes.string,
   /** @prop Changes padding based on Icon nav | true */
   withIcons: PropTypes.bool,
+  /** @prop Optional toggle button to expand/collapse sidebar | false */
+  withToggle: PropTypes.bool,
   /** @prop Sets padding for Topbar | false */
   withTopbar: PropTypes.bool,
+  /** @prop Optional CSS class string for sidebar wrapper | '' */
+  wrapperClass: PropTypes.string,
 };
 
 Sidebar.defaultProps = {
+  buttonProps: {},
   children: null,
   className: '',
-  expandable: true,
+  expandable: false,
   expanded: true,
   isFixed: false,
   isPageLevel: false,
   theme: '',
   withIcons: true,
+  withToggle: false,
   withTopbar: false,
+  wrapperClass: '',
 };
 
 Sidebar.displayName = 'Sidebar';
diff --git a/react/src/lib/Sidebar/tests/__snapshots__/index.spec.js.snap b/react/src/lib/Sidebar/tests/__snapshots__/index.spec.js.snap
index 99d013d6c8..51a8228c35 100644
--- a/react/src/lib/Sidebar/tests/__snapshots__/index.spec.js.snap
+++ b/react/src/lib/Sidebar/tests/__snapshots__/index.spec.js.snap
@@ -4,14 +4,17 @@ exports[`<Sidebar /> should render a Sidebar 1`] = `
 ShallowWrapper {
   Symbol(enzyme.__root__): [Circular],
   Symbol(enzyme.__unrendered__): <Sidebar
+    buttonProps={Object {}}
     className=""
-    expandable={true}
+    expandable={false}
     expanded={true}
     isFixed={false}
     isPageLevel={false}
     theme=""
     withIcons={true}
+    withToggle={false}
     withTopbar={false}
+    wrapperClass=""
   />,
   Symbol(enzyme.__renderer__): Object {
     "batchedUpdates": [Function],
@@ -27,65 +30,97 @@ ShallowWrapper {
     "key": undefined,
     "nodeType": "host",
     "props": Object {
-      "children": <Context.Provider
-        value={
-          Object {
-            "primary": true,
-            "secondary": false,
-            "setContext": [Function],
-            "tertiary": false,
-          }
-        }
-      >
-        <Unknown />
-      </Context.Provider>,
-      "className": "md-sidebar md-sidebar--global md-sidebar--indented md-sidebar--expanded",
+      "children": Array [
+        <div
+          className="md-sidebar md-sidebar--global md-sidebar--indented"
+        >
+          <Context.Provider
+            value={
+              Object {
+                "primary": true,
+                "secondary": false,
+                "setContext": [Function],
+                "tertiary": false,
+              }
+            }
+          >
+            <Unknown />
+          </Context.Provider>
+        </div>,
+        false,
+      ],
+      "className": "md-sidebar__wrapper",
     },
     "ref": null,
-    "rendered": Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "function",
-      "props": Object {
-        "children": <Unknown />,
-        "value": Object {
-          "primary": true,
-          "secondary": false,
-          "setContext": [Function],
-          "tertiary": false,
-        },
-      },
-      "ref": null,
-      "rendered": Object {
+    "rendered": Array [
+      Object {
         "instance": null,
         "key": undefined,
-        "nodeType": "function",
+        "nodeType": "host",
         "props": Object {
-          "children": null,
+          "children": <Context.Provider
+            value={
+              Object {
+                "primary": true,
+                "secondary": false,
+                "setContext": [Function],
+                "tertiary": false,
+              }
+            }
+          >
+            <Unknown />
+          </Context.Provider>,
+          "className": "md-sidebar md-sidebar--global md-sidebar--indented",
         },
         "ref": null,
-        "rendered": null,
-        "type": [Function],
-      },
-      "type": Object {
-        "$$typeof": Symbol(react.provider),
-        "_context": Object {
-          "$$typeof": Symbol(react.context),
-          "Consumer": Object {
-            "$$typeof": Symbol(react.context),
-            "_calculateChangedBits": null,
-            "_context": [Circular],
+        "rendered": Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "function",
+          "props": Object {
+            "children": <Unknown />,
+            "value": Object {
+              "primary": true,
+              "secondary": false,
+              "setContext": [Function],
+              "tertiary": false,
+            },
+          },
+          "ref": null,
+          "rendered": Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "function",
+            "props": Object {
+              "children": null,
+            },
+            "ref": null,
+            "rendered": null,
+            "type": [Function],
+          },
+          "type": Object {
+            "$$typeof": Symbol(react.provider),
+            "_context": Object {
+              "$$typeof": Symbol(react.context),
+              "Consumer": Object {
+                "$$typeof": Symbol(react.context),
+                "_calculateChangedBits": null,
+                "_context": [Circular],
+              },
+              "Provider": [Circular],
+              "_calculateChangedBits": null,
+              "_currentRenderer": null,
+              "_currentRenderer2": null,
+              "_currentValue": null,
+              "_currentValue2": null,
+              "_threadCount": 0,
+            },
           },
-          "Provider": [Circular],
-          "_calculateChangedBits": null,
-          "_currentRenderer": null,
-          "_currentRenderer2": null,
-          "_currentValue": null,
-          "_currentValue2": null,
-          "_threadCount": 0,
         },
+        "type": "div",
       },
-    },
+      false,
+    ],
     "type": "div",
   },
   Symbol(enzyme.__nodes__): Array [
@@ -94,65 +129,97 @@ ShallowWrapper {
       "key": undefined,
       "nodeType": "host",
       "props": Object {
-        "children": <Context.Provider
-          value={
-            Object {
-              "primary": true,
-              "secondary": false,
-              "setContext": [Function],
-              "tertiary": false,
-            }
-          }
-        >
-          <Unknown />
-        </Context.Provider>,
-        "className": "md-sidebar md-sidebar--global md-sidebar--indented md-sidebar--expanded",
+        "children": Array [
+          <div
+            className="md-sidebar md-sidebar--global md-sidebar--indented"
+          >
+            <Context.Provider
+              value={
+                Object {
+                  "primary": true,
+                  "secondary": false,
+                  "setContext": [Function],
+                  "tertiary": false,
+                }
+              }
+            >
+              <Unknown />
+            </Context.Provider>
+          </div>,
+          false,
+        ],
+        "className": "md-sidebar__wrapper",
       },
       "ref": null,
-      "rendered": Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "function",
-        "props": Object {
-          "children": <Unknown />,
-          "value": Object {
-            "primary": true,
-            "secondary": false,
-            "setContext": [Function],
-            "tertiary": false,
-          },
-        },
-        "ref": null,
-        "rendered": Object {
+      "rendered": Array [
+        Object {
           "instance": null,
           "key": undefined,
-          "nodeType": "function",
+          "nodeType": "host",
           "props": Object {
-            "children": null,
+            "children": <Context.Provider
+              value={
+                Object {
+                  "primary": true,
+                  "secondary": false,
+                  "setContext": [Function],
+                  "tertiary": false,
+                }
+              }
+            >
+              <Unknown />
+            </Context.Provider>,
+            "className": "md-sidebar md-sidebar--global md-sidebar--indented",
           },
           "ref": null,
-          "rendered": null,
-          "type": [Function],
-        },
-        "type": Object {
-          "$$typeof": Symbol(react.provider),
-          "_context": Object {
-            "$$typeof": Symbol(react.context),
-            "Consumer": Object {
-              "$$typeof": Symbol(react.context),
-              "_calculateChangedBits": null,
-              "_context": [Circular],
+          "rendered": Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "function",
+            "props": Object {
+              "children": <Unknown />,
+              "value": Object {
+                "primary": true,
+                "secondary": false,
+                "setContext": [Function],
+                "tertiary": false,
+              },
+            },
+            "ref": null,
+            "rendered": Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "function",
+              "props": Object {
+                "children": null,
+              },
+              "ref": null,
+              "rendered": null,
+              "type": [Function],
+            },
+            "type": Object {
+              "$$typeof": Symbol(react.provider),
+              "_context": Object {
+                "$$typeof": Symbol(react.context),
+                "Consumer": Object {
+                  "$$typeof": Symbol(react.context),
+                  "_calculateChangedBits": null,
+                  "_context": [Circular],
+                },
+                "Provider": [Circular],
+                "_calculateChangedBits": null,
+                "_currentRenderer": null,
+                "_currentRenderer2": null,
+                "_currentValue": null,
+                "_currentValue2": null,
+                "_threadCount": 0,
+              },
             },
-            "Provider": [Circular],
-            "_calculateChangedBits": null,
-            "_currentRenderer": null,
-            "_currentRenderer2": null,
-            "_currentValue": null,
-            "_currentValue2": null,
-            "_threadCount": 0,
           },
+          "type": "div",
         },
-      },
+        false,
+      ],
       "type": "div",
     },
   ],
diff --git a/react/src/lib/Sidebar/tests/index.spec.js b/react/src/lib/Sidebar/tests/index.spec.js
index 3515ab601c..15185c29b1 100644
--- a/react/src/lib/Sidebar/tests/index.spec.js
+++ b/react/src/lib/Sidebar/tests/index.spec.js
@@ -19,6 +19,12 @@ describe('<Sidebar />', () => {
     expect(wrapper.find('.testClassName').exists()).toBeTruthy();
   });
 
+  it('should add customized wrapper class name if wrapperClass prop is set', () => {
+    const wrapper = shallow(<Sidebar wrapperClass='testClassName'/>);
+
+    expect(wrapper.find('.testClassName').exists()).toBeTruthy();
+  });
+
   it('should render children if children prop is set', () => {
     const wrapper = shallow(
       <Sidebar>
@@ -35,8 +41,14 @@ describe('<Sidebar />', () => {
     expect(wrapper.find('.md-sidebar--dark').exists()).toBeTruthy();
   });
 
-  it('should hide Sidebar if the expandable and expanded are set', () => {
-    const wrapper = shallow(<Sidebar expandable expanded={false} />);
+  it('should minimize Sidebar if the expandable/!expanded/withIcons are set', () => {
+    const wrapper = mount(<Sidebar expandable expanded={false} />);
+
+    expect(wrapper.find('.md-sidebar--minimized').exists()).toBeTruthy();
+  });
+
+  it('should collapse Sidebar if the expandable/!expanded/!withIcons', () => {
+    const wrapper = mount(<Sidebar expandable expanded={false} withIcons={false} />);
 
     expect(wrapper.find('.md-sidebar--collapsed').exists()).toBeTruthy();
   });
@@ -44,12 +56,13 @@ describe('<Sidebar />', () => {
   it('should show Sidebar if the expandable and expanded are set', () => {
     const wrapper = shallow(<Sidebar expandable expanded />);
 
-    expect(wrapper.find('.md-sidebar--expanded').exists()).toBeTruthy();
+    expect(wrapper.find('.md-sidebar--collapsed').exists()).toBeFalsy();
   });
 
   it('should add fixed if isFixed prop is set', () => {
     const wrapper = shallow(<Sidebar isFixed/>);
 
+    expect(wrapper.find('.md-sidebar__wrapper--fixed').exists()).toBeTruthy();
     expect(wrapper.find('.md-sidebar--fixed').exists()).toBeTruthy();
   });
 
@@ -118,4 +131,34 @@ describe('<Sidebar />', () => {
 
     expect(wrapper.find('.md-sidebar--nested').exists()).toBeTruthy();
   });
+
+  it('should add toggle button if withToggle/expandable are true', () => {
+    const wrapper = shallow(<Sidebar withToggle expandable/>);
+
+    expect(wrapper.find('.md-sidebar__toggle').exists()).toBeTruthy();
+  });
+
+  it('should not add toggle button if withToggle/expandable are false', () => {
+    const wrapper = shallow(<Sidebar withToggle expandable={false}/>);
+
+    expect(wrapper.find('.md-sidebar__toggle').exists()).toBeFalsy();
+  });
+
+  it('should add minimized toggle button if withIcons/withToggle/expandable/!expanded set', () => {
+    const wrapper = mount(<Sidebar withIcons withToggle expandable expanded={false}/>);
+
+    expect(wrapper.find('.md-sidebar__toggle--minimized').exists()).toBeTruthy();
+  });
+
+  it('should add collapsed toggle button if !withIcons/withToggle/expandable/!expanded set', () => {
+    const wrapper = mount(<Sidebar withIcons={false} withToggle expandable expanded={false}/>);
+
+    expect(wrapper.find('.md-sidebar__toggle--collapsed').exists()).toBeTruthy();
+  });
+
+  it('should apply buttonProps to toggle button', () => {
+    const wrapper = mount(<Sidebar withToggle expandable buttonProps={{ ariaLabel: 'test' }}/>);
+
+    expect(wrapper.find('.md-button').props()['aria-label']).toEqual('test');
+  });
 });