Single button NavBars

Sites designed to be viewed on small mobile devices have little space for horizontal or vertical NavBars, so a more space efficient solution is needed. Using a NavBar with a single button and a menu is one such solution that works well, no matter how many pages are in the site.

Single button vertical NavBar

To make a single button NavBar from an ordinary NavBar, simply open the Navigation Bar Properties dialog (double click on the NavBar) and delete all but one of the buttons. Then also remove the link from the button (click the URL field next to the button in the dialog and choose Do nothing in the Link dialog). Now you can either start adding menu entries to the button manually in the NavBar dialog, or a menu entry can be added automatically for each page in your site. To add the links automatically, turn on the Site Navigation Bar option in the dialog (or turn it off and then on again if it was already on). You'll see your menu becomes populated with a link to each page of your site. Edit the names of each entry in the menu if you don't want them the same as the page names.

There's a selection of different NavBar designs in Elements under "Components" > "Navigation bars". Also each of the themes under Websites have their own NavBar designs. Change the design of your NavBar by importing a new design from Elements and dropping it on your bar.

IMPORTANT: Note that some NavBars have first and last button designs that differ from the design of their center buttons. These NavBars are unsuitable for single-button use because the center button design is unlikely to look good on its own, so the Navigation Bar Properties dialog will not allow you to delete the left and right buttons from these bars to leave just a single button. So choose a NavBar design where all buttons on the bar look the same.

To convert a single button NavBar back to an ordinary multi-button bar, just add more buttons and delete the menu entries from the first button, if no menu is required.

Copyright © Xara