U02 Pinned Navigation

General Info

Pinned Navigation

Description

Available on Solution Guide template. Allows authors to provide navigation system for users linking to content in the solution guide or on other pages. 

Configuration Options:

Tab: Properties

  • Hide numbers in nav?: Hide chapter numbers when checked
  • Navigation items: 
    • Pinned navigation label (required) - Text. 
    • Link value - Text. Can be external URL, internal URL, or anchor tag.  
    • Open in new tab? - Checkbox.
    • Nav item icon - Dropdown (None - default, External Link)

Tab: Style

All color options in this tab can be selected with either: 
  1. __ Color- a dropdown of pre-selected theme colors
  2. __ Hex- a combination of color picker and hex value slider and text entry.

NOTE: For all color options in the Style tab, color values selected in the Color hex option will override any value in the Color dropdown. (eg, if Button Color is set to "F5 Red" and Button Color Hex is then set to #85144B, the Button will be set to #85144B.) [see Color settings]

 
  • Default colors: Section for defining default colors for navigation (not active nor hover)
    • Button color options: Assign the default background color of nav item (nav button)
      • Button Color
      • Button Color Hex
    • Number color options: Assign the default number color of nav item 
      • Number Color  
      • Number Color Hex  
    • Text color options: Assign the default color of the nav item title
      • Text Color
      • Text Color Hex  
  • Hover colors: Section for defining hover colors for navigation
    • Button color options: Assign the hover background color of nav item (nav button)
      • Button Color 
      • Button Color Hex
    • Number color options: Assign the hover number color of the nav item 
      • Number Color
      • Number Color Hex
    • Text color options: Assign the hover color of the nav item title
      • Text Color
      • Text Color Hex  
  • Active colors: Section for defining active colors for navigation 
    • Button color options: Assign the active background color of the nav item (nav button)
      • Button Color
      • Button Color hex
    • Number color options: Assign active number color of nav item 
      • Number Color 
      • Number Color Hex
    • Text color options: Assign the active color of the nav item title
      • Text Color 
      • Text Color Hex  

Tab: Analytics Tracking

Used for setting data-aa attribute for this component in the format: data-aa='{c:click,t:cta,n:start_trial,ct:bfsi_banking,jp:try}'. - docs

  • Campaign Track: dropdown with values loaded from here
  • Journey Phase: dropdown with  values loaded from here

 

Example Rendering

See pinned navigation above for most recent reference. Note screenshots included below as intent is to migrate the content to use the "Component detail template" in the near future and we might lose the sample here as the pinned nav is only available on the "Solution guide" template. 

The component is only available on solution guide pages as it has scroll pinning behavior.

  • As such screenshots are provided below.
  • To see the configuration dialog create a new solution guide template.
Desktop Top of Page
Desktop Middle of Page (Pinned to top of browser)
Mobile Top of Page
Mobile Open Middle of Page
Color settings
Example of changed default colors
Example of changed hover colors
Example of changed active colors