diff --git a/src/courseware/course/CourseBreadcrumbs.jsx b/src/courseware/course/CourseBreadcrumbs.jsx
index 0a1e73493d..3eb0023fba 100644
--- a/src/courseware/course/CourseBreadcrumbs.jsx
+++ b/src/courseware/course/CourseBreadcrumbs.jsx
@@ -20,12 +20,7 @@ const CourseBreadcrumb = ({
         <li className="col-auto p-0 mx-2 text-primary-500 text-truncate text-nowrap" role="presentation" aria-hidden>/</li>
       )}
 
-      <li style={{
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-      }}
-      >
+      <li className="reactive-crumbs">
         { getConfig().ENABLE_JUMPNAV !== 'true' || content.length < 2 || !isStaff
           ? (
             <Link
diff --git a/src/index.scss b/src/index.scss
index b91dfa05f0..eab6bd2254 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -356,6 +356,18 @@
   }
 }
 
+.reactive-crumbs {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  &:hover,
+  &:focus,
+  &:focus-within,
+  &:active {
+    overflow: visible;
+  }
+}
+
 .raised-card {
   border: 0 !important;
   box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .2) !important;