Link Object

Link Object

A link object is a simple object with 2 required properties and an optional one that depends on its usage.

Properties

• text: This is what the link will read as, for eg. 'Home'.
• href: This is the URL the link will navigate to. For pages on the Values Footprint website, you will only need to include the name of the page, eg. /home or /test. Important Note: For URLs outside of Values Footprint to work, you must make sure they're complete, eg. 'http://www.facebook.com/valuesfootprint'.
• FAClasses: This is only used in the contact section and the social media section of the footer. This is a list of font awesome classnames to include. Font awesome is a great tool that allows us to use a ton of icons easily by just stating their name. We always need to include 'fa', then we can include the name of the icon, for eg. 'fa-facebook' will show the facebook icon. A full list of font awesome icons can be found here.
• classes: This is used in the nav to assign styling classes to links. A class of 'scroll' is needed for 'anchor' type nav links that scroll to a section on the page.
• type: This is used in the nav. Can either be 'anchor' or 'link'. 'anchor' is used for hash links eg. '#footer', so that they can scroll to a certain section of the page. 'link' is used for navigating to different pages on the website.
• showOn: Only used for the Nav. This is a list of locations/pages where the nav link will exclusively appear. This is useful for links that scroll to a certain section of a particular page eg. the home page's About link that scrolls to the about section. This link won't work if you click it while you're in /Test for example so it's useful to only show it while on '/' and '/home' both mean the user is on the home page.

Examples

Nav Link (anchor)

{
  text: 'Contact',
  href: '#footer',
  type: 'anchor',
  classes: [
    'scroll'
  ]
}

Footer Link (social)

{
  text: 'Facebook',
  href: 'http://www.facebook.com/valuesfootprint',
  FAClasses: [
    'fa',
    'fa-facebook'
  ]
}