[MCL-21] Breadcrumb navigation Created: 11/Dec/23 Updated: 11/Dec/23 |
|
| Status: | Open |
| Project: | Magnolia Component Library |
| Component/s: | Page Structure |
| Affects Version/s: | None |
| Fix Version/s: | None |
| Type: | Story | Priority: | Neutral |
| Reporter: | Raymond Tran | Assignee: | Unassigned |
| Resolution: | Unresolved | Votes: | 0 |
| Labels: | None | ||
| Remaining Estimate: | Not Specified | ||
| Time Spent: | Not Specified | ||
| Original Estimate: | Not Specified | ||
| Issue Links: |
|
||||||||||||
| Template: |
|
||||||||||||
| Acceptance criteria: |
Acceptance Criteria
[ ]*
Indicates the current page’s location within a navigational hierarchy
[ ]*
Parent pages should be rendered as clickable links
[ ]*
The links should be rendered as an ordered list of <a> elements
[ ]*
The links should be delimited by separators (configurable)
[ ]*
The active (current) navigation item is not clickable
[ ]*
Navigation items that have been visited already should show visited link colour
Documentation Acceptance Criteria
[ ]*
Contains Title, Description and Examples
[ ]*
Contains FTL and YAML code
Content Author Acceptance Criteria
[ ]*
The separator character can be configured (by default it is ">")
[ ]*
Class and CSS can be overridden in the dialog
[ ]*
Included as an area on a template e.g. /btk/includes/areas/breadcrumb.yaml
[ ]*
The component is hard-coded into the breadcrumb area template "btk/templates/areas/breadcrumb.ftl"
Accessibility Acceptance Criteria
[ ]*
Logical tab order should be maintained, ensuring that keyboard users navigate through the elements in a coherent sequence.
[ ]*
The Breadcrumb links can be selected using the tab key
[ ]*
The active (current) navigation item has aria-current="page" attribute indicating the current page
[ ]*
The navigation menu <nav> element contains aria-label="breadcrumb" to indicate the purpose of the navigation menu
[ ]*
A “skip to content” link should be available, permitting users to bypass the breadcrumb navigation if they don’t wish to interact with it.
|
||||||||||||
| Description |
User Story:As a content author, Bootstrap documentation: https://getbootstrap.com/docs/5.3/components/breadcrumb/ |