Go back to all modules
 

 
Switch to:
 
 

Module [830] - how to use and variations

This module defines the navigation for multiple pages in a page group.  It is only required when multiple pages are being grouped with a tabbed navigation control.  
The navigation module allows 2 levels of expansion.  From the primary display, each option can be a dropdown of links or a direct link.  Within the dropdown, again, each option can be either a direct link or trigger a submenu which currently appears to the side on hover.  This behavior can be achieved through nesting components as follows:


  • The Parent 830 will define the primary navigation bar.
  • If the displayed item is to be a direct link, an External Link component should be provided.
  • If the displayed item is to trigger a submenu of options, an 830 Flex v2.0 – Generic Module component should be provided.
  • Only the parent item needs to be published, and will need to be published in the event of an update to the parent or any of the child modules

Schema fields used assuming 2 levels expansion:


Parent:

- List of Links (supports 'External Link') 


Child:

- Title or Header1 (supports 'Text or HTML Block' or 'External Link'; used for the link or grouping of links when presented in the parent menu)

- See all Link (optional; supports 'External Link'; if provided will appear in bold at the top of the list and in this case the button behavior will be ignored)

- List of Links (supports 'External Link' or '[927] Dynamic Query Results - Navigational Link List' 2; show the links to appear in the drop down menu)

- Attributes: 

    * Child Width
    * Transition ( to be applied to children)
    * Text Alignment
    * Background Color


Note: 

1 If the title that triggers a submenu should be text only, a 'Text or HTML Block' component should be provided. If it should be clickable to an URL, then an External Link component can be provided within the title field and it will become clickable to the URL referenced in the External Link component. 

2 If [927] embedded to be dynamically generated based on search criteria and displayed within the menu, the module can be embedded in the appropriate location (see notes on [927] module)

Main variations of module [830]:

 

Notice the replacement of the page navigation specific for this example. It contains a combination of elements nested in a [830] parent module as follows, from left to right: 


• First navigation element: An 'External Link' as it has no drop-down


• Second navigation element (with drop-down): a [830] child module with 

- Title as 'External Link' to appear at the top of the drop-down (ie: "L1 Menu: w/ dropdown")

- List of Links nesting another [830] child module, to enable the fly-out. This nested [830] child module has the same fields set: Title (ie: "L2 Menu: with flyout") & List of Links ("L3 Menu: Flyout link").

- See All Link as 'External Link' to appear in bold at the top of the drop-down (ie: "L1 Menu: See All Link")


•  Third navigation element (with drop-down): a [830] child module with

- Title as 'Text of HTML Block' to appear at the top of the drop-down (ie: "L1 Menu: Text only")

- List of Links nesting 2 x [830] child modules, to enable the fly-out, each with: Title (ie: "L2 Menu: with flyout") & List of Links ("L3 Menu: Flyout link").