Content imported from Github issue created by @Mike Schuck
Is your feature request related to a problem? Please describe
Currently in the Early Childhood Development System portal (Child Care Portal), there are a could different services (accessed through the sidenav) which feature breadcrumbing on their respective pages. Each breadcrumb patter is different. We will soon want all the services in this portal to utilize a consistent breadcrumb component/pattern.
Describe the solution you'd like
Would like to see a GoA breadcrumb component which can go down to at least 5 to 6 page levels
Works on desktop/tablet and mobile breakpoints
Is fully accessible
Accounts for position/padding in relation to page templates or this first item of content below the breadcrumb on a page
All states for the active links and active page in the breadcrumb
Some guidelines around breadcrumb label character length and recommended naming convention if possible (brevity and matching the page title and considerate of the url if possible)
Provide evidence this is a needed component
Currently 3 of 6 Child Care Services in the Early Childhood Development System portal utilize breadcrumbing and all use a different pattern treatment. All services in the portal will use breadcrumbing in early 2024. Consistency is key as this is a single portal for our external users.
Content imported from Github issue created by @Mike Schuck
Is your feature request related to a problem? Please describe
Currently in the Early Childhood Development System portal (Child Care Portal), there are a could different services (accessed through the sidenav) which feature breadcrumbing on their respective pages. Each breadcrumb patter is different. We will soon want all the services in this portal to utilize a consistent breadcrumb component/pattern.
Describe the solution you'd like
Would like to see a GoA breadcrumb component which can go down to at least 5 to 6 page levels
Works on desktop/tablet and mobile breakpoints
Is fully accessible
Accounts for position/padding in relation to page templates or this first item of content below the breadcrumb on a page
All states for the active links and active page in the breadcrumb
Some guidelines around breadcrumb label character length and recommended naming convention if possible (brevity and matching the page title and considerate of the url if possible)
Provide evidence this is a needed component
Currently 3 of 6 Child Care Services in the Early Childhood Development System portal utilize breadcrumbing and all use a different pattern treatment. All services in the portal will use breadcrumbing in early 2024. Consistency is key as this is a single portal for our external users.
The Design System team is already exploring breadcrumb component for their Design System website. https://www.figma.com/file/Vw1LNUBsNeFkToPTWqXAzR/Component---Breadcrumb?type=design&node-id=1401-3285&mode=design&t=7I1OkZM3WExILE2j-4
Describe alternatives you've considered
Good article which may provide helpful when mapping out the component and it's guidelines: https://www.smashingmagazine.com/2022/04/breadcrumbs-ux-design/
Do you have anything already created for this that we can use?
yes
Are you currently using this proposal inside your own service
yes
Are you able to assist to bring the feature to reality?
yes
Additional context
Here are some live breadcrumb examples from ECDS portal
Additional work done by Land Titles portfolio
Design
Design guidelines - Figma Development blueprint - Figma Service designer: @garnison-goa UX Designer: Elmira Roshani
Development
link to repo in govalta-emu: https://github.com/GovAlta-EMU/lto-web-portal Developer: @DarylChiew
Accessibility
Included in design guidelines in Figma. https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/