Horizontal Navigation Component - v3

Owned by Alexandre Boyle
Last updated: Mar 06, 2023 by Gregory Moore
5 min read

Horizontal Navigation

The primary navigation for your site is found on the Horizontal Navigation at the top of your site.

Adding, Moving, & Deleting the Component

The Horizontal Navigation component is a critical part of your site’s template structure and can not be added, moved, or deleted. If you require assistance, please submit a service ticket and our development team will be happy to help.

Adding a Link

Links can be added in both the primary and dropdown rows.

Add a link to the primary row by clicking the grey button with green plus symbol on the far right of the component.

New links in the primary row are added to the right. The primary row allows a maximum of seven (7) links.

Add a link to a Dropdown row by first expanding the dropdown and clicking the black button with green plus symbol on the bottom left of the dropdown window.

New links in a dropdown row are added to the right and down after third link. The dropdown row allows a maximum of nine (9) links.

Primary row link maximum: 7
Dropdown row link maximum: 9

Best Practices

Ideally, link titles should be less than 12 characters. As a last resort, the component will shrink its font size when many long link titles have been added. To correct this, shorten your link titles.

Editing a Link

Hovering over a link and clicking on the yellow Edit button brings up a modal window where you can edit all of the link’s functions.

Title: Text that displays as the link’s title.

Link URL: Set the location where the link should go.

  • Insert Link - Link to an internal page within the Sitecore CMS. (This link will automatically update itself if the Sitecore URL you’ve linked to is ever changed.)

  • Insert External Link - Link to a URL outside of Sitecore. Does not automatically update.

  • Clear - Removes the link but leaves the title.

Open In New Tab: Check this box to open the link in a new browser tab.

Display As: Changes the link’s function.

  • Single Link - Sets the link to take you to the Link URL when clicked.

  • Dropdown - Sets the link to open a dropdown row of additional links below the primary row.

  • Button - Sets the last link to be styled like a button to highlight an important link. For example, a link titled “Giving” that goes out to the USF Foundation website. (This option is only available once on the last link.)

Display As options are available for links in the primary row only. All links in Dropdown rows function as a Single Link.

Sorting Links

Links in both the primary and dropdown rows can be sorted into whatever order you choose.

The primary row can be sorted by clicking the grey button with green up/down arrows on the far right of the component.

Dropdown rows can be sorted by first expanding the dropdown and clicking the black button with green up/down arrows on the bottom left of the dropdown window.

 

Both the primary and dropdown sort buttons button will bring up a modal window to Sort the Content Items.

  1. Find and click the title of the link you want to move.

  2. Use the buttons in the right column to arrange the link in the order you want.

    1. Move Up moves the link to the left

    2. Move Down moves the link to the right

  3. Repeat for each link you want to move.

  4. When all links are arranged to your liking, click the blue OK button in the lower right to confirm your choices.

Deleting a Link

Links can only be deleted one at a time.

  1. Find the link that you want to delete. If the link is within a dropdown row, you will need to expand the dropdown to reveal it.

  2. Hover your cursor over the link that you wish to delete.

  3. Hovering reveals the control buttons.

  4. Click the red Delete button.

  5. A message will pop up asking for your confirmation and display the link’s title.

  6. If you clicked by mistake, click the gray Cancel button in the lower right and nothing will be deleted.

  7. To confirm deletion, click the blue OK button in the lower right. The window message will update to tell you that the link was deleted and ask to refresh the page. Click OK again.

  8. The page will refresh and the deleted link will be gone.