Vertical Navigation Component - v3

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

Vertical Navigation

The secondary navigation for sub-sections of pages grouped under your parent site.

Adding, Moving, & Deleting the Component

The Vertical Navigation component is a critical part of your site’s template structure and requires a developer to add or delete it. If you require assistance, please submit a service ticket and our development team will be happy to help.

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

Add a link to the primary column by clicking the grey button with a green plus symbol at the bottom of the component.

Add a link under a dropdown column by clicking the smaller grey button with a green plus symbol at the bottom of the dropdown column.

New links are added to the bottom of their respective columns.

Primary column link maximum: 9
Dropdown column link maximum: 9

Best Practices

Link titles longer than 26 characters will wrap down to the next line but keep in mind this can become confusing for mobile visitors. It is best to keep link titles as short as possible.

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 column of additional links below the primary column.

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

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

Links within the primary column can be sorted by clicking the button in the top control strip with white up/down arrows.

 

Links within dropdown columns can be sorted by first expanding the dropdown and then clicking the grey button with green up/down arrows on the bottom left of the dropdown window.

 

Both the primary and dropdown sort buttons 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.

  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.

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.