As a Non-technical user I want additional flexibility to visually create and style Navigations

• Type: Epic
• Status: Closed
• Priority: Major
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: None
• Component/s: Out of the box Fragments > Navigation Menu
• Labels:
  • 7.4-ce-ga2
  • Experience_Led_Commerce
  • d_20_09
  • d_20_11
  • d_20_12
  • fc_20_09
  • fc_20_10
  • fc_20_11
  • fc_20_12
  • fc_21_02
  • fc_21_03
  • fc_21_04
• Epic/Theme:
  • Category_based_Navigation_and_Pages
• Epic Status: To Do

Intro/Context:

Currently the way to display a NavMenu can be done using menu display fragment or the menu navigation display. But modern menus are more and more customised with a unique combination of items mixing text, images, and collections. We have previously delivered fragment composition and drop zones and would like to offer users the possibility to re-use these functions to create tailor made mega-menus.

The goal with this feature is to bring more flexibility to page creators (e.g. Marketers and Designers) to define individual custom menus items that include dropdown as a drop zone so that composition fragments capability could be leveraged. 

Potential stories/capabilities:

• function 1: Basic "menu display" fragment
  • selection of Navigation Menu
  • selection of menu levels
  • ability to apply a template like Collection Display
    • Menu Style: vertical, horizontal, etc.
    • Menu items Style: ... 
  • ability to style directly : impossible/complicate due to sub-levels
  • Remove "category selection" for the moment
  • Ability to support Icon instead of Text juan.anton 
• function 2: Ability to configure the "dropdown" fragment behaviour:
  • Ability to edit text of menu item of the dropdown
  • Show/hide dropdown panel (if selected)
    • Shouldn't we show/hide the panel when DropDown is selected ? juan.anton
  • Ability to add fragments (including "menu display") in the DropZone
  • Dropdown panel style (full width, or Regular)
• function 3: Navigation Bar component similar to :
  • Container for responsive behaviour from bootstrap to place thing like
    • ex: Logo, MenuDisplay, DropDown, SignIn...
  • Use the story for adding fragments to the left/right of other fragment and leverage Flex options
  • Add Sticky NavBar options.
• function 5: Search pages and link (fragment that we can: duplicate / delete)
  • Ability to search "pages" and "link to page" visually with Target: _blank
• function 6: Ability to define "drop down" fragment behaviour
  • Dropdown Open/Close special effects
  • Hovering option to expand sub-menu on hovering or not

Figma Mockup