[MCL-23] 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 | ||
| Attachments: |
|
||||||||
| Issue Links: |
|
||||||||
| Template: |
|
||||||||
| Acceptance criteria: |
Acceptance Criteria
[ ]*
Component is called "Navigation"
[ ]*
Current page, if shown in the nav menu is highlighted but is disabled and cannot be clicked
[ ]*
Supports generated nav up to 3 levels shown side by side as dropdown menus
[ ]*
The side-by-side menus collapse depending on the current device breakpoint (they don't run off the screen)
[ ]*
Supports configured nav via a Navigation Content App
[ ]*
The links should be rendered as an unordered list of <a> elements
[ ]*
The side-by-side menus are triggered when the link is clicked
[ ]*
Has an additional promo area beside the menus that allows an image, rich text or Teaser component to be added (not shown on Mobile menu)
[ ]*
Has navbar toggler button that expands and collapses the navigation menu on the S breakpoints and below
[ ]*
Does not show pages that have "Do not show in navigation" enabled in page properties
Documentation Acceptance Criteria
[ ]*
Contains Title, Description and Examples
[ ]*
Contains FTL and YAML code
Content Author Acceptance Criteria
[ ]*
The component is hard-coded into the nav area template "btk/templates/areas/nav.ftl"
[ ]*
By selecting a checkbox on the home item, Content Author can choose whether the menu is generated or configured via Content App
[ ]*
The Navigation Content App provides a feature to generate the hierarchy based on the structure of the site in the Pages App
[ ]*
A navigation link's title and target can be configured
[ ]*
A navigation link can be configured to point to an external link.
[ ]*
The navigation bar can be hidden using a checkbox on the page properties.
[ ]*
Content author can configure site logo, menu font colour and style
Accessibility Acceptance Criteria
[ ]*
Logical tab order should be maintained, ensuring that keyboard users navigate through the elements in a coherent sequence.
[ ]*
The navbar toggler <nav> element contains aria-label="Toggle navigation" and aria-expanded="true" or aria-expanded="false" to indicate whether the navigation has been expanded
[ ]*
The menu can be selected using the tab key
[ ]*
The current page navigation link should contain aria-current="page" attribute
[ ]*
Cursor keys and return key can be used to select the desired menu item
[ ]*
A “skip to content” link should be available, permitting users to bypass the navigation menu if they don’t wish to interact with it.
|
||||||||
| Description |
User Story:As a content author, Description Exists in BTK as an area template at btk/templates/areas/nav.ftl Bootstrap documentation: https://getbootstrap.com/docs/5.3/components/navbar/ |