Navigation

  • Introduction

    This page provides instructions on setting up and arranging navigation bar. It explains the processes of displaying tabs on navigation bar and indexing pages in order to achieve correct order. Episerver tree structure is also explained.


  • Episerver tree structure

    Episerver allows three layers structure for each website (see Fig2). This structure is reflected on navigation bar (see Fig1).
    Position of a page on navigation bar will depend on its location on Episerver tree. Therefore, Level 1 pages are located directly under ROOT, Level 2 pages are located under Level 1 and Level 3 pages are located under Level2.

    Fig1. - Navigation bar structure

    Fig1a. - Navigation bar structure (Megamenu)
    Fig2. - Episerver tree structure

    Important!

    Pages can be dragged and dropped into new location if rearrangement of tree structure is required. Extra caution should be taken while moving pages.



  • Displaying page on menu & Indexing

    Displaying page on menu

    In order to make page visible on menu, navigate to Advanced Information tab in Edit panel and tick Display page in menus check box. Save and Publish and refresh browser if a website is opened in a separate tab.


    Indexing

    In order to arrange/reorder pages on menu, appropriate indexing has to be applied. Navigate to Advanced Information tab in Edit panel and make sure that According to sort index option is selected in Sort order drop down box. Then, apply integer value in Sort index textfield.


    For more information on indexing pages & layout blocks click here.


  • Mega menus

    Optionally, mega menus can be implemented on shows' portfolios.


    Please note!
    Only websites with large number of Level 3 pages can have mega menus implemented.



  • Restrictions

    Maximum number of menu tabs is restricted by the new framework. Therefore, up to 7 tabs can be added to navigation bar. The end of last menu tab should be aligned with left header CTA (see Fig3).


    Please note!
    Maximum number of menu tabs depends on number of characters used for each tab name. It is recommended to use names that are as short as possible.


    Additional space has to be reserved for My Event tab which appears on the navigation bar for logged in users.


    Important!

    Not following above recommendations will result in menu appearing broken. That will lead to poor user experience (see Fig4 and Fig5).


    Fig3. - Maximum navigation bar width

    Fig4. - Broken navigation bar example 1
    Fig5. - Broken navigation bar example 2

We use cookies to operate this website and to improve its usability. Full details of what cookies are, why we use them and how you can manage them can be found by reading our Privacy & Cookies page. Please note that by using this site you are consenting to the use of cookies.