feat(#3589): add breadcrumb navigation to docs website#3590
Open
feat(#3589): add breadcrumb navigation to docs website#3590
Conversation
Add Breadcrumbs component that derives navigation trail from URL path. Integrated into DocumentationPageLayout, TokensLayout, ExamplesPageLayout, and component page templates (inside each page's centering container to handle different max-widths). Replaces category badge on component pages and "Back to all examples" link on example pages. Component pages show their category in the breadcrumb trail with a link to the All Components page filtered by that category. ComponentsGrid now reads ?category= URL params to support this. Keyboard-only focus styles, visually-hidden current page for screen readers (aria-current="page").
twjeffery
force-pushed
the
tom/breadcrumbs
branch
from
0032c96 to
49cad8c
Compare
twjeffery
changed the title
✅ Deploy Preview for goa-design-2 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #3589
Approach
Built as an Astro component first for our docs site as a proof of concept. We can learn from this before designing a shared Svelte breadcrumb component for the UI component library.
File-by-file walkthrough
Breadcrumbs.astro (new, 142 lines)
The core component. Derives the breadcrumb trail from the URL path automatically. Each segment gets a label from a lookup map (or falls back to formatting the slug). Always shows at least the section name. Has an optional
parentGroupprop for when the logical hierarchy isn't in the URL (only used by component pages for the category). Current page is visually hidden but available to screen readers viaaria-current="page". Uses design tokens for all styling, focus-visible for keyboard-only focus rings.ComponentsGrid.tsx (+16 lines)
Adds URL param reading on mount so
?category=inputs-and-actionspre-filters the grid. This is what makes the breadcrumb category link work. Same pattern ExamplesGrid already uses.DocumentationPageLayout.astro (+10 lines)
Adds breadcrumbs inside the content card.
breadcrumb-rowhas a 960px max-width to match the content grid centering.ExamplesPageLayout.astro (+9 lines)
Same as above but 1408px max-width to match the examples content area.
TokensLayout.astro (+9 lines)
Same as above, 1408px max-width.
components/[slug].astro (+5/-4 lines)
Passes the component's category as
parentGroupwith a link to/components?category=.... Removes the old category badge that was above the title (breadcrumbs replace that context).components/index.astro (+2 lines)
Adds breadcrumbs to the All Components page.
examples/[slug].astro (-10 lines)
Removes the "Back to all examples" link and its CSS. Breadcrumbs in the layout handle this navigation now.
Test plan