[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: PNG File screenshot-1.png    
Issue Links:
Cloners
clones MCL-22 Language selector Open
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,
I want to create a navigation menu
So that my site visitors can select the page they want to view.

Description

Exists in BTK as an area template at btk/templates/areas/nav.ftl

Bootstrap documentation:

https://getbootstrap.com/docs/5.3/components/navbar/


Generated at Mon Feb 12 04:48:47 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.