vf-core
vf-core copied to clipboard
visual-framework
VF Breadrumb update as per Intranet implementation
VF Breadcrumb component needs to be reviewed and changes need to be made as per the recent implementation in Intranet Possible changes :
- Remove restriction of 3 links
- Styling changes
- Responsive changes (Open seperate ticket if needed)
Edit ---------------------------------------------------------------------------------(Follow up tasks added)
Sequel to the discussion we had on Monday 15h April, Follow up tasks have been added for the breadcrumb updates
- [ ] #2009
- [ ] #2008
- [ ] #2010
Useful links:
- Slides on the breadcrumb's functionality and best practices
- Intranet design of the breadcrumbs in figma
Task
- Review changes that should be added in the vf-breadcrumb component
- Recommend updates
- Update the vf-breadcrumb in figma and html
- Update documentation if needed
- Check for accessibility and responsiveness
From the review of the breadcrumbs design during the Intranet project. The following changes should be made to improve the Vf-breadcrumbs
Component changes:
- Improve the target area for the breadcrumb
- Increase the spacing after the “>” symbol from 4px to 8px to avoid overlap of touch target areas for small words in the breadcrumb
- On mobile where a larger touch are is required 8px padding should be added above and below the breadcrumb to achieve a height of 44px which is recommended for mobile devices.
- Shorten breadcrumb trail on mobile to show only the parent page in the site architecture (Design of the breadcrumb trail showing the previous page)
Documentation updates
- Guidelines should be updated to showing the full navigation path on desktop ✔(This has been done)
- Usage guidelines for the responsive variant should be added
Design links for reference - Intranet project
Next steps
- Update design of the vf-breadcrumbs in figma and on the vf-site
- Develop responsive version of vf-breadcrumbs
- Add documentation for mobile responsiveness