diff --git a/packages/chrome/package.json b/packages/chrome/package.json
index 55f0579f724..7dfeaef79bb 100644
--- a/packages/chrome/package.json
+++ b/packages/chrome/package.json
@@ -20,7 +20,6 @@
   },
   "dependencies": {
     "@zendeskgarden/react-selection": "^4.6.0",
-    "@zendeskgarden/svg-icons": "^4.0.1",
     "classnames": "^2.2.5"
   },
   "peerDependencies": {
@@ -31,9 +30,10 @@
     "styled-components": "^3.2.6"
   },
   "devDependencies": {
-    "@zendeskgarden/css-chrome": "3.3.2",
+    "@zendeskgarden/css-chrome": "3.4.0",
     "@zendeskgarden/css-variables": "5.1.1",
-    "@zendeskgarden/react-theming": "^3.1.3"
+    "@zendeskgarden/react-theming": "^3.1.3",
+    "@zendeskgarden/svg-icons": "4.4.5"
   },
   "keywords": [
     "components",
diff --git a/packages/chrome/src/containers/AccordionContainer.example.md b/packages/chrome/src/containers/AccordionContainer.example.md
new file mode 100644
index 00000000000..e875bbfd704
--- /dev/null
+++ b/packages/chrome/src/containers/AccordionContainer.example.md
@@ -0,0 +1,57 @@
+```jsx
+const {
+  zdSpacing,
+  zdSpacingSm,
+  zdSpacingXs,
+  zdColorGrey300
+} = require('@zendeskgarden/css-variables');
+const DownIcon = require('svg-react-loader?name=Down!@zendeskgarden/svg-icons/src/16/chevron-down-fill.svg');
+
+const UpIcon = styled(DownIcon)`
+  transform: rotate(180deg);
+`;
+
+const StyledAccordion = styled.div`
+  border: 1px solid ${zdColorGrey300};
+  border-radius: ${zdSpacingXs};
+`;
+
+const StyledHeadingButton = styled.button`
+  background: none;
+  border: 0;
+  display: block;
+  font-size: 1em;
+  font-weight: normal;
+  margin: 0;
+  padding: ${zdSpacingSm} ${zdSpacing};
+  position: relative;
+  text-align: left;
+  width: 100%;
+`;
+
+const StyledIconWrapper = styled.div`
+  float: right;
+`;
+
+const StyledPanel = styled.div`
+  margin: 0;
+  padding: ${zdSpacingSm} ${zdSpacing};
+  border-top: 1px solid ${zdColorGrey300};
+
+  display: ${props => (props.hidden ? 'none' : 'block')};
+`;
+
+<AccordionContainer>
+  {({ getHeadingProps, getHeadingButtonProps, getPanelProps, expanded }) => (
+    <StyledAccordion>
+      <div {...getHeadingProps({ headingLevel: 2 })}>
+        <StyledHeadingButton {...getHeadingButtonProps()}>
+          Accordion Header With Custom Styling
+          <StyledIconWrapper>{expanded ? <UpIcon /> : <DownIcon />}</StyledIconWrapper>
+        </StyledHeadingButton>
+        <StyledPanel {...getPanelProps({ hidden: !expanded })}>Panel contents</StyledPanel>
+      </div>
+    </StyledAccordion>
+  )}
+</AccordionContainer>;
+```
diff --git a/packages/chrome/src/containers/AccordionContainer.js b/packages/chrome/src/containers/AccordionContainer.js
new file mode 100644
index 00000000000..3b430772903
--- /dev/null
+++ b/packages/chrome/src/containers/AccordionContainer.js
@@ -0,0 +1,108 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import PropTypes from 'prop-types';
+import {
+  ControlledComponent,
+  IdManager,
+  composeEventHandlers
+} from '@zendeskgarden/react-selection';
+
+export default class AccordionContainer extends ControlledComponent {
+  static propTypes = {
+    /**
+     * Whether the accordion is currently expanded
+     */
+    expanded: PropTypes.bool,
+    /**
+     * @param {Object} newState - The updated state
+     * @param {Any} newState.expanded - Whether the accordion is currently expanded
+     */
+    onStateChange: PropTypes.func,
+    /**
+     * @param {Object} renderProps
+     * @param {Function} renderProps.getHeadingProps - Props to be spread onto each heading element. ({ headingLevel }) is required.
+     * @param {Function} renderProps.getHeadingButtonProps - Props to be spread onto each heading button element.
+     * @param {Function} renderProps.getPanelProps - Props to be spread onto each panel element.
+     * @param {Any} renderProps.expanded - Whether the accordion is currently expanded
+     */
+    children: PropTypes.func,
+    /**
+     * Identical to children
+     */
+    render: PropTypes.func,
+    /**
+     * The root ID to use for descendants. A unique ID is created if none is provided.
+     **/
+    id: PropTypes.string
+  };
+
+  constructor(...args) {
+    super(...args);
+
+    this.state = {
+      expanded: false,
+      id: IdManager.generateId('garden-accordion-container')
+    };
+  }
+
+  getHeaderId = () => `${this.getControlledState().id}-header`;
+
+  getPanelId = () => `${this.getControlledState().id}-panel`;
+
+  getHeadingProps = ({ role = 'heading', headingLevel, ...other } = {}) => {
+    if (!headingLevel) {
+      throw new Error(
+        'Accessibility Error: You must apply the `headingLevel` prop to the element that contains your heading. Equivalent to `aria-level`.'
+      );
+    }
+
+    return {
+      role,
+      'aria-level': headingLevel,
+      ...other
+    };
+  };
+
+  getHeadingButtonProps = ({ onClick, ...other } = {}) => {
+    const { expanded } = this.getControlledState();
+
+    return {
+      id: this.getHeaderId(),
+      'aria-controls': this.getPanelId(),
+      'aria-expanded': expanded,
+      onClick: composeEventHandlers(onClick, () => {
+        this.setControlledState({ expanded: !expanded });
+      }),
+      ...other
+    };
+  };
+
+  getPanelProps = ({ role = 'region', ...other } = {}) => {
+    const { expanded } = this.getControlledState();
+
+    return {
+      role,
+      'aria-hidden': !expanded,
+      'aria-labelledby': this.getHeaderId(),
+      id: this.getPanelId(),
+      ...other
+    };
+  };
+
+  render() {
+    const { children, render = children } = this.props;
+    const { expanded } = this.getControlledState();
+
+    return render({
+      getHeadingProps: this.getHeadingProps,
+      getHeadingButtonProps: this.getHeadingButtonProps,
+      getPanelProps: this.getPanelProps,
+      expanded
+    });
+  }
+}
diff --git a/packages/chrome/src/containers/AccordionContainer.spec.js b/packages/chrome/src/containers/AccordionContainer.spec.js
new file mode 100644
index 00000000000..8e6d0c51b92
--- /dev/null
+++ b/packages/chrome/src/containers/AccordionContainer.spec.js
@@ -0,0 +1,128 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { mountWithTheme } from '@zendeskgarden/react-testing';
+import AccordionContainer from './AccordionContainer';
+
+describe('AccordionContainer', () => {
+  let wrapper;
+  let onChangeSpy;
+
+  const BasicExample = props => (
+    <AccordionContainer id="test" expanded={false} {...props}>
+      {({ getHeadingProps, getHeadingButtonProps, getPanelProps }) => (
+        <div>
+          <div {...getHeadingProps({ 'data-test-id': 'heading', headingLevel: 1 })}>
+            <button {...getHeadingButtonProps({ 'data-test-id': 'heading-button' })}>
+              Header Content
+            </button>
+          </div>
+          <div {...getPanelProps({ 'data-test-id': 'panel' })}>Panel Content</div>
+        </div>
+      )}
+    </AccordionContainer>
+  );
+
+  beforeEach(() => {
+    onChangeSpy = jest.fn();
+    wrapper = mountWithTheme(<BasicExample onStateChange={onChangeSpy} />);
+  });
+
+  const findHeading = enzymeWrapper => enzymeWrapper.find('[data-test-id="heading"]');
+  const findHeadingButton = enzymeWrapper => enzymeWrapper.find('[data-test-id="heading-button"]');
+  const findPanel = enzymeWrapper => enzymeWrapper.find('[data-test-id="panel"]');
+
+  describe('getHeadingProps()', () => {
+    it('throws accessibility error if no headingLevel is provided', () => {
+      console.error = jest.fn(); // eslint-disable-line no-console
+
+      expect(() => {
+        wrapper = mountWithTheme(
+          <AccordionContainer id="test" expanded={false}>
+            {({ getHeadingProps, getHeadingButtonProps, getPanelProps }) => (
+              <div>
+                <div {...getHeadingProps()}>
+                  <button {...getHeadingButtonProps()}>Header Content</button>
+                </div>
+                <div {...getPanelProps()}>Panel Content</div>
+              </div>
+            )}
+          </AccordionContainer>
+        );
+      }).toThrow(
+        'Accessibility Error: You must apply the `headingLevel` prop to the element that contains your heading. Equivalent to `aria-level`.'
+      );
+    });
+
+    it('applies correct role attribute', () => {
+      expect(findHeading(wrapper)).toHaveProp('role', 'heading');
+    });
+  });
+
+  describe('getHeadingButtonProps()', () => {
+    it('applies correct id attribute', () => {
+      expect(findHeadingButton(wrapper)).toHaveProp('id', 'test-header');
+    });
+
+    it('applies correct aria-controls attribute', () => {
+      expect(findHeadingButton(wrapper)).toHaveProp('aria-controls', 'test-panel');
+    });
+
+    describe('aria-expanded', () => {
+      it('applies correct attribute when collapsed', () => {
+        expect(findHeadingButton(wrapper)).toHaveProp('aria-expanded', false);
+      });
+
+      it('applies correct attribute when expanded', () => {
+        wrapper = mountWithTheme(<BasicExample onStateChange={onChangeSpy} expanded />);
+
+        expect(findHeadingButton(wrapper)).toHaveProp('aria-expanded', true);
+      });
+    });
+
+    describe('onClick()', () => {
+      it('calls onStateChange with correct value when collapsed', () => {
+        findHeadingButton(wrapper).simulate('click');
+        expect(onChangeSpy).toHaveBeenCalledWith({ expanded: true });
+      });
+
+      it('calls onStateChange with correct value when expanded', () => {
+        wrapper = mountWithTheme(<BasicExample onStateChange={onChangeSpy} expanded />);
+
+        findHeadingButton(wrapper).simulate('click');
+        expect(onChangeSpy).toHaveBeenCalledWith({ expanded: false });
+      });
+    });
+  });
+
+  describe('getPanelProps()', () => {
+    it('applies correct role attribute', () => {
+      expect(findPanel(wrapper)).toHaveProp('role', 'region');
+    });
+
+    it('applies correct aria-labelledby attribute', () => {
+      expect(findPanel(wrapper)).toHaveProp('aria-labelledby', 'test-header');
+    });
+
+    it('applies correct id attribute', () => {
+      expect(findPanel(wrapper)).toHaveProp('id', 'test-panel');
+    });
+
+    describe('aria-hidden', () => {
+      it('applies correct attribute when collapsed', () => {
+        expect(findPanel(wrapper)).toHaveProp('aria-hidden', true);
+      });
+
+      it('applies correct attribute when expanded', () => {
+        wrapper = mountWithTheme(<BasicExample onStateChange={onChangeSpy} expanded />);
+
+        expect(findPanel(wrapper)).toHaveProp('aria-hidden', false);
+      });
+    });
+  });
+});
diff --git a/packages/chrome/src/index.js b/packages/chrome/src/index.js
index 97be2ae9327..4df80c264f2 100644
--- a/packages/chrome/src/index.js
+++ b/packages/chrome/src/index.js
@@ -5,6 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
+export { default as AccordionContainer } from './containers/AccordionContainer';
 export { default as Chrome } from './views/Chrome';
 export { default as Body } from './views/body/Body';
 export { default as Content } from './views/body/Content';
@@ -22,3 +23,4 @@ export { default as NavItemText } from './views/nav/NavItemText';
 export { default as SubNav } from './views/subnav/SubNav';
 export { default as SubNavItem } from './views/subnav/SubNavItem';
 export { default as SubNavItemText } from './views/subnav/SubNavItemText';
+export { default as CollapsibleSubNavItem } from './views/subnav/CollapsibleSubNavItem';
diff --git a/packages/chrome/src/views/Chrome.example.md b/packages/chrome/src/views/Chrome.example.md
index 2f38e2053b2..0302aec142e 100644
--- a/packages/chrome/src/views/Chrome.example.md
+++ b/packages/chrome/src/views/Chrome.example.md
@@ -22,7 +22,8 @@ const PersonIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-ic
 initialState = {
   currentNavItem: 'home',
   currentSubnavItem: 'item-1',
-  expanded: true
+  expanded: true,
+  showCollapsed: false
 };
 
 <div>
@@ -99,6 +100,33 @@ initialState = {
       >
         <SubNavItemText>Subnav 2</SubNavItemText>
       </SubNavItem>
+      <CollapsibleSubNavItem
+        header="Collapsible Item"
+        expanded={state.showCollapsed}
+        onChange={showCollapsed => setState({ showCollapsed })}
+      >
+        <SubNavItem
+          current={state.currentSubnavItem === 'collapsed-item-1'}
+          onClick={() => setState({ currentSubnavItem: 'collapsed-item-1' })}
+          href="#/"
+        >
+          <SubNavItemText>Item 1</SubNavItemText>
+        </SubNavItem>
+        <SubNavItem
+          current={state.currentSubnavItem === 'collapsed-item-2'}
+          onClick={() => setState({ currentSubnavItem: 'collapsed-item-2' })}
+          href="#/"
+        >
+          <SubNavItemText>Item 2</SubNavItemText>
+        </SubNavItem>
+        <SubNavItem
+          current={state.currentSubnavItem === 'collapsed-item-3'}
+          onClick={() => setState({ currentSubnavItem: 'collapsed-item-3' })}
+          href="#/"
+        >
+          <SubNavItemText>Item 3</SubNavItemText>
+        </SubNavItem>
+      </CollapsibleSubNavItem>
       <SubNavItem
         current={state.currentSubnavItem === 'item-3'}
         onClick={() => setState({ currentSubnavItem: 'item-3' })}
diff --git a/packages/chrome/src/views/subnav/CollapsibleSubNavItem.js b/packages/chrome/src/views/subnav/CollapsibleSubNavItem.js
new file mode 100644
index 00000000000..4b47ef8b3d1
--- /dev/null
+++ b/packages/chrome/src/views/subnav/CollapsibleSubNavItem.js
@@ -0,0 +1,108 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import classNames from 'classnames';
+import ChromeStyles from '@zendeskgarden/css-chrome';
+import { retrieveTheme } from '@zendeskgarden/react-theming';
+
+import AccordionContainer from '../../containers/AccordionContainer';
+import SubNavItem from './SubNavItem';
+
+const COMPONENT_ID = 'chrome.collapsible_sub_nav_item';
+const PANEL_COMPONENT_ID = 'chrome.collapsible_sub_nav_item_panel';
+
+/** Accepts all `<div>` props */
+const StyledSubNavItemHeader = styled(SubNavItem).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': PACKAGE_VERSION,
+  className: props =>
+    classNames(ChromeStyles['c-chrome__subnav__item--header'], {
+      [ChromeStyles['is-expanded']]: props.expanded
+    })
+})`
+  ${props => retrieveTheme(COMPONENT_ID, props)};
+`;
+
+StyledSubNavItemHeader.propTypes = {
+  expanded: PropTypes.bool
+};
+
+/** Accepts all `<div>` props */
+const StyledSubNavPanel = styled.div.attrs({
+  'data-garden-id': PANEL_COMPONENT_ID,
+  'data-garden-version': PACKAGE_VERSION,
+  className: props =>
+    classNames(ChromeStyles['c-chrome__subnav__panel'], {
+      [ChromeStyles['is-hidden']]: props.isHidden
+    })
+})`
+  ${props => retrieveTheme(PANEL_COMPONENT_ID, props)};
+`;
+
+StyledSubNavPanel.propTypes = {
+  isHidden: PropTypes.bool
+};
+
+/**
+ * Accepts all `<button>` props
+ */
+export default class CollapsibleSubNavItem extends Component {
+  static propTypes = {
+    header: PropTypes.any,
+    expanded: PropTypes.bool,
+    hovered: PropTypes.bool,
+    focused: PropTypes.bool,
+    onChange: PropTypes.func
+  };
+
+  componentDidUpdate() {
+    if (this.props.expanded && this.panelRef) {
+      this.panelRef.style.maxHeight = `${this.panelRef.scrollHeight}px`;
+    }
+  }
+
+  render() {
+    const { header, children, expanded, onChange, ...other } = this.props;
+
+    return (
+      <AccordionContainer
+        expanded={expanded}
+        onStateChange={newState => {
+          onChange && onChange(newState.expanded);
+        }}
+      >
+        {({ getHeadingProps, getHeadingButtonProps, getPanelProps }) => (
+          <div>
+            <div {...getHeadingProps({ headingLevel: 2 })}>
+              <StyledSubNavItemHeader
+                {...getHeadingButtonProps({
+                  expanded,
+                  ...other
+                })}
+              >
+                {header}
+              </StyledSubNavItemHeader>
+            </div>
+            <StyledSubNavPanel
+              {...getPanelProps({
+                isHidden: !expanded,
+                innerRef: ref => {
+                  this.panelRef = ref;
+                }
+              })}
+            >
+              {children}
+            </StyledSubNavPanel>
+          </div>
+        )}
+      </AccordionContainer>
+    );
+  }
+}
diff --git a/packages/chrome/src/views/subnav/CollapsibleSubNavItem.spec.js b/packages/chrome/src/views/subnav/CollapsibleSubNavItem.spec.js
new file mode 100644
index 00000000000..517be276b30
--- /dev/null
+++ b/packages/chrome/src/views/subnav/CollapsibleSubNavItem.spec.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { mount } from 'enzyme';
+
+import CollapsibleSubNavItem from './CollapsibleSubNavItem';
+
+describe('CollapsibleSubNavItem', () => {
+  it('renders default styling', () => {
+    const wrapper = mount(
+      <CollapsibleSubNavItem label="Header">
+        <p>Content</p>
+      </CollapsibleSubNavItem>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe('States', () => {
+    it('renders expanded styling if provided', () => {
+      const wrapper = mount(
+        <CollapsibleSubNavItem label="Header" expanded>
+          <p>Content</p>
+        </CollapsibleSubNavItem>
+      );
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders focused styling if provided', () => {
+      const wrapper = mount(
+        <CollapsibleSubNavItem label="Header" focused>
+          <p>Content</p>
+        </CollapsibleSubNavItem>
+      );
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders hovered styling if provided', () => {
+      const wrapper = mount(
+        <CollapsibleSubNavItem label="Header" hovered>
+          <p>Content</p>
+        </CollapsibleSubNavItem>
+      );
+
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/packages/chrome/src/views/subnav/__snapshots__/CollapsibleSubNavItem.spec.js.snap b/packages/chrome/src/views/subnav/__snapshots__/CollapsibleSubNavItem.spec.js.snap
new file mode 100644
index 00000000000..208f76dffc9
--- /dev/null
+++ b/packages/chrome/src/views/subnav/__snapshots__/CollapsibleSubNavItem.spec.js.snap
@@ -0,0 +1,365 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CollapsibleSubNavItem States renders expanded styling if provided 1`] = `
+<CollapsibleSubNavItem
+  expanded={true}
+  label="Header"
+>
+  <AccordionContainer
+    expanded={true}
+    onStateChange={[Function]}
+  >
+    <div>
+      <div
+        aria-level={2}
+        role="heading"
+      >
+        <CollapsibleSubNavItem__StyledSubNavItemHeader
+          aria-controls="garden-accordion-container-1-panel"
+          aria-expanded={true}
+          expanded={true}
+          id="garden-accordion-container-1-header"
+          label="Header"
+          onClick={[Function]}
+        >
+          <SubNavItem
+            aria-controls="garden-accordion-container-1-panel"
+            aria-expanded={true}
+            className="c-chrome__subnav__item--header is-expanded "
+            data-garden-id="chrome.collapsible_sub_nav_item"
+            data-garden-version="version"
+            expanded={true}
+            id="garden-accordion-container-1-header"
+            label="Header"
+            onClick={[Function]}
+          >
+            <KeyboardFocusContainer>
+              <SubNavItem__StyledSubNavItem
+                aria-controls="garden-accordion-container-1-panel"
+                aria-expanded={true}
+                className="c-chrome__subnav__item--header is-expanded "
+                data-garden-id="chrome.collapsible_sub_nav_item"
+                data-garden-version="version"
+                expanded={true}
+                focused={false}
+                id="garden-accordion-container-1-header"
+                label="Header"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                tabIndex={0}
+              >
+                <button
+                  aria-controls="garden-accordion-container-1-panel"
+                  aria-expanded={true}
+                  className="c-chrome__subnav__item--header is-expanded c-chrome__subnav__item "
+                  data-garden-id="chrome.collapsible_sub_nav_item"
+                  data-garden-version="version"
+                  id="garden-accordion-container-1-header"
+                  label="Header"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  tabIndex={0}
+                />
+              </SubNavItem__StyledSubNavItem>
+            </KeyboardFocusContainer>
+          </SubNavItem>
+        </CollapsibleSubNavItem__StyledSubNavItemHeader>
+      </div>
+      <CollapsibleSubNavItem__StyledSubNavPanel
+        aria-hidden={false}
+        aria-labelledby="garden-accordion-container-1-header"
+        id="garden-accordion-container-1-panel"
+        innerRef={[Function]}
+        isHidden={false}
+        role="region"
+      >
+        <div
+          aria-hidden={false}
+          aria-labelledby="garden-accordion-container-1-header"
+          className="c-chrome__subnav__panel "
+          data-garden-id="chrome.collapsible_sub_nav_item_panel"
+          data-garden-version="version"
+          id="garden-accordion-container-1-panel"
+          role="region"
+        >
+          <p>
+            Content
+          </p>
+        </div>
+      </CollapsibleSubNavItem__StyledSubNavPanel>
+    </div>
+  </AccordionContainer>
+</CollapsibleSubNavItem>
+`;
+
+exports[`CollapsibleSubNavItem States renders focused styling if provided 1`] = `
+<CollapsibleSubNavItem
+  focused={true}
+  label="Header"
+>
+  <AccordionContainer
+    onStateChange={[Function]}
+  >
+    <div>
+      <div
+        aria-level={2}
+        role="heading"
+      >
+        <CollapsibleSubNavItem__StyledSubNavItemHeader
+          aria-controls="garden-accordion-container-2-panel"
+          focused={true}
+          id="garden-accordion-container-2-header"
+          label="Header"
+          onClick={[Function]}
+        >
+          <SubNavItem
+            aria-controls="garden-accordion-container-2-panel"
+            className="c-chrome__subnav__item--header "
+            data-garden-id="chrome.collapsible_sub_nav_item"
+            data-garden-version="version"
+            focused={true}
+            id="garden-accordion-container-2-header"
+            label="Header"
+            onClick={[Function]}
+          >
+            <KeyboardFocusContainer>
+              <SubNavItem__StyledSubNavItem
+                aria-controls="garden-accordion-container-2-panel"
+                className="c-chrome__subnav__item--header "
+                data-garden-id="chrome.collapsible_sub_nav_item"
+                data-garden-version="version"
+                focused={true}
+                id="garden-accordion-container-2-header"
+                label="Header"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                tabIndex={0}
+              >
+                <button
+                  aria-controls="garden-accordion-container-2-panel"
+                  className="c-chrome__subnav__item--header c-chrome__subnav__item is-focused "
+                  data-garden-id="chrome.collapsible_sub_nav_item"
+                  data-garden-version="version"
+                  id="garden-accordion-container-2-header"
+                  label="Header"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  tabIndex={0}
+                />
+              </SubNavItem__StyledSubNavItem>
+            </KeyboardFocusContainer>
+          </SubNavItem>
+        </CollapsibleSubNavItem__StyledSubNavItemHeader>
+      </div>
+      <CollapsibleSubNavItem__StyledSubNavPanel
+        aria-hidden={true}
+        aria-labelledby="garden-accordion-container-2-header"
+        id="garden-accordion-container-2-panel"
+        innerRef={[Function]}
+        isHidden={true}
+        role="region"
+      >
+        <div
+          aria-hidden={true}
+          aria-labelledby="garden-accordion-container-2-header"
+          className="c-chrome__subnav__panel is-hidden "
+          data-garden-id="chrome.collapsible_sub_nav_item_panel"
+          data-garden-version="version"
+          id="garden-accordion-container-2-panel"
+          role="region"
+        >
+          <p>
+            Content
+          </p>
+        </div>
+      </CollapsibleSubNavItem__StyledSubNavPanel>
+    </div>
+  </AccordionContainer>
+</CollapsibleSubNavItem>
+`;
+
+exports[`CollapsibleSubNavItem States renders hovered styling if provided 1`] = `
+<CollapsibleSubNavItem
+  hovered={true}
+  label="Header"
+>
+  <AccordionContainer
+    onStateChange={[Function]}
+  >
+    <div>
+      <div
+        aria-level={2}
+        role="heading"
+      >
+        <CollapsibleSubNavItem__StyledSubNavItemHeader
+          aria-controls="garden-accordion-container-3-panel"
+          hovered={true}
+          id="garden-accordion-container-3-header"
+          label="Header"
+          onClick={[Function]}
+        >
+          <SubNavItem
+            aria-controls="garden-accordion-container-3-panel"
+            className="c-chrome__subnav__item--header "
+            data-garden-id="chrome.collapsible_sub_nav_item"
+            data-garden-version="version"
+            hovered={true}
+            id="garden-accordion-container-3-header"
+            label="Header"
+            onClick={[Function]}
+          >
+            <KeyboardFocusContainer>
+              <SubNavItem__StyledSubNavItem
+                aria-controls="garden-accordion-container-3-panel"
+                className="c-chrome__subnav__item--header "
+                data-garden-id="chrome.collapsible_sub_nav_item"
+                data-garden-version="version"
+                focused={false}
+                hovered={true}
+                id="garden-accordion-container-3-header"
+                label="Header"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                tabIndex={0}
+              >
+                <button
+                  aria-controls="garden-accordion-container-3-panel"
+                  className="c-chrome__subnav__item--header c-chrome__subnav__item is-hovered "
+                  data-garden-id="chrome.collapsible_sub_nav_item"
+                  data-garden-version="version"
+                  id="garden-accordion-container-3-header"
+                  label="Header"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  tabIndex={0}
+                />
+              </SubNavItem__StyledSubNavItem>
+            </KeyboardFocusContainer>
+          </SubNavItem>
+        </CollapsibleSubNavItem__StyledSubNavItemHeader>
+      </div>
+      <CollapsibleSubNavItem__StyledSubNavPanel
+        aria-hidden={true}
+        aria-labelledby="garden-accordion-container-3-header"
+        id="garden-accordion-container-3-panel"
+        innerRef={[Function]}
+        isHidden={true}
+        role="region"
+      >
+        <div
+          aria-hidden={true}
+          aria-labelledby="garden-accordion-container-3-header"
+          className="c-chrome__subnav__panel is-hidden "
+          data-garden-id="chrome.collapsible_sub_nav_item_panel"
+          data-garden-version="version"
+          id="garden-accordion-container-3-panel"
+          role="region"
+        >
+          <p>
+            Content
+          </p>
+        </div>
+      </CollapsibleSubNavItem__StyledSubNavPanel>
+    </div>
+  </AccordionContainer>
+</CollapsibleSubNavItem>
+`;
+
+exports[`CollapsibleSubNavItem renders default styling 1`] = `
+<CollapsibleSubNavItem
+  label="Header"
+>
+  <AccordionContainer
+    onStateChange={[Function]}
+  >
+    <div>
+      <div
+        aria-level={2}
+        role="heading"
+      >
+        <CollapsibleSubNavItem__StyledSubNavItemHeader
+          aria-controls="garden-accordion-container-0-panel"
+          id="garden-accordion-container-0-header"
+          label="Header"
+          onClick={[Function]}
+        >
+          <SubNavItem
+            aria-controls="garden-accordion-container-0-panel"
+            className="c-chrome__subnav__item--header "
+            data-garden-id="chrome.collapsible_sub_nav_item"
+            data-garden-version="version"
+            id="garden-accordion-container-0-header"
+            label="Header"
+            onClick={[Function]}
+          >
+            <KeyboardFocusContainer>
+              <SubNavItem__StyledSubNavItem
+                aria-controls="garden-accordion-container-0-panel"
+                className="c-chrome__subnav__item--header "
+                data-garden-id="chrome.collapsible_sub_nav_item"
+                data-garden-version="version"
+                focused={false}
+                id="garden-accordion-container-0-header"
+                label="Header"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                tabIndex={0}
+              >
+                <button
+                  aria-controls="garden-accordion-container-0-panel"
+                  className="c-chrome__subnav__item--header c-chrome__subnav__item "
+                  data-garden-id="chrome.collapsible_sub_nav_item"
+                  data-garden-version="version"
+                  id="garden-accordion-container-0-header"
+                  label="Header"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  tabIndex={0}
+                />
+              </SubNavItem__StyledSubNavItem>
+            </KeyboardFocusContainer>
+          </SubNavItem>
+        </CollapsibleSubNavItem__StyledSubNavItemHeader>
+      </div>
+      <CollapsibleSubNavItem__StyledSubNavPanel
+        aria-hidden={true}
+        aria-labelledby="garden-accordion-container-0-header"
+        id="garden-accordion-container-0-panel"
+        innerRef={[Function]}
+        isHidden={true}
+        role="region"
+      >
+        <div
+          aria-hidden={true}
+          aria-labelledby="garden-accordion-container-0-header"
+          className="c-chrome__subnav__panel is-hidden "
+          data-garden-id="chrome.collapsible_sub_nav_item_panel"
+          data-garden-version="version"
+          id="garden-accordion-container-0-panel"
+          role="region"
+        >
+          <p>
+            Content
+          </p>
+        </div>
+      </CollapsibleSubNavItem__StyledSubNavPanel>
+    </div>
+  </AccordionContainer>
+</CollapsibleSubNavItem>
+`;
diff --git a/packages/chrome/styleguide.config.js b/packages/chrome/styleguide.config.js
index e38b05236f2..0693ba2839e 100644
--- a/packages/chrome/styleguide.config.js
+++ b/packages/chrome/styleguide.config.js
@@ -1,8 +1,14 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
 /**
  * Package specific styleguide configuration
  * https://github.com/styleguidist/react-styleguidist/blob/master/docs/Configuration.md
  */
-
 module.exports = {
   sections: [
     {
@@ -35,6 +41,10 @@ module.exports = {
           ]
         }
       ]
+    },
+    {
+      name: 'Containers',
+      components: '../../packages/chrome/src/containers/[A-Z]*.js'
     }
   ]
 };