How do I create a Navbar in Xara Web Designer?

Xara Designer Pro & the Web Designer series includes special support for navigation bars (known as Navbars for short), making it easy to add, edit and delete buttons. View a video on navbars from here

The Designs gallery contains a wide range of template Navigation bars for you to use. There are both horizontal and vertical bars and they are fully customizable. Just drag and drop a bar from the gallery to place it on your page. Or replace an existing bar by dropping the new one onto it – the new bar takes on all the button labels, links and menus of the bar it replaces.

Double click on a bar to bring up the navigation bar dialog, or right click on it and choose 'Edit navigation bar' from the context menu.  The dialog will allow you to set the properties of the navbar along with add buttons and sub menus to your navbar.

How do I insert the navbar on all pages of my site?

A navbar inserted from the Designs Gallery is automatically repeated on all new pages added to the document.  If you are adding the navbar to an existing multi page document, then select the navbar and select to repeat on all pages from the arrange menu.  Alternatively, enable the site navigation bar option from the Navbar dialog

An option on the Navbar dialog named Site navigation bar turns on automatic linking so that buttons and links are added to your bar for you, as you add pages. And all changes you make to the bar are reflected on every page of the site as soon as you close the Navbar dialog.

Normally you have this option on only if you want your Navbar to appear on all pages of your website. However you can manually delete the bar from pages if desired.

version MX introduced a new option from within the Navigation Bar Properties dialog named Button order matches page order. This option is enabled by default for website and presentation documents and makes the Navbar button order match the the page order in the document. If you re-order pages in the Page and Layer Gallery this also results in the Navbar being similarly re-ordered. This is mainly useful for Navbars in presentation websites, where the linear ordering of the pages is important and you want the buttons in your bar to be in the same order as the pages in your presentation. Likewise its also useful for small websites.

How do I recolor my navbar

Please see the article on object recoloring 

Can I add drop down menus to my navbar?

This feature was introduced in version 6. 

• Select the Arrange menu followed by Create Navigation Bar
• The Navigation Bar properties dialog allows you to configure your NavBar including applying menus to your buttons
• Click on the Menu Style button to customize the look and direction of your menus.

Please view the program help and read the articles Navigation bar and Site navigation bar for more information on creating navigation bars.

Can I create my own navbar?

You can create a Navbar from any button design. To create a Navbar, select the button and then select "Arrange" > "Create Navigation Bar". The Navigation Bar dialog appears and you can immediately add more buttons to your bar.  Please refer to the program help for detailed steps and more information.

 

How do I create a navbar for my mobile variant?

Please see the question on creating a mobile navbar from the responsive web design article.