diff --git a/src/components/Footer/Footer/Footer.stories.tsx b/src/components/Footer/Footer/Footer.stories.tsx
index 8abe8cc9f2..8d9532de39 100644
--- a/src/components/Footer/Footer/Footer.stories.tsx
+++ b/src/components/Footer/Footer/Footer.stories.tsx
@@ -283,3 +283,117 @@ export const BigFooter = (): React.ReactElement => (
     }
   />
 )
+
+export const MobileBigFooter = (): React.ReactElement => (
+  <Footer
+    big
+    returnToTop={returnToTop}
+    primary={
+      <div className="grid-container">
+        <div className="grid-row grid-gap">
+          <div className="tablet:grid-col-8">
+            <FooterNav
+              isMobile
+              big
+              links={[
+                [
+                  'Topic',
+                  ...Array(2).fill(<a href="#">Secondary link</a>),
+                  <a key="4" href="#">
+                    Secondary link that is a bit longer than most of the others
+                  </a>,
+                  <a key="5" href="#">
+                    Secondary link
+                  </a>,
+                ],
+                [
+                  'Topic',
+                  <a key="2" href="#">
+                    Secondary link that is pretty long
+                  </a>,
+                  ...Array(3).fill(<a href="#">Secondary link</a>),
+                ],
+                [
+                  'Topic',
+                  ...Array(4).fill(
+                    <a className="usa-footer__secondary-link" href="#">
+                      Secondary link
+                    </a>
+                  ),
+                ],
+                [
+                  'Topic',
+                  ...Array(4).fill(
+                    <a className="usa-footer__secondary-link" href="#">
+                      Secondary link
+                    </a>
+                  ),
+                ],
+              ]}
+            />
+          </div>
+          <div className="tablet:grid-col-4">
+            <SignUpForm />
+          </div>
+        </div>
+      </div>
+    }
+    secondary={
+      <div className="grid-row grid-gap">
+        <Logo
+          big
+          image={
+            <img
+              className="usa-footer__logo-img"
+              alt="img alt text"
+              src={logoImg}
+            />
+          }
+          heading={<h3 className="usa-footer__logo-heading">Name of Agency</h3>}
+        />
+        <div className="usa-footer__contact-links mobile-lg:grid-col-6">
+          <SocialLinks
+            links={[
+              <a
+                key="facebook"
+                className="usa-social-link usa-social-link--facebook"
+                href="#">
+                <span>Facebook</span>
+              </a>,
+              <a
+                key="twitter"
+                className="usa-social-link usa-social-link--twitter"
+                href="#">
+                <span>Twitter</span>
+              </a>,
+              <a
+                key="youtube"
+                className="usa-social-link usa-social-link--youtube"
+                href="#">
+                <span>YouTube</span>
+              </a>,
+              <a
+                key="rss"
+                className="usa-social-link usa-social-link--rss"
+                href="#">
+                <span>RSS</span>
+              </a>,
+            ]}
+          />
+          <h3 className="usa-footer__contact-heading">Agency Contact Center</h3>
+          <Address
+            big
+            items={[
+              <a key="telephone" href="tel:1-800-555-5555">
+                (800) CALL-GOVT
+              </a>,
+              <a key="email" href="mailto:info@agency.gov">
+                info@agency.gov
+              </a>,
+            ]}
+          />
+        </div>
+      </div>
+    }
+  />
+)
diff --git a/src/components/Footer/FooterExtendedNavList/FooterExtendedNavList.test.tsx b/src/components/Footer/FooterExtendedNavList/FooterExtendedNavList.test.tsx
new file mode 100644
index 0000000000..4b637356d3
--- /dev/null
+++ b/src/components/Footer/FooterExtendedNavList/FooterExtendedNavList.test.tsx
@@ -0,0 +1,157 @@
+/*  eslint-disable jsx-a11y/anchor-is-valid, react/jsx-key */
+
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react'
+
+import { FooterExtendedNavList } from './FooterExtendedNavList'
+
+const links = [
+  [
+    'Types of Cats',
+    ...Array(2).fill(
+      <a className="usa-footer__secondary-link" href="#">
+        Cheetah
+      </a>
+    ),
+  ],
+  [
+    'Musical Gifts',
+    ...Array(3).fill(
+      <a className="usa-footer__secondary-link" href="#">
+        Purple Rain
+      </a>
+    ),
+  ],
+]
+
+describe('FooterExtendedNavList component', () => {
+  it('renders without errors', () => {
+    const { container } = render(<FooterExtendedNavList nestedLinks={links} />)
+    expect(container.querySelector('ul')).toBeInTheDocument()
+  })
+
+  it('renders headings', () => {
+    const { container, getByText } = render(
+      <FooterExtendedNavList nestedLinks={links} />
+    )
+    expect(container.querySelectorAll('h4')).toHaveLength(2)
+    expect(getByText('Types of Cats')).toBeInTheDocument()
+    expect(getByText('Musical Gifts')).toBeInTheDocument()
+  })
+
+  it('renders links', () => {
+    const { container, getAllByText } = render(
+      <FooterExtendedNavList nestedLinks={links} />
+    )
+    expect(container.querySelectorAll('a')).toHaveLength(5)
+    expect(getAllByText('Purple Rain')).toHaveLength(3)
+    expect(getAllByText('Cheetah')).toHaveLength(2)
+  })
+
+  it('does not toggle section visiblity onClick in desktop view', () => {
+    const { getAllByText, getByText } = render(
+      <FooterExtendedNavList nestedLinks={links} />
+    )
+
+    fireEvent.click(getByText('Types of Cats'))
+    expect(getAllByText('Purple Rain')).toHaveLength(3)
+    expect(getAllByText('Cheetah')).toHaveLength(2)
+  })
+
+  describe('isMobile prop', () => {
+    it('renders mobile styles on all sections on initial load', () => {
+      const { container } = render(
+        <FooterExtendedNavList isMobile nestedLinks={links} />
+      )
+
+      const sections = container.querySelectorAll('section')
+      const elementsWithHiddenClass = container.querySelectorAll('.hidden')
+      expect(sections.length).toEqual(elementsWithHiddenClass.length)
+    })
+
+    it('renders headings', () => {
+      const { container, getByText } = render(
+        <FooterExtendedNavList isMobile nestedLinks={links} />
+      )
+      expect(container.querySelectorAll('h4')).toHaveLength(2)
+      expect(getByText('Types of Cats')).toBeInTheDocument()
+      expect(getByText('Musical Gifts')).toBeInTheDocument()
+    })
+
+    it('hides secondary links on initial load', () => {
+      const { getAllByText } = render(
+        <FooterExtendedNavList isMobile nestedLinks={links} />
+      )
+      expect(getAllByText('Cheetah')).not.toBeInTheDocument
+      expect(getAllByText('Purple Rain')).not.toBeInTheDocument
+    })
+
+    it('toggles section visibility onClick', () => {
+      const { getByText, getAllByText } = render(
+        <FooterExtendedNavList isMobile nestedLinks={links} />
+      )
+
+      fireEvent.click(getByText('Types of Cats'))
+
+      expect(getAllByText('Cheetah')).toHaveLength(2)
+      expect(getAllByText('Purple Rain')).not.toBeInTheDocument
+    })
+
+    it('toggles one section expanded at a time onClick', () => {
+      const { getAllByText, getByText } = render(
+        <FooterExtendedNavList isMobile nestedLinks={links} />
+      )
+
+      fireEvent.click(getByText('Types of Cats'))
+      fireEvent.click(getByText('Musical Gifts'))
+
+      expect(getAllByText('Purple Rain')).toBeInTheDocument
+      expect(getAllByText('Cheetah')).not.toBeInTheDocument
+    })
+
+    it('does not render mobile styles when isMobile is undefined in desktop view', () => {
+      // JSDOM window.innerWidth default is 1024
+      const { container } = render(
+        <FooterExtendedNavList nestedLinks={links} />
+      )
+
+      const elementsWithHiddenClass = container.querySelectorAll('.hidden')
+      expect(elementsWithHiddenClass.length).toEqual(0)
+    })
+
+    describe('when client window width is less than mobile threshold', () => {
+      beforeEach(() => {
+        // Mobile width is less than 480
+        //eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        //@ts-ignore
+        window.innerWidth = 479
+      })
+
+      afterEach(() => {
+        // Return to JSDOM default
+        //eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        //@ts-ignore
+        window.innerWidth = 1024
+      })
+
+      it('renders mobile styles if isMobile is undefined', () => {
+        const { container } = render(
+          <FooterExtendedNavList nestedLinks={links} />
+        )
+
+        const sections = container.querySelectorAll('section')
+        const elementsWithHiddenClass = container.querySelectorAll('.hidden')
+        expect(sections.length).toEqual(elementsWithHiddenClass.length)
+      })
+
+      it('does not render mobile styles when isMobile is false', () => {
+        const { container } = render(
+          <FooterExtendedNavList isMobile={false} nestedLinks={links} />
+        )
+
+        const elementsWithHiddenClass = container.querySelectorAll('.hidden')
+        expect(elementsWithHiddenClass.length).toEqual(0)
+      })
+    })
+  })
+})
diff --git a/src/components/Footer/FooterExtendedNavList/FooterExtendedNavList.tsx b/src/components/Footer/FooterExtendedNavList/FooterExtendedNavList.tsx
new file mode 100644
index 0000000000..7135129f9c
--- /dev/null
+++ b/src/components/Footer/FooterExtendedNavList/FooterExtendedNavList.tsx
@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react'
+import classnames from 'classnames'
+import { NavList } from '../../header/NavList/NavList'
+
+export type ExtendedNavLinksType = React.ReactNode[][]
+
+type FooterExtendedNavListProps = {
+  isMobile?: boolean
+  /* 
+    Turn on mobile styles via prop. If undefined, a fallback is used based on the client window width.
+  */
+  /* 
+    Multidimensional array of grouped nav links. Sub-arrays are column sections, first element is used as a heading.
+  */
+  nestedLinks: ExtendedNavLinksType
+}
+
+export const FooterExtendedNavList = ({
+  className,
+  isMobile,
+  nestedLinks,
+}: FooterExtendedNavListProps &
+  React.HTMLAttributes<HTMLElement>): React.ReactElement => {
+  const classes = classnames('grid-row grid-gap-4', className)
+  const isClient = window && typeof window === 'object'
+
+  const [isMobileFallback, setIsMobileFallback] = React.useState<boolean>(
+    isClient && window.innerWidth < 480
+  )
+  const [sectionsOpenState, setSectionsOpenState] = useState<boolean[]>(
+    Array(nestedLinks.length).fill(false)
+  )
+
+  // Use isMobile prop, fallback to calculated state if undefined
+  const useMobile = isMobile || (isMobile === undefined && isMobileFallback)
+
+  useEffect(() => {
+    if (isMobile) return
+
+    function handleResize(): void {
+      const updatedIsMobileFallback = isClient && window.innerWidth < 480
+      if (updatedIsMobileFallback !== isMobileFallback) {
+        setIsMobileFallback(updatedIsMobileFallback)
+      }
+    }
+
+    window.addEventListener('resize', handleResize)
+    return (): void => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  const onToggle = (index: number): void => {
+    setSectionsOpenState((prevIsOpen) => {
+      const newIsOpen = Array(nestedLinks.length).fill(false)
+      // eslint-disable-next-line security/detect-object-injection
+      newIsOpen[index] = !prevIsOpen[index]
+      return newIsOpen
+    })
+  }
+
+  return (
+    <div className={classes}>
+      {nestedLinks.map((links, i) => (
+        <div
+          key={`linkSection-${i}`}
+          className="mobile-lg:grid-col-6 desktop:grid-col-3">
+          <Section
+            onToggle={useMobile ? (): void => onToggle(i) : undefined}
+            // eslint-disable-next-line security/detect-object-injection
+            isOpen={useMobile ? sectionsOpenState[i] : true}
+            links={links}
+          />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+const Section = ({
+  isOpen = false,
+  links,
+  onToggle,
+}: {
+  isOpen: boolean
+  links: React.ReactNode[]
+  onToggle?: () => void
+}): React.ReactElement => {
+  const [primaryLinkOrHeading, ...secondaryLinks] = links
+  const classes = classnames(
+    'usa-footer__primary-content usa-footer__primary-content--collapsible',
+    { hidden: !isOpen }
+  )
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    <section className={classes} onClick={onToggle} onKeyPress={onToggle}>
+      <h4 className="usa-footer__primary-link">{primaryLinkOrHeading}</h4>
+      <NavList footerSecondary items={secondaryLinks} />
+    </section>
+  )
+}
diff --git a/src/components/Footer/FooterNav/FooterNav.stories.tsx b/src/components/Footer/FooterNav/FooterNav.stories.tsx
index 8f83a31849..628181aa64 100644
--- a/src/components/Footer/FooterNav/FooterNav.stories.tsx
+++ b/src/components/Footer/FooterNav/FooterNav.stories.tsx
@@ -1,6 +1,7 @@
 /*  eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react'
 
+import { Footer } from '../Footer/Footer'
 import { FooterNav } from './FooterNav'
 
 export default {
@@ -39,19 +40,50 @@ export const MediumFooterNav = (): React.ReactElement => (
 )
 
 export const BigFooterNav = (): React.ReactElement => (
-  <FooterNav
-    aria-label="Footer navigation"
+  <Footer
+    big
+    primary={
+      <FooterNav
+        aria-label="Footer navigation"
+        big
+        links={[
+          ['Topic', ...Array(3).fill(<a href="#">Secondary link</a>)],
+          [
+            'Topic',
+            <a key="2" href="#">
+              Secondary link that is pretty long
+            </a>,
+            ...Array(2).fill(<a href="#">Secondary link</a>),
+          ],
+          ['Topic', ...Array(3).fill(<a href="#">Secondary link</a>)],
+        ]}
+      />
+    }
+    secondary={<></>}
+  />
+)
+
+export const MobileBigFooterNav = (): React.ReactElement => (
+  <Footer
     big
-    links={[
-      ['Topic', ...Array(3).fill(<a href="#">Secondary link</a>)],
-      [
-        'Topic',
-        <a key="2" href="#">
-          Secondary link that is pretty long
-        </a>,
-        ...Array(2).fill(<a href="#">Secondary link</a>),
-      ],
-      ['Topic', ...Array(3).fill(<a href="#">Secondary link</a>)],
-    ]}
+    primary={
+      <FooterNav
+        aria-label="Footer navigation"
+        big
+        isMobile
+        links={[
+          ['Topic', ...Array(3).fill(<a href="#">Secondary link</a>)],
+          [
+            'Topic',
+            <a key="2" href="#">
+              Secondary link that is pretty long
+            </a>,
+            ...Array(2).fill(<a href="#">Secondary link</a>),
+          ],
+          ['Topic', ...Array(3).fill(<a href="#">Secondary link</a>)],
+        ]}
+      />
+    }
+    secondary={<></>}
   />
 )
diff --git a/src/components/Footer/FooterNav/FooterNav.test.tsx b/src/components/Footer/FooterNav/FooterNav.test.tsx
index 1d5d64f438..6dc851a878 100644
--- a/src/components/Footer/FooterNav/FooterNav.test.tsx
+++ b/src/components/Footer/FooterNav/FooterNav.test.tsx
@@ -48,13 +48,20 @@ describe('FooterNav component', () => {
     expect(getAllByText('Primary Link').length).toBe(4)
   })
 
-  it('renders extended links with "big" prop', () => {
-    const { container, getAllByText } = render(
+  it('renders extended link sections with "big" prop', () => {
+    const { container } = render(<FooterNav links={extendedLinks} big />)
+
+    expect(container.querySelectorAll('a').length).toBe(5)
+    expect(container.querySelectorAll('section').length).toBe(2)
+  })
+
+  it('renders list headings with "big" prop', () => {
+    const { container, getByText } = render(
       <FooterNav links={extendedLinks} big />
     )
-    expect(container.querySelectorAll('a').length).toBe(5)
-    expect(getAllByText('Purple Rain').length).toBe(3)
-    expect(getAllByText('Cheetah').length).toBe(2)
+    expect(container.querySelectorAll('h4').length).toBe(2)
+    expect(getByText('Types of Cats')).toBeInTheDocument()
+    expect(getByText('Musical Gifts')).toBeInTheDocument()
   })
 
   it('does not render extended nav links without "big" prop', () => {
diff --git a/src/components/Footer/FooterNav/FooterNav.tsx b/src/components/Footer/FooterNav/FooterNav.tsx
index 0ae871ea7f..16351c271c 100644
--- a/src/components/Footer/FooterNav/FooterNav.tsx
+++ b/src/components/Footer/FooterNav/FooterNav.tsx
@@ -1,24 +1,26 @@
 import React from 'react'
+import {
+  FooterExtendedNavList,
+  ExtendedNavLinksType,
+} from '../FooterExtendedNavList/FooterExtendedNavList'
 import classnames from 'classnames'
 
-type ExtendedNavLinks = [React.ReactNode[]]
+function isExtendedNavLinks(
+  links: React.ReactNode[] | ExtendedNavLinksType
+): links is ExtendedNavLinksType {
+  return (links as ExtendedNavLinksType)[0].constructor === Array
+}
 
 type FooterNavProps = {
   big?: boolean
   medium?: boolean
   slim?: boolean
+  isMobile?: boolean
   /* 
-    Union type. Array of navigation links or multidimensional array of ExtendedNavLinks.
-    ExtendedNavLinks are ordered sub arrays that will be displayed as columns, with the first element used as the section heading.
-    ExtendedNavLinks can only be used with "big" prop size
+    Array of navigation links. Displays in simple list or an extended list with columns.
+    FooterExtendedNavList can only be used with multidimensional array (ExtendedNavLinksType) and "big" prop size.
   */
-  links: React.ReactNode[] | ExtendedNavLinks
-}
-
-function isExtendedNavLinks(
-  links: React.ReactNode[] | ExtendedNavLinks
-): links is ExtendedNavLinks {
-  return (links as ExtendedNavLinks)[0].constructor === Array
+  links: React.ReactNode[] | ExtendedNavLinksType
 }
 
 export const FooterNav = ({
@@ -26,6 +28,7 @@ export const FooterNav = ({
   big,
   medium,
   slim,
+  isMobile,
   links,
   ...elementAttributes
 }: FooterNavProps & React.HTMLAttributes<HTMLElement>): React.ReactElement => {
@@ -41,7 +44,9 @@ export const FooterNav = ({
 
   return (
     <nav className={navClasses} {...elementAttributes}>
-      {big && isExtendedNavLinks(links) && <ExtendedNav nestedLinks={links} />}
+      {big && isExtendedNavLinks(links) && (
+        <FooterExtendedNavList isMobile={isMobile} nestedLinks={links} />
+      )}
 
       {!isExtendedNavLinks(links) && (
         <ul className="grid-row grid-gap">
@@ -55,43 +60,3 @@ export const FooterNav = ({
     </nav>
   )
 }
-
-const Section = ({
-  links,
-}: {
-  links: React.ReactNode[]
-}): React.ReactElement => {
-  const primaryLinkOrHeading = links[0]
-  const secondaryLinks = links.slice(1)
-
-  return (
-    <section className="usa-footer__primary-content usa-footer__primary-content--collapsible">
-      <h4 className="usa-footer__primary-link">{primaryLinkOrHeading}</h4>
-      <ul className="usa-list usa-list--unstyled">
-        {secondaryLinks.map((link, i) => (
-          <li key={`navLink-${i}`} className="usa-footer__secondary-link">
-            {link}
-          </li>
-        ))}
-      </ul>
-    </section>
-  )
-}
-
-const ExtendedNav = ({
-  nestedLinks,
-}: {
-  nestedLinks: ExtendedNavLinks
-}): React.ReactElement => {
-  return (
-    <div className="grid-row grid-gap-4">
-      {nestedLinks.map((links, i) => (
-        <div
-          key={`linkSection-${i}`}
-          className="mobile-lg:grid-col-6 desktop:grid-col-3">
-          <Section links={links} />
-        </div>
-      ))}
-    </div>
-  )
-}
diff --git a/src/components/header/NavList/NavList.tsx b/src/components/header/NavList/NavList.tsx
index b60ebf2778..68605cbcd1 100644
--- a/src/components/header/NavList/NavList.tsx
+++ b/src/components/header/NavList/NavList.tsx
@@ -7,6 +7,7 @@ interface NavListProps {
   secondary?: boolean
   subnav?: boolean
   megamenu?: boolean
+  footerSecondary?: boolean
 }
 
 export const NavList = (
@@ -18,6 +19,7 @@ export const NavList = (
     secondary,
     subnav,
     megamenu,
+    footerSecondary,
     className,
     ...ulProps
   } = props
@@ -28,6 +30,7 @@ export const NavList = (
       'usa-nav__secondary-links': secondary,
       'usa-nav__submenu': subnav,
       'usa-nav__submenu-list': megamenu,
+      'usa-list usa-list--unstyled': footerSecondary,
     },
     className
   )
@@ -36,6 +39,7 @@ export const NavList = (
     'usa-nav__primary-item': primary,
     'usa-nav__secondary-item': secondary,
     'usa-nav__submenu-item': subnav || megamenu,
+    'usa-footer__secondary-link': footerSecondary,
   })
 
   return (
diff --git a/src/index.ts b/src/index.ts
index 754aadcba8..fbd020f422 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -40,6 +40,7 @@ export { Title } from './components/header/Title/Title'
 /** Footer components */
 export { Address } from './components/Footer/Address/Address'
 export { Footer } from './components/Footer/Footer/Footer'
+export { FooterExtendedNavList } from './components/Footer/FooterExtendedNavList/FooterExtendedNavList'
 export { FooterNav } from './components/Footer/FooterNav/FooterNav'
 export { Logo } from './components/Footer/Logo/Logo'
 export { SocialLinks } from './components/Footer/SocialLinks/SocialLinks'