Navigation Tags - Header Menu

These are tags which are related to navigation menus in WineDirect Classic's system. 

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>

v65:navPrice

<v65:navPrice></v65:navPrice>

Description: Primarily for wine stores who want a way to filter products by price range.

HTML Source Output:

<div id="v65-navPrice">
   <span id="v65-navPriceTitle">Price</span>
   <ul>
      <li><a href="/index.cfm?method=pages.showPage&pageID=&lowPrice=0&highPrice=20">$20 and below</a>  <span class="v65-productCount">(21)</span></li>
      <li><a href="/index.cfm?method=pages.showPage&pageID=&lowPrice=20&highPrice=40">$20-$40</a> <span class="v65-productCount">(14)</span></li>
      <li><a href="/index.cfm?method=pages.showPage&pageID=&lowPrice=40&highPrice=80">$40-$80</a> <span class="v65-productCount">(37)</span></li>
      <li><a href="/index.cfm?method=pages.showPage&pageID=&lowPrice=80&highPrice=10000">$80 and above</a> <span class="v65-productCount">(31)</span></li>
   </ul>
</div>

Base CSS from vin65.css:

#v65-navPrice
#v65-navPriceTitle
.v65-productCount

Resource Bundle Elements:
PriceMenu
ResetLink

v65:navtypeVarietal

<v65:navtypeVarietal></v65:navtypeVarietal>

Description: Primarily for wine stores who want a way to filter products by Type and Varietal.

HTML Source Output:

<div id="v65-navTypeVarietal">
   <span id="v65-navTypeVarietalTitle">Type/Varietal</span>
   <ul>
     <li><a href="/index.cfm?method=pages.showPage&pageID=&wineTypeID=">Dessert</a> <span class="v65-productCount">(4)</span></li>
     <li><a href="/index.cfm?method=pages.showPage&pageID=&wineTypeID=">Sparkling</a> <span class="v65-productCount">(7)</span></li>
     <li><a href="/index.cfm?method=pages.showPage&pageID=&wineTypeID=">Red</a> <span class="v65-productCount">(460)</span></li>
     <li><a href="/index.cfm?method=pages.showPage&pageID=&wineTypeID=">White</a> <span class="v65-productCount">(141)</span></li>
     <li><a href="/index.cfm?method=pages.showPage&pageID=&wineTypeID=">Rose</a> <span class="v65-productCount">(7)</span></li>
   </ul>
</div>

Base CSS from vin65.css:

#v65-navTypeVarietal
#v65-navTypeVarietalTitle
.v65-productCount

Resource Bundle Elements:
TypeMenu
ResetLink

v65:navRegionAppellation

<v65:navRegionAppellation></v65:navRegionAppellation>

Description: Primarily for wine stores who want a way to filter products by Region and Appellation.

HTML Source Output:

<div id="v65-navRegionAppellation">
   <span id="v65-navRegionAppellationTitle">Region</span>
     <ul>
       <li><a href="/index.cfm?method=pages.showPage&pageID=&wineRegionID=">California</a> <span class="v65-productCount">(525)</span></li>
       <li><a href="/index.cfm?method=pages.showPage&pageID=&wineRegionID=">Australia</a> <span class="v65-productCount">(16)</span></li>
       <li><a href="/index.cfm?method=pages.showPage&pageID=&wineRegionID=">Italy</a> <span class="v65-productCount">(23)</span></li>
       <li><a href="/index.cfm?method=pages.showPage&pageID=&wineRegionID=">Argentina</a> <span class="v65-productCount">(6)</span></li>
   </ul>
</div>

Base CSS from vin65.css:

#v65-navTypeVarietal
#v65-navTypeVarietalTitle
.v65-productCount

Resource Bundle Elements:
RegionMenu
ResetLink

v65:navBrand

<v65:navBrand></v65:navBrand>

Description: Primarily for wine stores that want a way to filter products by brand.

HTML Source Output

<div id="v65-navBrand">
   <span id="v65-navBrandTitle">Brand</span>
     <ul>
       <li><a href="/index.cfm?method=pages.showPage&pageID=&productBrandID=">Arista</a> <span class="v65-productCount">(9)</span></li>
       <li><a href="/index.cfm?method=pages.showPage&pageID=&productBrandID=">Blackbird</a> <span class="v65-productCount">(25)</span></li>
       <li><a href="/index.cfm?method=pages.showPage&pageID=&productBrandID=">Burgess</a> <span class="v65-productCount">(1)</span></li>
       <li><a href="/index.cfm?method=pages.showPage&pageID=&productBrandID=">Chanson</a> <span class="v65-productCount">(4)</span></li>
       <li><a href="/index.cfm?method=pages.showPage&pageID=&productBrandID=">Chapoutier</a> <span class="v65-productCount">(1)</span></li>
       <li><a href="/index.cfm?method=pages.showPage&pageID=&productBrandID=">Chappellet</a> <span class="v65-productCount">(1)</span></li>
       <li><a href="/index.cfm?method=pages.showPage&pageID=&productBrandID=">Chimney Rock</a> <span class="v65-productCount">(4)</span></li>
       <li><a href="/index.cfm?method=pages.showPage&pageID=&productBrandID=">Clark-Claudon</a> <span class="v65-productCount">(16)</span></li>
    </ul>
</div>

Base CSS from vin65.css:

#v65-navBrand
#v65-navBrandTitle
.v65-productCount

Resource Bundle Elements:
BrandMenu
ResetLink

v65:navVintage

<v65:navVintage></v65:navVintage>

Description: Primarily for wine stores who want a way to filter products by vintage.

HTML Source Output:

<div id="v65-navVintage">
   <span id="v65-navVintageTitle">Vintage</span>
     <ul>
         <li><a href="/index.cfm?method=pages.showPage&pageID=&vintage=2006">2006</a> <span class="v65-productCount">(17)</span></li>
         <li><a href="/index.cfm?method=pages.showPage&pageID=&vintage=2007">2007</a> <span class="v65-productCount">(25)</span></li>
         <li><a href="/index.cfm?method=pages.showPage&pageID=&vintage=2008">2008</a> <span class="v65-productCount">(11)</span></li>
         <li><a href="/index.cfm?method=pages.showPage&pageID=&vintage=2009">2009</a> <span class="v65-productCount">(4)</span></li>
    </ul>
</div>

Base CSS from vin65.css:

#v65-navVintage
#v65-navVintageTitle
.v65-productCount

Resource Bundle Elements:
VintageMenu
ResetLink

v65:productFilter

<v65:productFilter></v65:productFilter>

Description: Primarily for wine stores, this tag offers a way for stores to generate a breadcrumb nav of the filters applied and remove them easily to refine their search.

HTML Source Output:

<div id="v65-productFilter">
   <div id="v65-productFilterPrecursor">Filters:</div>
     <ul>
        <li><a href="/index.cfm?method=pages.showPage&pageID=">United States</a></li>
        <li><a href="/index.cfm?method=pages.showPage&pageID=">Russian River Valley</a></li>
        <li><a href="/index.cfm?method=pages.showPage&pageID=">Red</a></li>
     </ul>
</div>

Base CSS from vin65.css:

#v65-productFilter
#v65-productFilterPrecursor
#v65-productFilter ul
#v65-productFilter ul li
#v65-productFilter ul li a 

Resource Bundle Elements:
ProductFilters