Skip to main content
An Official Vermont Government Website

Menus

The navigation menu guides users to other sections of the site. There are two types of navigation menus available in the SOV Web Template: a header menu and a sidebar menu. You can use one or both. The header menu is available in two styles: a Basic Header Menu and a Basic Header Menu with Megamenu option. The sidebar menu is most commonly used on the left side of a website. To align with accessibility best practices and straightforward navigation, it is not recommended that a sidebar menu includes more than three levels of links.

Please Note: You must be logged in to the State of Vermont website that you are editing to follow the instructions below. 

Create a Basic Header Menu 

  1. Structure

    Select 'Structure' on the top navigation.

  2. Menus

    Select 'Menus'.

  3. Edit menu

    Select 'Edit menu' to the left of the 'Main menu'. This will bring you to the editing window where you can add, edit, delete, or rearrange menu items.

Create a Header Menu with Megamenu 

Next Steps

If you would like to use the header menu with megamenu for your top navigation, the first step is to submit a service ticket to Tyler Technologies and the State of Vermont Director of Web Services.

Create a Sidebar Menu 

  1. Structure

    Select 'Structure' on the top navigation.

  2. Menus

    Select 'Menus'.

  3. +Add menu

    Select '+Add menu'.

  4. Title

    Enter a 'Title' for the menu.

  5. Save

    Select 'Save'. This will bring you back to the editing window where you can add, edit, delete, or rearrange menu items.

Place a Sidebar Menu 

  1. Structure

    Select 'Structure' on the top navigation.

  2. Block layout

    Select 'Block layout'.

  3. Region

    Navigate to the template region you want to place the event block in. Left navigation menus go in the 'First sidebar' region.

  4. Place block

    Select 'Place block'.

  5. Filter by block name

    Enter the menu title in the  'Filter by block name' field.

  6. Place Block

    Select 'Place Block' to the right of the menu name.

  7. Display title

    In the 'Configure block' window, indicate if you would like to 'Display title' of the block. It is checked to 'Display title' by default.

  8. Pages

    In the 'Configure block' window, enter the 'Pages' the menu should appear on.

  9. Save block

    Select 'Save block'.

  10. Back to site

    Select 'Back to site' on the top navigation.

  11. Locate Page

    Locate the page on which you chose to place the menu.

  12. View

    Confirm that the menu appears in the 'First Sidebar' region.

Add a Menu Link 

  1. +Add link

    Select '+Add link' button.

  2. Menu link title

    Enter the 'Menu link title' that will appear in the list of menu links.

  3. Link

    Enter the 'Link' to where the 'Menu link title' will navigate to when clicked. When pointing to an internal page, the title can be searched in the field and the system will automatically create a link to it. The advantage of this approach is it will correctly adjust the link if you modify the url of the page. When linking to a local resource such as a pdf file, please leave out the domain name. For example, https://example.com/documents/example.pdf would be /documents/example.pdf.

  4. Enabled

    Be sure that 'Enabled'  is checked. If you’d like the item temporarily hidden in the menu but still available in the future, uncheck 'Enabled'.

  5. Optional: Description

    Add a 'Description'. This is the text that will appear when hovering over the link. A proper menu link title is usually sufficient.

  6. Optional: Show as expanded

    Select 'Show as expanded' if would like any links that appear below this link to appear at all times.

  7. Optional: Parent link

    Use the 'Parent Link' to specify where the link will appear in the menu. This can also be done by dragging and dropping menu links in the previous screen that shows the entire menu.

  8. Optional: Weight

    Use the 'Weight' to specify where the link appears amongst the other links in the menu. This can be modified on the menu page. Providing this information here rather than manually adding a link in the menu has the added benefit of generating a layered URL. For example, if you set the event to be under the 'This is a test' page with a url of '/this-is-a-test', and your event name is 'example event', your event will automatically generate a URL of '/this-is-a-test/example-event'.

  9. Save

    Select 'Save'. This will bring you back to the editing window where you can add, edit, delete, or rearrange menu items.

Edit a Menu Link 

  1. Edit

    Select 'edit' to the left of the menu link you would like to edit.

  2. Menu link title

    Edit the 'Menu link title' that will appear in the list of menu links.

  3. Link

    Enter the 'Link' to where the 'Menu link title' will navigate to when clicked. When pointing to an internal page, the title can be searched in the field and the system will automatically create a link to it. The advantage of this approach is it will correctly adjust the link if you modify the url of the page. When linking to a local resource such as a pdf file, please leave out the domain name. For example, https://example.com/documents/example.pdf would be /documents/example.pdf.

  4. Enabled

    Be sure that 'Enabled'  is checked. If you’d like the item temporarily hidden in the menu but still available in the future, uncheck 'Enabled'.

  5. Optional: Description

    Add a 'Description'. This is the text that will appear when hovering over the link. A proper menu link title is usually sufficient.

  6. Optional: Show as expanded

    Select 'Show as expanded' if would like any links that appear below this link to appear at all times.

  7. Optional: Parent link

    Use the 'Parent Link' to specify where the link will appear in the menu. This can also be done by dragging and dropping menu links in the previous screen that shows the entire menu.

  8. Optional: Weight

    Use the 'Weight' to specify where the link appears amongst the other links in the menu. This can be modified on the menu page. Providing this information here rather than manually adding a link in the menu has the added benefit of generating a layered URL. For example, if you set the event to be under the 'This is a test' page with a url of '/this-is-a-test', and your event name is 'example event', your event will automatically generate a URL of '/this-is-a-test/example-event'.

  9. Save

    Select 'Save'. This will bring you back to the editing window where you can add, edit, delete, or rearrange menu items.

Delete a Menu Link 

  1. Edit

    Select 'edit' to the left of the menu link you would like to edit.

  2. Delete

    Select 'Delete' at the bottom of the page next to the 'Save' button.

  3. Confirm Delete

    When presented with the pop-up to confirm if you would like to delete the menu link, click 'Delete'. This will bring you back to the editing window where you can add, edit, delete, or rearrange menu items.

Rearrange Menu Links 

In the main editing window for the menu, there are two ways to rearange links, either by Drag and Drop or Adjusting Row Weights.

  1. Drag and Drop

    To the left of each menu item, there is a small plus symbol with arrows on the ends. Select these arrows to drag and drop the menu links in the desired order.

  2. Adjusting Row Weight

    Above the edit buttons on the right, select 'Show row weights'. This will reveal a new column for 'Weight'. Adjust the numbers in the 'Weight' column to specify where the link appears amongst the other links in the menu. 

Example Menus 

Below are examples of the two navigation menu options.

 

 

One Level of Links

Two Levels of Links

Three Levels of Links