diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index f225304b..f9ca259d 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -45,7 +45,7 @@ export function Nav({
 
 export function Sidebar() {
   return (
-    <nav className="mobile-hidden">
+    <nav className="sidebar-nav mobile-hidden">
       <a href="/#examples" onClick={() => Swal.close()}>
         <span>Examples</span>
       </a>
diff --git a/styles/styles.scss b/styles/styles.scss
index 9da23a66..ffdfe039 100644
--- a/styles/styles.scss
+++ b/styles/styles.scss
@@ -57,7 +57,9 @@ button {
     sans-serif;
 }
 
-nav {
+// Scoped to the sidebar explicitly. As a bare `nav` selector this styled
+// every <nav> on the page, including the breadcrumb trail.
+.sidebar-nav {
   display: flex;
   position: fixed;
   z-index: 1;
@@ -149,7 +151,7 @@ nav {
     margin: 0 2em 0 0;
   }
 
-  nav {
+  .sidebar-nav {
     display: block !important;
     position: initial;
     font-size: 16px;