## 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.