Lean Design Blog

How-to: website navigation

A much simpler approach to setup website menus in a CMS.

Example menu being edited in Blocks Edit.

Setting up navigation in a CMS can be a chore, especially if you have multiple menus. The approach to updating your navigation in Blocks Edit is the same as updating any other content: simple point and click inline editing.

Updating menus

Once your HTML design is editable, to update your menus, click on the edit icon next to your theme on your dashboard. You’ll go to a preview of your theme. Here you can make changes to the content of the frame of your site which includes the header and footer.

All menus are editable, including if you have a dropdown menu or a hamburger menu as well. To add items to a menu, use the duplicate option on one of its items. When you’re done with your updates, click the Save Content button at the top.

To apply the navigation updates to each page, go to the page you want to commit changes to, and look for the update icon at the top. Clicking it will save a new version of the page with the updates made.

Making your menus editable

When you’re setting up your design in Blocks Edit, you can make header and footer menus editable the same way you would any other piece of content, along with content that’s around the menus.

Use block-edit for editing text. And for adding menu items, use the block-repeat option on a region. When someone makes updates to the menus and applies the changes to pages, each page is rebuilt with the updates. If there are any design changes made to your HTML, it will include those as well.

For an example of editable menus in Blocks Edit, check out our Starter page components theme.

Photo of Ovi Demetrian Jr Ovi Demetrian Jr
Designing and building on the web for over 15 years