A well-structured website navigation is key to delivering a smooth and intuitive user experience. With Zoho Backstage, you can easily create, organize, and customize your website’s navigation menus and buttons, helping visitors quickly access the information they need.

By optimizing your website’s navigation, you can improve usability, guide visitors more effectively, and create a polished, professional event website.

1. Navigate to Design > Website from the Dock.
2. Click Edit Website. The Website Designer will open.
3. Hover over the navigation bar on your preview site and click the Settings icon ⚙️.
4. In the Navigation Link Settings panel, click the Add Link + button.
   
   
   
   
5. Enter a Link Title that will appear in the navigation bar.
6. Choose a Linking option:
   
1. Page: Link the menu to an internal page by selecting it from the dropdown.
   
2. External URL: Link the menu to an external site by entering the URL.
   
1. (Optional) Select "Open in a new tab" if you want the menu to open in a separate tab.
   
7. Click Save. 
   
8. Click Republish to make the changes live on the event website.

Adding a Nested Link / Submenu

1. Navigate to Design > Website from the Dock.
   
2. Click Edit Website.
   
3. Hover over the navigation bar and click the Settings icon.
   
4. In the Navigation Link Settings panel, click the Menu icon next to the main menu where you want to add a submenu.
   
5. Select Add Submenu from the dropdown.
   
6. Enter the Link Title.
   
7. Choose a Linking option:
   
1. Page: Link to an internal page by selecting it from the dropdown.
   
2. External URL: Link to an external website by entering the URL.
   
1. (Optional) Select Open in a new tab  you want the submenu to open in a separate tab.
   
8. Click Save.
   
9. Click Republish to make the changes live on the event website.

1. Navigate to Design > Website from the Dock. 
   
2. Click Edit Website. 
   
3. Hover over the navigation bar and click the Settings icon.
   
4. Click Navigation Buttons. 
5. In the Navigation Buttons panel, click the Edit icon next to the link or menu you want to edit. The Button Settings panel will appear. 
6. Go to the Setup tab. 
7. Choose a Button Type from the dropdown. Based on the selected type, the following button types and options will appear:
   
   
   
   
1. Register Now: Direct attendees to the registration page to secure their spot.
1. Button Text
2. Alternate Registration Link (Optional)
   
2. Get in Touch: Let visitors contact you easily with a single click.
1. Button Text
3. Add to Calendar: Allow attendees to save the event date to their personal calendar.
1. Button Text
4. Print Agenda: Enable visitors to download or print the event schedule.
1. Button Text
5. Get Directions: Provide event location to the attendees with an interactive map.
1. Button Text
6. Custom: The Custom option has multiple linking options
1. For Page: A Select Page dropdown is shown.
2. For External URL: Enter the URL and select whether to open it in a new tab (checkbox).
3. For Speakers: A dropdown with all set speakers is shown.
4. For Sessions: A dropdown with all scheduled sessions is shown.
5. For Sponsors: A dropdown with all confirmed sponsors is shown.
6. For Event Listing: Redirects to the event listing page.
7. For Tickets: A Ticket Class Selector dropdown appears, allowing you to automatically select a ticket class for purchasers when the registration pop-up is displayed. You can choose to include access or promo code.
7. Become a Sponsor: Invite individuals or businesses to partner with or fund your event.
1. Button Text
8. Link a Custom Form: Let attendees fill out a form for inquiries, feedback, or other purposes.
1. Custom Form Selection
2. Button Text
9. Become an Exhibitor: Encourage companies to showcase their products at your event.
1. Button Text
10. Sign In: Allow users to log in to their accounts.
1. Button Text
11. Language: Let visitors switch between available languages.
1. No additional settings.
8. Click Save. 
   
9. Click Republish to make the changes live on the event website.

Designing a Button 

1. You can customize the button’s background color as either solid or gradient. Click the background color to open the color setup tool and choose between a solid color or a gradient.
   
2. Similarly, click the text color and select a color, then click Choose.
   
3. To set the border color, click the color next to Border Color and pick a color.
   

1. Navigate to Design > Website from the Dock. 
   
2. Click Edit Website. 
   
3. Hover over the navigation bar and click the Settings icon.
   
4. Click Navigation Buttons. 
5. In the Navigation Buttons panel, click and drag the chocolate icon next to a button to reorder it.
   
6. Click Republish to make the changes live on the event website.

Deleting a Button 

1. Navigate to Design > Website from the Dock. 
   
2. Click Edit Website. 
   
3. Hover over the navigation bar and click the Settings icon. 
   
4. Click Navigation Buttons. 
5. In the Navigation Buttons panel, click the Delete icon next to the button you want to delete.
   
6. Click Republish to make the changes live on the event website.
   

To restore the default settings, click Reset to Default.

Navigation Bar Design

1. Navigate to Design > Website from the Dock.
   
2. Click Edit Website.
   
3. Hover over the navigation bar and click the Settings icon to open the Navigation Bar Settings panel.
   
4. Customize the Design:
   
   
   
   
1. Navigation Bar Layout - Choose how elements are arranged in the navigation bar. Select from six styles:
1. Logo - Space - Link - Button: A clean layout with a gap between the logo and links, followed by a button.
   
2. Logo - Links - Space - Buttons: The logo is followed by navigation links, then a space, and finally buttons.
   
3. Logo - Space - Links - Space - Buttons: Spaces on both sides of the links, creating a balanced design.
   
4. Button - Space - Links - Logo: The button appears first, followed by a space, then the links, and the logo at the end.
   
5. Button - Links - Space - Logo: The button is followed by links, a space, and the logo at the far right.
   
6. Button - Space - Links - Space - Logo: Spaces surround the links, with the button on one end and the logo on the other.
   
2. Active Link Style - Define how the active (currently selected) link appears. Choose from:
1. Box: Highlights the active link with a rectangular background.
   
2. Rhomboid: Displays the active link in a diamond-like shape.
   
3. Pill: Gives the active link a rounded, capsule-like background.
   
4. Underline: Underlines the active link.
   
5. Upperline: Adds a line above the active link.
   
6. Border: Adds a border around the active link.
   
3. Submenu Dropdown Icon - Select the icon style for submenu dropdowns:
1. Line Down Arrow: A standard arrow pointing downward.
   
2. Filled Down Arrow: A solid, filled version of the down arrow.
   
3. Plus: A plus sign icon indicating expandable content.
   
4. Menu Transition - Choose how submenu items appear:
1. Click: Submenus expand only when clicked.
   
2. Hover: Submenus expand when hovered over.
   
5. To adjust the colors of navigation bar, click Navigation Bar Colors.
   Customize the colors of different navigation bar elements:
   
   
   
   
1. Background: The overall background color of the navigation bar.
   
2. Link Text: The color of the navigation links.
   
3. Active Link Background: The background color of the active link.
   
4. Active Link Text: The text color of the active link.
   
5. To add a Shadow:
   
1. Toggle Shadow on to add a shadow effect at the bottom of the navigation bar.
   
2. Select a Shadow Color to match your design.
   
6. Click Republish to make the changes live on the event website.