Navigation

The Dropdown Navigation and Popup Navigation Components are designed to be added to individual pages of the app to create the appearance of a stationary menu throughout the app. Both Components allow app end-users to easily access a list of linked pages, both inside and outside of an app. 

Ideas for Using Dropdown Navigation and Popup Navigation

• On a product page, use this Component to link to important Documents, such as a product manual, installation instructions, or specification documentation.
• Across several Pages use the Dropdown Navigation Component, in the same place, to create a consistent navigation experience that connects app users to further explore information. These can be linked to internal or external Pages.
• List amenities for app users visiting an office building, hospital, college campus, hotel or airport. Each item can then link to a document, internal or external Page.
• Whether highlighting a keynote speaker, company leader, or podcast host, use this Component to connect app users to more information about the person, such as their resume, and past or upcoming speaking engagements.

Dropdown Navigation Properties

The Dropdown component has the following properties:

• Component Id - Sets the name of the Dropdown component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.
  
  
  Pro Tip: It is a best practice to use only letters without spaces for the Component Id. Symbols, spaces, and numbers are not recommended.
• Initial Text - Text that is displayed before a menu item is selected. 
• Always Use Placeholder Text- Toggles on and off to use placeholder text. 

Styling

• Font Size (px) - Set the size of the font in pixels. 
• Bold Text - Toggles on or off to display the text as bold. Default is set to off. 
• Italic Text - Toggles on or off to display the text as italicized. Default is set to off. 
• Text Alignment - Sets the alignment for the text. Choose between Left, Right, and Center. 
• Background Color - Sets the color of the Background. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
• Text Color- Set the color of the text. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
• Border Color -  Sets the color of the Border There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
• Border Width - Sets the width of the Border between 1 and 5.
• Border Radius- Sets the radius of the border to create rounded edges between 1 and 20. Higher the number the more rounded the edges.
• Max Height of Dropdown - Enter the maximum height of the dropdown. 
• Current Page Bold - Toggles on or off to display the current page as bold. 
• Current Page Italics - Toggles on or off to display the current page as italicized. 
• Current Page Text Color - Sets the color of the current page's text. There are two ways to set the Current Page Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
• Menu Item Line - Toggles on or off to display the Menu Item Line. 
• Dropdown Setting - Select the dropdown settings. Choose between Auto, Always Down, or Always Up. 
• Expand Icon - Upload a .SVG to display for the individual Expand Icon. To remove an uploaded Image, click on the Trash Can. 
• Collapse Icon - Upload a .SVG to display for the individual Footer icon. To remove an uploaded Image, click on the Trash Can. 

Individual Menu Item Properties (Up to 10)

• Menu Item Text- Text to appear in Dropdown

• Link - Sets the link to another Page in the app or an external URL.

• Open Link in New Tab- Toggles on and off to open the link in a new tab. 
  
  
  Pro Tip: Type in tel:5558675309 to link to a phone number with "5558675309" replaced with the applicable 10-digit phone number or mailto:emailaddress to open up the default email client from the app with "emailaddress" replaced with the email address you want to be sent the email.

Popup Navigation Properties

The Popup Navigation component has the following properties:

• Component Id - Sets the name of the component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.
  
  
  Pro Tip: It is a best practice to use only letters without spaces for the Component Id. Symbols, spaces, and numbers are not recommended.
• Ok Text - Text that is displayed in the popup allowing users to follow the link selected 
• Cancel Text- Text that is displayed in the popup allowing users to cancel using the navigation and close the popup 
• Dropdown Initial Text - Text that is displayed at the header of the navigation

Individual Menu Item Properties (Up to 10)

• Menu Item Text- Text to appear in the popup

• Link - Sets the link to another Page in the app or an external URL.

• Open Link in New Tab- Toggles on and off to open the link in a new tab. 
  
  
  Pro Tip: Type in tel:5558675309 to link to a phone number with "5558675309" replaced with the applicable 10-digit phone number or mailto:emailaddress to open up the default email client from the app with "emailaddress" replaced with the email address you want to be sent the email.

Placement Settings

• Column Start - Sets the column where the Component will start. 
• Column Span - Sets how many columns the Component will span. 
• Padding - Sets how much space will appear on the top, bottom, left, and right of the Component. When building a Page with multiple Components, the Padding will determine the overall spacing between Components.
• Display Mode - Sets how the Component is displayed. If Both is selected, the Component will always show. Both are the default option. If Optimal is selected, the Component will only show if the browser supports the app. The main supported browsers are Chrome and Safari. If Degraded is selected, the Component will only show if the browser does not support the app. The main unsupported browser is Internet Explorer.