Gatsby-Config.js

Site metadata is set via the gatsby-config.js file. Specifically the navigation menu, social links menu, author name, site title, etc. The starter sites come with some pre-configured options you can modify. Most of these are fairly standard and where possible I have included inline comments in the starters to help explain.

Menu Links

The menuLinks array is fairly common in Gatsby sites with the addition of one field, location. locationcontrols the location of the links on either the left or the right side. At present the location field is only supported bygatsby-theme-catalyst-header-top` as this allows you to “split” your links putting some links beside the logo and other links on the far side of the menu as is common in e-commerce sites with carts. If the location field is omitted it defaults to right.

Example Config:

menuLinks: [
  {
    name: `Page 1`,
    link: `/page-1`,
    location: `left`,
  },
  {
    name: `Anchor 1`,
    link: `#anchor-1`,
    location: `right`,
  },
]

You can also have a sub-menu or dropdown menu. You can see an example of this with gatsby-starter-catalyst.

Example Config:

menuLinks: [
  {
    name: `Page 1`,
    link: `/page-1`, // Doesn't actually link, uses a toggle
    subMenu: [
      {
        name: `Sub 1`,
        link: `/sub-1`,
      },
      {
        name: `Sub 2`,
        link: `/sub-2`,
      },
    ],
  },
]

Social Links

The socialLinks array is a bit more uncommon. You can specify a social media provider such as Twitter and also three different locations in the settings, header, footer, and all which will locate the icons appropriately. It will work with all major social platforms and has a fallback for displaying the text if a logo isn’t found.

Example Config:

socialLinks: [
      {
        name: `Email`,
        link: `eric@erichowey.dev`,
        location: `footer`, //Options are "all", "header", "footer"
      },
      {
        name: `Github`,
        link: `https://www.github.com/ehowey`,
        location: `all`, //Options are "all", "header", "footer"
      },
      {
        name: `Twitter`,
        link: `https://www.twitter.com/erchwy`,
        location: `header`, //Options are "all", "header", "footer"
      },
    ],