How would you do it: 2 levels menu

One of our clients has a development team that will take over the project as soon as we finish our part. They have great developers with no Sitecore experience, and some of their questions are pretty valuable for those starting in the Sitecore world. My answer that follows has a consultancy approach, providing explanations and advises at a higher level.

Here is the question:

In Sitecore, how would you organize architecture and static files – mainly CSS and javascript files – during development of the following two levels menu?

The first level shows an Image and a Title and starts closed:
Menu2l - closed

When the user hovers a block at Level 1, a second part is displayed showing items on Level 2:Menu2l - hover


Your static CSS and Javascript files, like in any other web application, must be loaded somehow. At the project we are working, we have a bundle and minification process in place, responsible for loading, minify’ing and caching the files so everything loads faster.

But you can load files the old way:

<script src="myscript.js" type="text/javascript"></script>

The implementation itself can be split into two different challenges:

  1. Front-end development
    We clearly have a good front-end work here, some dynamic behavior when user hovers around level 1, the look and feel and everything. Basically all HTML markup, javascript and css stylesheets can be prepared without having Sitecore specifically in mind;
  2. Back end development
    All necessary to enable the content edition of menu items, and make it work dynamically at a page, including:

    • Step 1 - Upload your javascript and CSS files somewhere at your site filesystem (Eg: “/assets/js” and “/assets/css“), then load them somehow (traditional, bundle, etc);
    • Step 2 - Define your data structure (templates and fields) to support the content management. It all depends on your requirements – let’s have the following two possible scenarios:
      • Scenario 1 - You may want to feed the menu with pages and subpages you already have in your content tree. In this case you would just use your existing data:
        Menu Tree
      • Scenario 2 - Or you may be asked to create a dedicated data structure, not pages themselves but pointing to real pages. This data structure would have the following format:
        Menu Item Level 1
        Sitecore Template Menu Level 1Menu Item Level 2
        Sitecore Template Menu Level 2And you would keep the item somewhere outside your page’s content tree:
        Menu Tree 2
    • Step 3 - Create the component/sublayout that implements the menu feature. Following the same two scenarios above:
      • Scenario 1 - In this case you would use the Sitecore API to pragmatically get the Home item, using Children items to render menu’s level 1, and their grandchildren rendering level 2:
        var homeItem = Sitecore.Context.Database.GetItem("/sitecore/content/Home");
        var levelOne = homeItem.Children.ToList();
        foreach (var itemLevelOne in levelOne) {
           // This item represents a Level 1 menu block
           var title = itemLevelOne.Fields["Title"].Value;
           var image = itemLevelOne.Fields["Image"].Value;
           var levelTwo = itemLevelOne.Children.ToList();
           // ... do whatever you need with Level 1
           foreach (var itemLevelTwo in levelTwo) {
              // Here you work your Level 2 item
              var titleLevelTwo = itemLevelTwo.Fields["Title"].Value;
      • Scenario 2 - This implementation would be very similar to the first scenario, except that you would have to start at your repository folder (Eg: /sitecore/content/Lists/Menu) instead of the Home item.

Posted in Architecture, Development, How To Tagged with: , ,
One comment on “How would you do it: 2 levels menu
  1. Caro visitante de língua portuguesa: traduzirei meus posts na medida do possível. Caso você precise muito deste conteúdo em português, deixe um recado aqui no mural e priorizarei sua tradução.

Leave a Reply

Your email address will not be published. Required fields are marked *


  Am Not Spammer

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>