feat(docs-platform): Add dropdown caret to breadcrumbs in mobile

src/components/breadcrumbs/index.tsx

@@ -1,19 +1,65 @@
 'use client';
 
+import {ChevronDownIcon} from '@radix-ui/react-icons';
+import * as Popover from '@radix-ui/react-popover';
 import Link from 'next/link';
 import {useRouter} from 'next/navigation';
+import {useRef, useState} from 'react';
 
 import styles from './style.module.scss';
 
+export type BreadcrumbChildItem = {
+  title: string;
+  to: string;
+};
+
 export type BreadcrumbItem = {
   title: string;
   to: string;
+  children?: BreadcrumbChildItem[];
 };
 
 type BreadcrumbsProps = {
   items: BreadcrumbItem[];
 };
 
+function BreadcrumbDropdown({children}: {children: BreadcrumbChildItem[]}) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <button
+          ref={triggerRef}
+          className={styles['dropdown-trigger']}
+          aria-label="Show child pages"
+        >
+          <ChevronDownIcon />
+        </button>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          className={styles['dropdown-content']}
+          sideOffset={4}
+          align="start"
+          onOpenAutoFocus={e => e.preventDefault()}
+        >
+          <ul className={styles['dropdown-list']}>
+            {children.map(child => (
+              <li key={child.to} className={styles['dropdown-item']}>
+                <Link href={child.to} onClick={() => setOpen(false)}>
+                  {child.title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
 export function Breadcrumbs({items}: BreadcrumbsProps) {
   const router = useRouter();
 
@@ -26,7 +72,7 @@ export function Breadcrumbs({items}: BreadcrumbsProps) {
   };
 
   return (
-    <ul className="not-prose list-none flex flex-wrap" style={{margin: 0}}>
+    <ul className="not-prose list-none flex flex-wrap items-center" style={{margin: 0}}>
       {items.map(b => {
         const isPlatformsLink = b.to === '/platforms/';
         return (
@@ -38,6 +84,7 @@ export function Breadcrumbs({items}: BreadcrumbsProps) {
             ) : (
               <Link href={b.to}>{b.title}</Link>
             )}
+            {b.children && <BreadcrumbDropdown>{b.children}</BreadcrumbDropdown>}
           </li>
         );
       })}

src/components/breadcrumbs/style.module.scss

@@ -4,6 +4,8 @@
   margin-top: 0;
   text-wrap: nowrap;
   padding: 0;
+  display: flex;
+  align-items: center;
 
   a {
     text-decoration: none;
@@ -23,3 +25,106 @@
   margin-right: 6px;
   color: var(--foreground-secondary);
 }
+
+.dropdown-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  margin-left: 1px;
+  border-radius: 3px;
+  color: var(--foreground-secondary);
+  transition: color 0.15s ease, background-color 0.15s ease;
+  line-height: 1;
+
+  &:hover {
+    color: var(--accent-purple);
+    background-color: var(--gray-3);
+  }
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.dropdown-content {
+  font-family: var(--font-rubik);
+  box-sizing: border-box;
+  min-width: 200px;
+  max-width: 320px;
+  max-height: 60vh;
+  overflow-y: auto;
+  background-color: var(--gray-1, white);
+  border-radius: 8px;
+  padding: 6px;
+  box-shadow: var(--shadow-6);
+  z-index: 50;
+  animation-duration: 200ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+
+  &[data-side='bottom'] {
+    animation-name: dropdownSlideUp;
+  }
+  &[data-side='top'] {
+    animation-name: dropdownSlideDown;
+  }
+}
+
+:global(.dark) .dropdown-content {
+  background-color: var(--gray-2);
+}
+
+.dropdown-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.dropdown-item {
+  margin: 0;
+  padding: 0;
+
+  a {
+    display: block;
+    padding: 8px 12px;
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--foreground-primary);
+    text-decoration: none;
+    border-radius: 4px;
+    transition: background-color 0.1s ease;
+    line-height: 1.4;
+
+    &:hover {
+      background-color: var(--gray-3);
+      color: var(--accent-purple);
+      text-decoration: none;
+    }
+  }
+}
+
+@keyframes dropdownSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes dropdownSlideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/components/breadcrumbs/utils.ts

@@ -1,6 +1,26 @@
 import {DocNode} from 'sentry-docs/docTree';
+import {isVersioned} from 'sentry-docs/versioning';
 
-import {BreadcrumbItem} from './index';
+import {BreadcrumbChildItem,BreadcrumbItem} from './index';
+
+function getVisibleChildren(node: DocNode): BreadcrumbChildItem[] {
+  return node.children
+    .filter(
+      child =>
+        (child.frontmatter.sidebar_title || child.frontmatter.title) &&
+        !child.frontmatter.sidebar_hidden &&
+        !child.frontmatter.draft &&
+        child.path &&
+        !isVersioned(child.path)
+    )
+    .sort(
+      (a, b) => (a.frontmatter.sidebar_order ?? 10) - (b.frontmatter.sidebar_order ?? 10)
+    )
+    .map(child => ({
+      title: child.frontmatter.sidebar_title ?? child.frontmatter.title,
+      to: `/${child.path}/`,
+    }));
+}
 
 // Helper function to build breadcrumbs from DocNode (for use in server components)
 export function buildBreadcrumbs(leafNode: DocNode | undefined): BreadcrumbItem[] {
@@ -10,10 +30,12 @@ export function buildBreadcrumbs(leafNode: DocNode | undefined): BreadcrumbItem[
     if (node && !node.missing) {
       const to = node.path === '/' ? node.path : `/${node.path}/`;
       const title = node.frontmatter.sidebar_title ?? node.frontmatter.title;
+      const children = getVisibleChildren(node);
 
       breadcrumbs.unshift({
         to,
         title,
+        children: children.length > 0 ? children : undefined,
       });
     }
   }