asyncapi / asyncapi/website

[FEATURE] Add breadcrumb navigation to documentation pages

Open
#5,109 4 comments 0 reactions 0 assignees View on GitHub
stale
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.