Tweak Library

Brands Menu

A list of brands that, when hovered over, provides users with a simple way to find branded products.


  • Fitness & Supplements
  • Health & Beauty
  • Alcohol
  • Music & Instruments
  • Sports & Recreation
  • Toys & Games
  • Animal & Petcare
  • Events & Party Supplies
  • Food & Beverages


Brands Menu

Coding Instructions

Step 1: Connect to your website via FTP

Step 2: Open up Header template

Locate the header template.html. This can be found in /httpdocs/assets/themes/skeletal/templates/headers/template.html. If using a different template, go into that template instead of the 'skeletal' template.

Open the template in your text editor. We suggest either Sublime Text or Atom. Add a [%content_menu%] at line 77 which is after the opening ul with the class na navbar-nav.

Step 3: Add the Brands Menu code into template

Add the following code and save the template:

[%content_menu content_type:'brand' sortby:'sortorder, name' limit:'5'%]
    [%param *header%]
        <li class="dropdown dropdown-hover"><a >Brands <span class="caret"></span></a>
            <ul class="dropdown-menu">
    [%param *level_1%]
        <li class=""> <a href="[@url@]">[@name@]</a></li>
    [%param *footer%]

The [%content_menu%] dynamically generates a menu based on the content type you define in the parameters. The following parameters are used in this [%content_menu%]:

  • content_type : The content type targeted for the menu.
  • sortorder : The sort order for the pages in the menu. To set which brands to display, give them a sortorder higher then the rest of the brands and they will display instead of the other brands. Sortorder is editable in the backend of the brand page in the cPanel.
  • limit : Sets a limit of items generated in the menu.

Inside the [%content_menu%], there are three [%params%]: header, level_1, footer. The level_1 param loops through every item that matches the parameters defined at the top of the [%content_menu%] and gives the defined html markup:

<li><a href="[@url@]">[@name@]</a></li>

We are using two B@se data tages here:

  • [@url@] : URL to the contents page.
  • [@name@] : The name of the content.

The header and footer param wrap around the level_1 param. The header param opens an overall <li> with a title of Brands and then the <ul class="dropdown-menu> heads the level_1 param. The level_1 loops through the brands, and then the footer param is closing the <li> and <ul>.

Now it will show a list of featured brands at the start of the main navigation in the header of every page:

1 related articles found: