Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This guide provides step-by-step instructions on how to edit the top navigation menu using the Velocity format named top-nav-custom, located by default in your _assets folder. You'll learn how to create custom navigation menu items, drop-down menus, insert href links, etc. Additionally, you will have the option to apply this custom top navigation to specific pages or entire Page Types.

Table of Contents

Table of Contents
minLevel1
maxLevel7
excludeInstructions|Related articles

\uD83D\uDCD8 Instructions

Create a Top Navigation Menu

  1. Navigate to the _assets folder.

  2. Click top-nav-custom to access the code structure.

    Image Added
  3. Click Edit.

    Image Added
  4. The Top Navigation Format already has four menu items set up: About Us, News and Events, Media Gallery and Faculty and Staff Directory, as seen below.

    Image Added
  5. To change these items, replace the highlighted title and href with your own.

    Image Added

Anchor
HREF
HREF
Find the Correct href Links or Path for a Page

  1. Locate the desired page within your Site Directory.

    • Right-click the page icon.

    • Find the path displayed and copy the path beginning with the forward slash (/). (See below.)

      Image Added
    • Add the copied path to the href attribute in your menu item.

Highlight important information in a panel like this one. To edit this panel's color or style, select one of the options in the menu
Info

When pasting the copied path, remove the site name portion and include only the part starting from the forward slash (/). For example, if the copied path is "My Site Name: /services/service-1", use "/services/service-1" as the href link.

Create a Dropdown Menu

  1. Edit the top-nav-custom as you did in steps 1-3 above.

  2. To change the Dropdown Title, replace the existing title with your own. (As seen below, change “Sample Pages” in line 12.)

    Image Added
  3. The Top Navigation Format already has four dropdown menu items set up: Sample Interior, Content Row Samples, Sample Interactive Table and Page with PDF. (See below.)

    Image Added
  4. To change these items, replace the highlighted href and title with your own. (Refer to Find the correct href links or path for a page.)

    Image Added

Configure a Page

To configure only a specific page to use top-nav-custom, follow the instructions below.

  1. Navigate to the chosen page.

  2. Click Edit.

  3. Go to the Configure tab.

  4. Scroll down to the TOP NAVIGATION region.

Configure Page Templates

To configure page templates to use top-nav-custom, follow the instructions below.

  1. Click Manage Site.

    Image Added
  2. Click Go to Configurations.

    Image Added
  3. You will need to complete these steps for EACH page in your site.

    • Click the Edit icon for the page template.

    • Scroll down to the Top Navigation region.

    • Change the Velocity format to top-nav-custom located at _assets/top-nav-custom.

    • Save the configuration for the page template by clicking Submit.

Info

Once completed, your custom Top Navigation will be applied to all configured page templates.

Filter by label (Content by label)
showLabelsfalse
max5
spacescom.atlassian.confluence.content.render.xhtml.model.resource.identifiers.SpaceResourceIdentifier@103eb
sortmodified
showSpacefalse
reversetrue
typepage
cqllabel = "kb-how-to-article" and type = "page" and space = "CCK"
labelskb-how-to-article