[537] Add breadcrumbs implementation#83
Conversation
📝 WalkthroughWalkthroughBreadcrumb navigation functionality was introduced to the website. This involved adding a new SCSS stylesheet for breadcrumb styling, creating a Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant LayoutTemplate
participant BreadcrumbsFragment
User->>LayoutTemplate: Request page
LayoutTemplate->>BreadcrumbsFragment: Render breadcrumbs
BreadcrumbsFragment->>BreadcrumbsFragment: Determine breadcrumb items (home, ancestors, current page, piece)
BreadcrumbsFragment-->>LayoutTemplate: Return breadcrumb HTML
LayoutTemplate-->>User: Return full page with breadcrumbs
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
🔍 Vulnerabilities of
|
| digest | sha256:df62af6d0d6f7369351e299181e62cd77a5503909b6d2113ab2a8273d1c563e6 |
| vulnerabilities |     |
| platform | linux/amd64 |
| size | 284 MB |
| packages | 934 |
📦 Base Image node:23-alpine
| also known as |
|
| digest | sha256:0d468be7d2997dd2f6a3cda45e121a6b5140eb7ba3eba299a215030dbb0fb1ca |
| vulnerabilities |  |
Description
| ||||||||||||
Description
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
website/views/layout.html (1)
13-13: Breadcrumb placement may misalign with content grid
You’ve renderedfragments.breadcrumbs()immediately after the header, outside of the<div class="sf-container">wrapper. Since the.breadcrumbstyles assume container-level padding and max-width, the trail may sit flush with the viewport rather than aligning with your page content.
Consider moving:{% render fragments.breadcrumbs() %}inside the existing
<div class="sf-container">within<main>, or wrapping it in a new.sf-container, to ensure consistent horizontal alignment.website/modules/asset/ui/src/scss/_base.scss (1)
119-162: Constrain breadcrumb width and alignment
The current.breadcrumbselector uses left offsets but the markup sits outside your main container. To mirror the.sf-containerlayout and gutters, you can constrain its maximum width and center it:.breadcrumb { font-weight: $font-weight-medium; font-size: $font-size-body-small-mobile; line-height: 150%; - margin-left: 40px; + max-width: $breakpoint-extra-extra-large; + margin: 0 auto; + padding: 0 40px; color: $black; @include breakpoint-extra-extra-large { - margin-left: 120px; + padding: 0 120px; } }This adjustment ensures your breadcrumb bar stays aligned with the rest of the page grid.
website/views/fragments/fragments.html (1)
24-27: Addaria-currentto the current breadcrumb item
For better screen-reader support, mark the current page in the trail witharia-current="page", for example:-<li class="breadcrumb-item breadcrumb-item-current"> +<li class="breadcrumb-item breadcrumb-item-current" aria-current="page">This explicitly tells assistive technologies which item represents the current location.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
website/modules/asset/ui/src/scss/_base.scss(1 hunks)website/views/fragments/fragments.html(1 hunks)website/views/layout.html(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: sonarqube
- GitHub Check: e2e-tests
- GitHub Check: security-scan
killev
left a comment
killev
left a comment
There was a problem hiding this comment.
@IhorMasechko please update PR description. try using cursor rule.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
website/views/fragments/fragments.html (1)
24-54: Consider adding unit/integration tests for breadcrumb rendering
There are currently no automated tests covering the breadcrumb fragment. I recommend adding tests to verify output for these scenarios:
- Home page only (
S&F Home)- Nested page without a
data.piece- Nested page with a
data.piece
This will help catch regressions and ensure consistency across page types.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
website/views/fragments/fragments.html(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: sonarqube
- GitHub Check: e2e-tests
- GitHub Check: security-scan
🔇 Additional comments (1)
website/views/fragments/fragments.html (1)
24-27: Breadcrumb fragment structure is well-implemented
The newbreadcrumbsfragment uses semantic HTML elements (<nav>,<ol>,<li>) with ARIA labeling and dynamic ancestor loops, aligning well with accessibility and maintainability goals.
|
4 participants
Uh oh!
There was an error while loading. Please reload this page.