The BentoBox2 Developer Hub

Welcome to the BentoBox2 developer hub. You'll find comprehensive guides and documentation to help you start working with BentoBox2 as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    Developer Documentation


A Navigation (Nav) is a set of pages or links that define the general architecture of the site, and can be integrated with Wireframes for a convenient interface to update content. Navs appear in the “Pages/Nav” section of the CMS administrator's panel.

Navs should be the first thing you create in your theme

In order to manage content on a BentoBox site, the first thing you need to do is create "navs" in your theme, and create navigation items for any pages.

Each navigation in BentoBox is created in your theme's config.json file. See the sample config.json file below for an example of a simple site with just two navigations. The reasoning behind this is that the theme should dictate which navigations are available since it is responsible for displaying them.

    "theme": {
        "name": "Broth (Boilerplate theme)",
        "author": "The BentoBox Team",
    "navs": [
        "name": "Main Navigation",
        "slug": "main"
        "name": "Footer",
        "slug": "footer"

A Nav is an object within the “navs” array that requires “name” and “slug” keys.

Nav Items

New Nav Items can be added, removed, and edited through the plus, minus, and edit buttons that appear when mousing over a Nav in the CMS, respectively.

The Add Nav Item modal interface

The Add Nav Item modal interface

Each Nav Item is associated with one Nav. Nav Items come in three types:

Page: Pages consist of two configurations.
There are standard pages, that are navigation items that refers to a Template.
Learn more about Template Basics
There are single box pages, which function as a link to a specific piece of content through a specific Box. These appear prepended with "Single Box: ".
Learn more about Boxes

Box List: A box list functions as a set of links to all the Boxes of of a certain type (Engines are good to use here).
Learn more about Engines

Existing Page: An Existing Page functions as a link to an existing Nav Item. This is useful if you want to have two links to the same page in different navigations.

Link: A Link functions as a link to a specific URL.