Top Navigation

The top navigation in your site template can be edited in topic: 0-template-top-nav. Go to Content > Manage Topics, locate and open this topic for editing, and click <>HTML to view the topic HTML.

Much of the code throughout this topic should be left as-is. The red sections in the code sample below are areas you might want to edit:

<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Browse Categories <span class="caret"></span>
</a>
<ul class="dropdown-menu category-menu">
<li>
(!XmlPackage Name="entitylinklist.xml.config" entityname="category" entityid="0" columns="3"!)
</li>
</ul>
</li>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
About Us <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="(!TopicLink Name='about'!)">About Us</a>
</li>
</ul>
</li>

<li>
<a href="(!TopicLink Name='your-custom-topic'!)">Your Custom Topic</a>
</li>
</ul>

Dynamic Menus

A dynamic menu is a menu that is generated from data configured within your store. An example of this is the Browse Categories dropdown. Rather than including individual links directly within the topic, the template includes a custom XmlPackage which is designed to check your store's category structure and generate the links for you. This means that as you add new categories to your store, or remove categories, the menu in the top navigation will automatically adjust itself to include the correct links.

This dynamic menu is managed by an XmlPackage called entitylinklist.xml.config. This can be added to your 0-template-top-nav topic using the code below:

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Browse Categories <span class="caret"></span>
</a>
<ul class="dropdown-menu category-menu">
<li>
(!XmlPackage Name="entitylinklist.xml.config" entityname="category" numberoflinkstoshow="12" entityid="0" columns="2"!)
</li>
</ul>
</li>

In the code sample above, Browse Categories is what will display in the top navigation. Users will click on this to expand the dropdown menu below.

The dynamic menu is powered by this token, which embeds the XmlPackage into the menu and includes a number of parameters which control how the dropdown menu will look and work:

(!XmlPackage Name="entitylinklist.xml.config" entityname="category" numberoflinkstoshow="12" entityid="0" columns="2"!)

In the example above, the dropdown list will display all top level categories, with a maximum of 12 links total, spread across 2 columns. The result will look like the screenshot below:

Available parameters

• entityname: category, manufacturer, section
  Indicates which entity type will be used. "Section" in this case refers to the Departments configured in your admin console.
• entityid: The ID number of the parent entity whose child entities should be displayed in the dropdown menu.
  Example: If you have a category structure that looks like this:
  • Top Level Category (ID: 1)
    • Sub-Category 1 (ID: 2)
    • Sub-Category 2 (ID: 3)
    • Sub-Category 3 (ID: 4)
• ...and you want the sub-categories listed to display as links in your dropdown menu, you'll include the parent category ID (1, in the example above) in the XmlPackage token. If you want to display all top level categories in your dropdown menu, enter 0.
• columns: 1, 2, 3
  The number of columns of links to display in the dropdown menu. If you have a large number of links displaying, you may want to set this to 3. After changing this, we recommend resizing your browser width to emulate mobile / tablet screen sizes and make sure the number of columns will work well for all displays.
• numberoflinkstoshow: The number of links to display in the dropdown menu before the "View All" link will display.
  Use this in conjunction with the columns parameter to list out links evenly in the menu. If there are more links that would otherwise display, a View All link will automatically appear which will direct users to a full list of links available.

Static Links

Static links are the opposite of dynamic. These are manually coded in to the 0-template-top-nav topic, rather than automatically generating links to categories. This is useful when you want to have a link or dropdown menu in your top navigation that combines different types of links, to topics, categories, products, or any combination of those.

Static menus are managed exclusively by HTML in the 0-template-top-nav topic. They can be links to a single page with no dropdown menu, or you can create a dropdown menu by 'hard coding' your links within the topic in <> HTML mode.

Dropdown menu

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
About Us <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="(!TopicLink Name='about'!)">About Us</a>
</li>
</ul>
</li>

In the example above, "About Us" is what will display in the top navigation. The content within the <ul class="dropdown-menu"> section will display in the dropdown menu. To create dropdown links to categories, topics, or products manually, reference the version 10 software manual for syntax: http://help.aspdotnetstorefront.com/manual/1000/default.aspx?pageid=mvc_link_reference

Single Link

<li>
<a href="(!TopicLink Name='your-custom-topic'!)">Your Custom Topic</a>
</li>

A single link can be created by adding an <li> element to the top navigation, and including the code to build the link and link title within the <> HTML mode of the topic. To create a single link to a category, topic, or product, reference the version 10 software manual for syntax: http://help.aspdotnetstorefront.com/manual/1000/default.aspx?pageid=mvc_link_reference