diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
index 678b721093..6811e3244b 100644
--- a/src/course-outline/CourseOutline.jsx
+++ b/src/course-outline/CourseOutline.jsx
@@ -1,6 +1,4 @@
-import {
-  React, useState, useEffect,
-} from 'react';
+import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
@@ -40,7 +38,9 @@ import EmptyPlaceholder from './empty-placeholder/EmptyPlaceholder';
 import PublishModal from './publish-modal/PublishModal';
 import ConfigureModal from './configure-modal/ConfigureModal';
 import DeleteModal from './delete-modal/DeleteModal';
-import { useCourseOutline } from './hooks';
+import {
+  useCourseOutline, useScrollToLocatorElement,
+} from './hooks';
 import messages from './messages';
 
 const CourseOutline = ({ courseId }) => {
@@ -88,6 +88,8 @@ const CourseOutline = ({ courseId }) => {
     handleDragNDrop,
   } = useCourseOutline({ courseId });
 
+  useScrollToLocatorElement({ isLoading });
+
   const [sections, setSections] = useState(sectionsList);
 
   const initialSections = [...sectionsList];
diff --git a/src/course-outline/CourseOutline.test.jsx b/src/course-outline/CourseOutline.test.jsx
index 0f4ee33e17..77d81fc9ce 100644
--- a/src/course-outline/CourseOutline.test.jsx
+++ b/src/course-outline/CourseOutline.test.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   act, render, waitFor, cleanup, fireEvent, within,
 } from '@testing-library/react';
@@ -46,6 +45,8 @@ let axiosMock;
 let store;
 const mockPathname = '/foo-bar';
 const courseId = '123';
