Navigation Tags
  • 31 Mar 2023
  • 2 Minutes to read
  • Dark
    Light
  • PDF

Navigation Tags

  • Dark
    Light
  • PDF

Article summary

v65:breadCrumbs

<v65:breadCrumbs></v65:breadCrumbs>

Description: This tag displays basic breadcrumb navigation.

Optional Attributes:

delimiter: The text that separates Your Account and Login

default: "&raquo;"
usage: <v65:login delimiter="&raquo;"></v65:login>

startRow: sets the depth at which to start the breadcrumb

default: "&raquo;"
usage: <v65:login startRow="1"></v65:login>

Andrew: sets the depth at which to end the breadcrumb

default: "&raquo;"
usage: <v65:login endRow="0"></v65:login>

HTML Source Output:

<ul>
   <li>Grandparent</li>
   <li>»</li>
   <li>Parent</li>
   <li>»</li>
   <li>Current Page</li>
</ul>

v65:layoutHeaderNav

<v65:layoutHeaderNav></v65:layoutHeaderNav>

Description: This tag displays a nested list of page links you have added to the Main Menu in the page properties.

Optional Attributes:

depth: The level to which you nest your main navigation list

default: "2"
usage: <v65:layoutHeaderNav depth="2"></v65:layoutHeaderNav>

HTML Source Output:

<ul>
    <li class="v65-home"><a href="/">Home</a></li>
    <li><a href="/Blog" class=" ">Blog</a></li>
    <li><a href="/Products" class=" ">Products</a>
         <ul>
             <li><a href="/Products/Red" class=" ">Red</a></li>
             <li><a href="/Products/White" class=" ">White</a></li>
             <li><a href="/Products/Dessert-Wine" class=" ">Dessert Wine</a></li>
         </ul>
     </li>
     <li><a href="/Contact-Us" class=" ">Contact Us</a></li>
     <li><a href="/club" class=" ">Club</a></li>
</ul>

Base CSS from vin65.css:
.v65-home - use this to hide the automatic home link
.v65-selected - attached to link if it is the current page
.v65-pageAParent - attached if the link is a parent of the current page


v65:layoutLeftNav

<v65:layoutLeftNav></v65:layoutLeftNav>

Description: This tag displays a nested list of links to children's pages under the current page.

Optional Attributes:

start depth: The text that separates Your Account and Login

default: "2"
usage: <v65:layoutLeftNav startDepth="2"></v65:layoutLeftNav>

HTML Source Output:

<ul>
    <li><a href="/Sub-Page-1" class=" ">Sub Page 1</a></li>
    <li><a href="/Sub-Page-2" class=" ">Sub Page 2</a>
        <ul>
            <li><a href="/Sub-Sub-Page-1" class=" ">Sub-Sub Page 1</a></li>
            <li><a href="/Sub-Sub-Page-2" class=" ">Sub-Sub Page 2</a></li>
            <li><a href="/Sub-Sub-Page-3" class=" ">Sub-Sub Page 3</a></li>
            <li><a href="/Sub-Sub-Page-4" class=" ">Sub-Sub Page 4</a></li>
        </ul>
    </li>
    <li><a href="/Sub-Page-3" class=" ">Sub Page 3</a></li>
    <li><a href="/Sub-Page-4" class=" ">Sub Page 4</a></li>
</ul>

Base CSS from vin65.css:
.v65-selected - attached to link if it is the current page
.v65-pageAParent - attached if the link is a parent of the current page


v65:layoutSubMenu

<v65:layoutSubMenu></v65:layoutSubMenu>

Description: This tag displays a list of links to children's pages under the current one-level deep page.

Optional Attributes:

pageID: Show the children of a specific page.

default: the page the tag resides on
usage: <v65:layoutSubMenu pageID="b15862a8-2264-112b-b148-a78b33fd9e02"></v65:layoutSubMenu>

HTML Source Output:

<ul>
    <li><a href="/Sub-Page-1" class=" ">Sub Page 1</a></li>
    <li><a href="/Sub-Page-2" class=" ">Sub Page 2</a></li>
    <li><a href="/Sub-Page-3" class=" ">Sub Page 3</a></li>
    <li><a href="/Sub-Page-4" class=" ">Sub Page 4</a></li>
</ul>

Base CSS from vin65.css:

.v65-selected - attached to link if it is the current page


v65:leftNavSectionTitle

<v65:leftNavSectionTitle></v65:leftNavSectionTitle>

Description: This tag displays the page's title at a specified depth.

Optional Attributes:

depth: depth of page title to display

default: "2"
usage: <v65:leftNavSectionTitle depth="2"></v65:leftNavSectionTitle>

HTML Source Output:

Page Title

v65:layoutFooterNav

<v65:layoutFooterNav></v65:layoutFooterNav>

Description: This tag displays a list of links to pages you assigned to the Footer Menu in the page properties.

HTML Source Output:

<ul>
     <li><a href="/Contact-Us" class=" ">Contact Us</a></li>
     <li><a href="/About-Us" class=" ">About Us</a></li>
     <li><a href="/Terms-Of-Use" class=" ">Terms Of Use</a></li>
     <li><a href="/Privacy-Policy" class=" ">Privacy Policy</a></li>
</ul>

v65:skipToContent

<v65:skipToContent targetID="mainContent"></v65:skipToContent>

Description: This tag creates a hidden button that will appear only when tabbed at the top left corner of the page. Clicking it will move the user's focus to the section you give it. This will be added to make your website more useful to users using screen readers or those with disabilities or accessibility issues.

Required Attribute:

targetID: The id of the section you want users to focus on when they click the button. This id must exist elsewhere on the page for this to work
usage: <v65:skipToContent targetID="mainContent"></v65:skipToContent>

HTML Source Output:

<div id="v65-skipToContent">
    <a href="#mainContent">Skip to Main Content</a>
</div>

Was this article helpful?

What's Next