Site navigation design recipe

Starter template

You can use the template to get started with setting up your navigation. Import it to your Blocks Edit dashboard to see how the header and footer menus works. And refer to the visual theme editor, or the tags in the code to replicate functionality for your own design.

Download for free

Preview in Blocks Edit →

Use your own design

You can use the Blocks Edit visual editor to edit the content of any website’s navigation. This makes it very flexible for your design and very easy to to make any kind of menu editable, including dropdowns and hamburger menus:

1. Import your HTML design into Blocks Edit via New Theme, at the top of your dashboard
2. Make your navigation content editable, either using the visual theme editor, or by adding tags in your code
3. Use the block-edit tag for content in navigation More info →
4. Use the block-repeat tag for adding nav items to each menu More info →

Making changes to your navigation

• The theme view will allow editing content that’s in the frame of your theme, which includes the header and footer; click on the edit icon next to the theme title on your dashboard
• Use the Save Content button at the top to save any updates you make
• Look for the update icon on at the top of the editor on your individual pages to apply navigation changes and any other updates you make to the theme frame

Related resources

Website navigation essentials - Standard navigation practices for websites and when to use them. Read blog post →