+const locatorSectionName = 'Demo Course Overview';
+const locatorSectionId = 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction';
 
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
@@ -54,6 +55,7 @@ jest.mock('react-router-dom', () => ({
   useLocation: () => ({
     pathname: mockPathname,
   }),
+  useSearchParams: () => [new URLSearchParams({ show: locatorSectionId })],
 }));
 
 jest.mock('../help-urls/hooks', () => ({
@@ -380,6 +382,18 @@ describe('<CourseOutline />', () => {
     expect(await findAllByTestId('section-card')).toHaveLength(5);
   });
 
+  it('check correct scrolling to the locator section when URL has a "show" param', async () => {
+    const scrollIntoViewFn = jest.fn();
+    window.HTMLElement.prototype.scrollIntoView = scrollIntoViewFn;
+    const { getByText } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      expect(getByText(locatorSectionName)).toBeInTheDocument();
+      expect(scrollIntoViewFn).toHaveBeenCalled();
+      expect(scrollIntoViewFn).toHaveBeenCalledWith({'behavior': 'smooth'});
+    });
+  });
+
   it('check whether subsection is duplicated successfully', async () => {
     const { findAllByTestId } = render(<RootWrapper />);
     const section = courseOutlineIndexMock.courseStructure.childInfo.children[0];
diff --git a/src/course-outline/card-header/CardHeader.jsx b/src/course-outline/card-header/CardHeader.jsx
index 2c06e02220..76a2c22a02 100644
--- a/src/course-outline/card-header/CardHeader.jsx
+++ b/src/course-outline/card-header/CardHeader.jsx
@@ -27,6 +27,7 @@ import messages from './messages';
 const CardHeader = ({
   title,
   status,
+  sectionId,
   hasChanges,
   isExpanded,
   onClickPublish,
@@ -58,7 +59,11 @@ const CardHeader = ({
   });
 
   return (
-    <div className="item-card-header" data-testid={`${namePrefix}-card-header`}>
+    <div
+        className="item-card-header"
+        data-locator={sectionId}
+        data-testid={`${namePrefix}-card-header`}
+    >
       {isFormOpen ? (
         <Form.Group className="m-0">
           <Form.Control
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index ec361ce6ce..a3b0d2e4e7 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { useSearchParams } from 'react-router-dom';
 import { useToggle } from '@edx/paragon';
 
 import { RequestStatus } from '../data/constants';
@@ -211,5 +212,20 @@ const useCourseOutline = ({ courseId }) => {
   };
 };
 
-// eslint-disable-next-line import/prefer-default-export
-export { useCourseOutline };
+const useScrollToLocatorElement = ({ isLoading }) => {
+  const [searchParams] = useSearchParams();
+
+  useEffect(() => {
+    const locator = searchParams.get('show');
+    const locatorToShow = document.querySelector(`[data-locator="${locator}"]`);
+
+    if (locator && locatorToShow) {
+      locatorToShow.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [isLoading]);
+};
+
+export {
+  useCourseOutline,
+  useScrollToLocatorElement,
+};
diff --git a/src/course-outline/section-card/SectionCard.jsx b/src/course-outline/section-card/SectionCard.jsx
index 8b6730d37b..11d0315eac 100644
--- a/src/course-outline/section-card/SectionCard.jsx
+++ b/src/course-outline/section-card/SectionCard.jsx
@@ -122,7 +122,10 @@ const SectionCard = ({
           onClickDuplicate={onDuplicateSubmit}
           namePrefix="section"
         />
-        <div className="section-card__content" data-testid="section-card__content">
+        <div
+             className="section-card__content"
+             data-testid="section-card__content"
+        >
           <div className="outline-section__status">
             <Button
               className="section-card__highlights"
diff --git a/src/course-outline/subsection-card/SubsectionCard.jsx b/src/course-outline/subsection-card/SubsectionCard.jsx
index 2dbf1e5e01..80f3980536 100644
--- a/src/course-outline/subsection-card/SubsectionCard.jsx
+++ b/src/course-outline/subsection-card/SubsectionCard.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
+import { useSearchParams } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, useToggle } from '@edx/paragon';
 import { Add as IconAdd } from '@edx/paragon/icons';
@@ -24,7 +25,10 @@ const SubsectionCard = ({
   const currentRef = useRef(null);
   const intl = useIntl();
   const dispatch = useDispatch();
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [searchParams] = useSearchParams();
+  const locatorId = searchParams.get('show');
+  const isScrolledToElement = locatorId === subsection.id;
+  const [isExpanded, setIsExpanded] = useState(locatorId ? isScrolledToElement : false);
   const [isFormOpen, openForm, closeForm] = useToggle(false);
 
   const {
@@ -81,7 +85,12 @@ const SubsectionCard = ({
   }, [savingStatus]);
 
   return (
-    <div className="subsection-card" data-testid="subsection-card" ref={currentRef}>
+    <div
+        className="subsection-card"
+        data-locator={subsection.id}
+        data-testid="subsection-card"
+        ref={currentRef}
+    >
       <CardHeader
         title={displayName}
         status={subsectionStatus}
diff --git a/src/course-outline/subsection-card/SubsectionCard.test.jsx b/src/course-outline/subsection-card/SubsectionCard.test.jsx
index 080ae40da0..96451c5b08 100644
--- a/src/course-outline/subsection-card/SubsectionCard.test.jsx
+++ b/src/course-outline/subsection-card/SubsectionCard.test.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { MemoryRouter } from 'react-router-dom'
 import { render, fireEvent } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
@@ -38,25 +38,27 @@ const subsection = {
 
 const onEditSubectionSubmit = jest.fn();
 
-const renderComponent = (props) => render(
-  <AppProvider store={store}>
-    <IntlProvider locale="en">
-      <SubsectionCard
-        section={section}
-        subsection={subsection}
-        onOpenPublishModal={jest.fn()}
-        onOpenHighlightsModal={jest.fn()}
-        onOpenDeleteModal={jest.fn()}
-        onEditClick={jest.fn()}
-        savingStatus=""
-        onEditSubmit={onEditSubectionSubmit}
-        onDuplicateSubmit={jest.fn()}
-        namePrefix="subsection"
-        {...props}
-      >
-        <span>children</span>
-      </SubsectionCard>
-    </IntlProvider>,
+const renderComponent = (props, entry = '/' ) => render(
+  <AppProvider store={store} wrapWithRouter={false}>
+    <MemoryRouter initialEntries={[entry]}>
+      <IntlProvider locale="en">
+        <SubsectionCard
+            section={section}
+            subsection={subsection}
+            onOpenPublishModal={jest.fn()}
+            onOpenHighlightsModal={jest.fn()}
+            onOpenDeleteModal={jest.fn()}
+            onEditClick={jest.fn()}
+            savingStatus=""
+            onEditSubmit={onEditSubectionSubmit}
+            onDuplicateSubmit={jest.fn()}
+            namePrefix="subsection"
+            {...props}
+        >
+          <span>children</span>
+        </SubsectionCard>
+      </IntlProvider>
+    </MemoryRouter>
   </AppProvider>,
 );
 
@@ -122,4 +124,13 @@ describe('<SubsectionCard />', () => {
     fireEvent.keyDown(editField, { key: 'Enter', keyCode: 13 });
     expect(onEditSubectionSubmit).toHaveBeenCalled();
   });
+
+  it('check extended section when URL has a "show" param', async () => {
+    const { findByTestId } = renderComponent(null, `?show=${section.id}`);
+
+    const cardUnits = await findByTestId('subsection-card__units');
+    const newUnitButton = await findByTestId('new-unit-button');
+    expect(cardUnits).toBeInTheDocument();
+    expect(newUnitButton).toBeInTheDocument();
+  });
 });
diff --git a/src/course-unit/__mocks__/courseUnitIndex.js b/src/course-unit/__mocks__/courseUnitIndex.js
index 9d449c08f9..71fb8b1d04 100644
--- a/src/course-unit/__mocks__/courseUnitIndex.js
+++ b/src/course-unit/__mocks__/courseUnitIndex.js
@@ -912,7 +912,7 @@ module.exports = {
         },
       },
       {
-        id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations',
+        id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@graded_interactions',
         display_name: 'Example Week 1: Getting Started',
         category: 'chapter',
         has_children: true,
diff --git a/src/course-unit/breadcrumbs/Breadcrumbs.jsx b/src/course-unit/breadcrumbs/Breadcrumbs.jsx
index bc38088fe3..f786c5b2e9 100644
--- a/src/course-unit/breadcrumbs/Breadcrumbs.jsx
+++ b/src/course-unit/breadcrumbs/Breadcrumbs.jsx
@@ -14,14 +14,14 @@ import messages from './messages';
 const Breadcrumbs = ({ courseId }) => {
   const intl = useIntl();
   const { ancestorInfo } = useSelector(getCourseUnitData);
-  const { sectionsList } = useCourseOutline({ courseId });
+  const { sectionsList, isLoading: isLoadingCourseOutline } = useCourseOutline({ courseId });
   const activeCourseSectionInfo = sectionsList.find((block) => block.id === ancestorInfo?.ancestors[1]?.id);
 
   const breadcrumbs = {
     section: {
       id: ancestorInfo?.ancestors[1]?.id,
       displayName: ancestorInfo?.ancestors[1]?.displayName,
-      dropdownItems: sectionsList || [],
+      dropdownItems: sectionsList,
     },
     subsection: {
       id: ancestorInfo?.ancestors[0]?.id,
@@ -30,6 +30,12 @@ const Breadcrumbs = ({ courseId }) => {
     },
   };
 
+  const getLoadingPlaceholder = () => (
+    <div className="small px-3 py-2" role="status">
+      {intl.formatMessage(messages.loading)}
+    </div>
+  );
+
   return (
     <nav className="d-flex align-center mb-2.5">
       <ol className="p-0 m-0 d-flex align-center">
@@ -43,14 +49,18 @@ const Breadcrumbs = ({ courseId }) => {
               />
             </Dropdown.Toggle>
             <Dropdown.Menu>
-              {breadcrumbs.section.dropdownItems.map(({ studioUrl, displayName }) => (
-                <Dropdown.Item
-                  href={studioUrl}
-                  className="small"
-                >
-                  {displayName}
-                </Dropdown.Item>
-              ))}
+              {(isLoadingCourseOutline || !breadcrumbs.section.dropdownItems.length)
+                  ? getLoadingPlaceholder()
+                  : breadcrumbs.section.dropdownItems.map(({ id, studioUrl, displayName }) => (
+                      <Dropdown.Item
+                        key={id}
+                        href={studioUrl}
+                        className="small"
+                        data-testid="breadcrumbs-section-dropdown-item"
+                      >
+                        {displayName}
+                      </Dropdown.Item>
+                  ))}
             </Dropdown.Menu>
           </Dropdown>
           <Icon
@@ -70,14 +80,17 @@ const Breadcrumbs = ({ courseId }) => {
               />
             </Dropdown.Toggle>
             <Dropdown.Menu>
-              {breadcrumbs.subsection.dropdownItems.map(({ studioUrl, displayName }) => (
-                <Dropdown.Item
-                  href={studioUrl}
-                  className="small"
-                >
-                  {displayName}
-                </Dropdown.Item>
-              ))}
+              {(isLoadingCourseOutline || !breadcrumbs.subsection.dropdownItems.length)
+                  ? getLoadingPlaceholder()
+                  : breadcrumbs.subsection.dropdownItems.map(({ id, studioUrl, displayName }) => (
+                      <Dropdown.Item
+                        key={id}
+                        href={studioUrl}
+                        className="small"
+                        data-testid="breadcrumbs-subsection-dropdown-item"
+                      >
+                        {displayName}
+                      </Dropdown.Item>))}
             </Dropdown.Menu>
           </Dropdown>
         </li>
diff --git a/src/course-unit/breadcrumbs/Breadcrumbs.test.jsx b/src/course-unit/breadcrumbs/Breadcrumbs.test.jsx
new file mode 100644
index 0000000000..8b674a539f
--- /dev/null
+++ b/src/course-unit/breadcrumbs/Breadcrumbs.test.jsx
@@ -0,0 +1,110 @@
+import { render, waitFor, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import Breadcrumbs from './Breadcrumbs';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import initializeStore from "../../store";
+import MockAdapter from "axios-mock-adapter";
+import { getAuthenticatedHttpClient } from "@edx/frontend-platform/auth";
+import { getCourseOutlineIndexApiUrl } from "../../course-outline/data/api";
+import { courseOutlineIndexMock } from "../../course-outline/__mocks__";
+import { executeThunk } from "../../utils";
+import { fetchCourseOutlineIndexQuery } from "../../course-outline/data/thunk";
+import { getCourseUnitApiUrl } from "../data/api";
+import { courseUnitIndexMock } from "../__mocks__";
+import { fetchCourseUnitQuery } from "../data/thunk";
+
+let axiosMock;
+let store;
+const courseId = '123';
+const breadcrumbsExpected = {
+  section: {
+    id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations',
+    displayName: 'Example Week 1: Getting Started',
+  },
+  subsection: {
+    displayName: 'Lesson 1 - Getting Started',
+  },
+};
+
+const renderComponent = () => render(
+    <AppProvider store={store}>
+      <IntlProvider locale="en">
+        <Breadcrumbs courseId={courseId} />
+      </IntlProvider>
+    </AppProvider>,
+);
+
+describe('<Breadcrumbs />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+        .onGet(getCourseUnitApiUrl(courseId))
+        .reply(200, courseUnitIndexMock);
+    await executeThunk(fetchCourseUnitQuery(courseId), store.dispatch);
+  });
+
+  it('render Breadcrumbs component correctly', async () => {
+    const { getByText } = renderComponent();
+
+    await waitFor(() => {
+      expect(getByText(breadcrumbsExpected.section.displayName)).toBeInTheDocument();
+      expect(getByText(breadcrumbsExpected.subsection.displayName)).toBeInTheDocument();
+    });
+  });
+
+  it('render dropdown loading placeholder on pending', async () => {
+    const { getByText, queryAllByTestId, queryByText } = renderComponent();
+
+    await waitFor(() => {
+      expect(getByText(breadcrumbsExpected.section.displayName)).toBeInTheDocument();
+      expect(getByText(breadcrumbsExpected.subsection.displayName)).toBeInTheDocument();
+    });
+
+    const button = getByText(breadcrumbsExpected.section.displayName);
+    await act(async () => {
+      userEvent.click(button);
+    });
+
+    expect(queryAllByTestId('breadcrumbs-section-dropdown-item')).toHaveLength(0);
+    expect(getByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('render Breadcrumbs\'s dropdown menus correctly', async () => {
+    axiosMock
+        .onGet(getCourseOutlineIndexApiUrl(courseId))
+        .reply(200, courseOutlineIndexMock);
+    await executeThunk(fetchCourseOutlineIndexQuery(courseId), store.dispatch);
+    const { getByText, queryAllByTestId } = renderComponent();
+
+    expect(getByText(breadcrumbsExpected.section.displayName)).toBeInTheDocument();
+    expect(getByText(breadcrumbsExpected.subsection.displayName)).toBeInTheDocument();
+    expect(queryAllByTestId('breadcrumbs-section-dropdown-item')).toHaveLength(0);
+    expect(queryAllByTestId('breadcrumbs-subsection-dropdown-item')).toHaveLength(0);
+
+    const button = getByText(breadcrumbsExpected.section.displayName);
+    await act(async () => {
+      userEvent.click(button);
+    });
+
+    expect(queryAllByTestId('breadcrumbs-section-dropdown-item')).toHaveLength(4);
+
+    await act(async () => {
+      userEvent.click(getByText(breadcrumbsExpected.subsection.displayName));
+    });
+
+    expect(queryAllByTestId('breadcrumbs-subsection-dropdown-item')).toHaveLength(3);
+  });
+});
diff --git a/src/course-unit/breadcrumbs/messages.js b/src/course-unit/breadcrumbs/messages.js
index 1beb1c285b..189b6c0d3a 100644
--- a/src/course-unit/breadcrumbs/messages.js
+++ b/src/course-unit/breadcrumbs/messages.js
@@ -5,6 +5,11 @@ const messages = defineMessages({
     id: 'course-authoring.course-unit.heading.icon.chevron.alt',
     defaultMessage: 'Toggle dropdown menu',
   },
+  loading: {
+    id: 'course-authoring.course-unit.heading.breadcrumbs.loading',
+    defaultMessage: 'Loading...',
+    description: 'Message displayed while loading breadcrumbs content'
+  },
 });
 
 export default messages;