## Introduction

### Goal

Create a new navigation menu and add it to the footer of the site.

### Prerequisites

Before starting:

  • Familiarize yourself with how to set up a [Development Environment](🔗) with a channel created using the [Reference SPA](🔗) template and a local copy of the [frontend app](🔗) configured.

  • Have the [Site Management API](🔗)[Menus](🔗) and [SPA SDK](🔗) and [React SDK](🔗) reference documentation handy.

  • If you want to use the Site Management API directly (rather than using the _Site development_ app in the UI), [obtain an authorization token](🔗).

To make the [site configuration](🔗) changes in this tutorial, we recommend using the [Site development app](🔗) in the Bloomreach UI or use the [Postman Collection](🔗) to make the Site Management API requests. However, you can use any other method or tool you like such as curl or httpies.

## Preparation

Create a new channel using the [Reference SPA](🔗) channel template and call it 'tutorial'.

Clone the [Reference SPA frontend app](🔗) and set your Bloomreach Content environment's Delivery API URL in the `.env` configuration file.

Create a development project called 'Menu Tutorial', add the 'tutorial' channel to it, and configure the channel to use your local frontend app to render the preview in the _Experience manager_.

## Create a 'Footer' Menu

The first step is to create a new menu entry for the footer menu. Follow the instructions below for a smooth process.

Open the _Site development_ app and choose your development project channel.

Select the _Menus_ tab and click on the _+ Menu_ button to create a new menu.

In the _New menu_ form, enter 'footer' in the _Name_ field and click on the _Create_ button.


Alternatively, if you prefer to interact directly with the Site Management API, use the following [PUT request to the menus endpoint](🔗):

**At this point the footer menu is just an empty, unused entry in the configuration.**

## Add the Footer Menu to the Base Layout

In order to make the 'footer' menu appear in the page footer on all pages across your channel, you will use the [base menu component](🔗), add it to the base page [layout](🔗), and configure it to display the 'footer' menu.

In the _Site development_ app, choose the _Page Layouts_ tab and select the "base (abstract)" layout.

In the _Layout Structure_ column, find the 'footer' static component in the component hierarchy. Open its context menu by clicking on the three dots on the right side and select _Add static component_.

  • In the _Name_ field, enter 'footer-menu'.

  • In the _Definition_ field, enter 'base/menu' (referring to the [base menu component](🔗)).

  • Under _Parameters_, enter 'menu' in the _Key_ field and 'footer' in the _Value_ field (referring to the 'footer' menu entry you created in the previous step).

Click on the _Create_ button to save.


Alternatively, if you prefer to interact directly with the Site Management API, use the following [PUT request to the Layouts endpoint](🔗) to update the base layout:

And use the following request body (containing the entire base layout configuration with the new addition to the footer):

**At this point the footer menu is still not visible in the channel preview in the Experience manager.**

## Update the Frontend App to Render the Footer Menu

To make the frontend application render the new footer menu, you need to open `components/App.tsx` in your code editor and look for the `<footer>` element. Within the `<footer>`, there is a `<Container>` containing a `<Row>`. Within the `<Container>` add the following code snippet **before** the existing <Row> element:

The `<BrComponent>` React component is mapped to the static 'footer-menu' component you added to the base layout. The `<Menu>` React component renders the actual menu.

Add the following snippet to `pages/_index.scss` to style the footer menu:

## Add Menu Items in the Experience Manager

Open the channel in the _Experience manager_ and make sure your development project is selected in _For project_.

At this point you should see the _Edit menu_ button in the footer:


Click on the _Edit menu_ button to open the menu editor and add some menu items. Make sure to save the new menu items and click _Done_ to return to the preview. You should now see the footer menu in the preview:


Open the _Channel_ menu and select _Submit_ to save the changes to your development project.