[FEATURE] Add breadcrumb navigation to documentation pages
- Dominant language
- TypeScript
- Stars
- 716
- Forks
- 1.2k
- Avg merge
- 1d 12h
- Merged PRs (30d)
- 35
Description
we currently have a deeply nested content hierarchy , lets take a rough example - `Docs → Tutorials → Getting Started → Request/Reply Pattern` , there is no breadcrumb trail to help understand where we are in that hierarchy.
This problem is mostly specifying for the mobile where the sidebar is completely collapsed behind a menu.
On desktop, the sidebar does provide a navigable tree .
But what if someone lands on a nested page from a search engine or a shared link sees only the article content with no indication of where they are in the docs structure.
Breadcrumbs are recognized as a accessibility pattern. For [ref](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/)
How will this change help?
On mobile, where the sidebar is hidden, breadcrumbs become the primary way for someone to see their current position and navigate upward through the docs hierarchy without opening the menu.
Even on desktop where the sidebar is visible, breadcrumbs provide a quick at a glance view of the current location and one click access to parent sections without scanning the sidebar tree.
The doc data already includes all the necessary hierarchy information , each page has its section title, section slug, and root section. The full navigation tree is pre-computed at build time. No changes to the build pipeline or data layer would be needed.
A trail would be placed above the page title on documentation pages something like this -
`Docs > Tutorials > Getting Started > Request/Reply Pattern`
Would make a pr if this get approved to be taken forward.
Contributor guide
Research direction
Start at the documentation page layout and inspect how the section title, section slug, root section, and precomputed navigation tree are exposed. Add a responsive ARIA breadcrumb trail above the page title with parent links and the current page, then verify nested pages on both mobile and desktop.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, tailwindcss, typescript
- Domain
- accessibility, documentation, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 64/100