Building a Navigation Menu Using a Collection

Menu items are important for navigating through your site, but they can be a headache to build and maintain as they get more intricate. Luckily Butter has a powerful tool for easily creating menus and sub-menus that you can change on the fly! Here's how to build menus in Butter.

Step 1: Creating your Collections

Let's look at how we can create an actual menu that looks like this:

undefined

Here's the hierarchy of our menu:

  •  Solutions
    • Ecommerce
    • Agencies
    • SAAS
    • Marketplaces
  • Features
    • Flexible Content Modeling
      • Components
      • Page types
      • Collections
      • Blog Engine
      • Reference Fields
      • Repeater Fields
    • Fast Content Updates
      • SEO
      • Revision History
      • WYSIWYG
      • Content scheduling
      • Localization
      • Preview Changes
    • Media Library + Content CDN
      • Audio Support
      • Fast Tag
      • In-browser editing
      • CDN for assets
      • Images API
      • Image Editor
    • Multi-Sites and Environments
      • Multiple Websites
      • Multiple Environments
      • Data Migration
    • Developers
      • Content API
      • Globally Cached API and Content for performance, resiliency, and scalability
      • Write API
      • Developers Guide
      • SDK
    • Team Based
      • User Dashboard
      • Roles permissions
      • Workflows
  • Learn
    • Docs
    • Blogs
    • Knowledge Base
    • Butter vs WordPress
  • Pricing

In this example, we will be using Collections - which is a global piece of content. You can model them out in any way you want and give them their own custom set of fields. It has its own API key, which means you can also use it across all of your pages. Navigation menus are global items, so they are a great fit for Collections.

Let's get started! The first step is to start building the base configuration of this collection. Some important fields to add would be the "Menu Item Label" which is the display text, and the "URL Slug" which is what the item links to. You can add other fields to it should you wish, but make sure to include the ones I just mentioned.

Now that we've created the base configuration, we can save it and call it something like "Menu - First Level."

When you're happy with the base configuration for your first collection and you have saved it, repeat the same steps for each level of your menu. Remember to create one Collection for each level of your menu and sub-menu.

Step 2: Adding items to your Collection

To add an item to any Collection, just click on the New item (Collection Name) button.

Below is the interface where you can modify the content for each item in a Collection. As we said before, our Menu Item Label is the text to be shown on the menu, and the URL is the link it will follow. 

Step 3: Adding Reference Fields to your Collection's configuration

Reference Fields give you the option of easily making a menu with as many layers as you want. Now that we have created a Collection for each level of our menu and we have entered all the items for each Collection, let's go back to the configuration page of each Collection that requires a sub-menu, and add "Child Items" which is a Reference Field to other [sub]menu items.

For our example, we need to add a Child Items Reference Field that has a One-to-Many relationship so that we can link an item to multiple Child Items. We also want to make sure that it "references" the right collection.

undefined

Step 4: Linking items from one Collection to another

To choose the correct Child Items, all we have to do is click on the Add reference button then highlight all of the items we want to be in the sub-menu.

undefined

Collections are a powerful tool that Butter uses to help developers build great looking websites quickly. With a Collection item and a few reference fields, you can create menus as complex as you would like. The icing on the cake is these complex menus look however you want.

NOTE: For global API calls like for the header and footer, you can cache the response of those calls locally.  That will greatly help reduce the number of API calls to be made and improve response time.

Still have a question?

Our Customer Success team is standing by to help.