Form the Xara Support knowledge base:

Xara Web Designer allows you to insert external objects within your web page and this includes navigation bars from Menu Maker or Webstyle.

Xara Web Designer already provides you with a selection of button bar designs but if you wish to use an existing button bar/ NavBar created in Menu Maker then

Begin by exporting your document from Xara Web Designer. We recommend you initially do this first to ensure you have a _files directory in which to save your navbar graphic and js files too.

1. Run Menu Maker and click on the button labelled New

2. Select the template you wish to use. Click on the Text, Color, texture and size tabs to configure the look of the menu. Ensure you take a note of the size of your navbar

3. Click on the set the button names and apply sub menus to your navbar

4. Click on the Save button followed by the save Graphic button

Note steps 5 and 6 are important. Failure to save your navbar and graphic files to the correct location will prevent you navbar from working as you expect.

5. Click on the button labelled Set Graphic Folder List. Browse to the folder where you exported your Xara Web Designer page too. You will find a folder within this location bearing the same name as the web page exported from Web Designer and appended with _files. Example: index_htm_files

6. Select the _files folder and click on ok. Next, use the browser bar on the right side of the save screen to browse to the same folder as where your Web Designer web page was exported to prior to clicking on the save button.

7. Open windows Explorer and browse to the folder where the navbar was exported to. This will be the same folder to which you exported your web page from Web Designer.

8. Edit the web page exported from Menu Maker within notepad. You will see some HTML code similar to below. Copy the line of codes between the <body> and </body> tag. In the example below, the code with bold text applied would be copied.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MenuMaker produced NavBar</title>
</head>
<body bgcolor="#ffffff" text="BLACK">
<script src="xaramenu.js"></script><script menumaker src="index_htm_files/afterglow.js"></script>
</body></html>

9. Switch to Web Designer and use the rectangle tool to create a placeholder using the rectangle tool. Size it to be the same width and height as your navbar and position the rectangle within your page where you wish the navbar to appear.

10. With the rectangle selected, click on the Website Properties icon and select the placeholder tab. Paste the HTML code copied in step 8 within the 'Replace with HTML code' text area and click on the OK button.

11. Finally, if you wish the navbar to be copied to the same location on every page within your document, then select the rectangle placeholder, click on Arrange and select Repeat on all pages.

12. Export your document from Web Designer