From Snapp CMS Developer Documentation

Menus in SnappCMS are based around the tree structure of your site's sitemap tree.

To create a menu, arrange your pages in the order that you'd like your menu to be displayed. If you want to access the same page from multiple menus, you can place your original page in one menu, and create a "URL Link" page in the other menu which points to the original page.

The image below shows a typical website sitemap.

In this example, the sitemap has been grouped into three top level collections of pages: "Main", "Footer Menu" and "Hidden Content". Hovering the mouse over the "Main" item shows it has the ID 3.

To display menus, we make use of menu Widgets. We could use the regular widget loading $cms->loadWidget() method to create and display one of the menu widgets, or we can use the shorter $cms->loadMenu() method, which is a menu widget-specific shortcut.

If we wanted to make a menu based on the items under the "Main" item which is displayed on all pages within the site, we'd do the following:

Configure the Template

Open DOCUMENT_ROOT/templates/default/index.php and insert the following HTML at the point where we wish the menu to display:

<div id="MainMenu">
    <?php echo $cms->loadMenu('Basic',
                              array(
                                    'menu_id'     => $cms->config->Site->MainMenu,
                                    'singleLevel' => false,
                                    'levels'      => 1))
    ?>
</div>

The parameters in the example above indicate that the menu should use widgetBasicMenu for the rendering, and that it should use a particular config.ini item ($cms->config->Site->MainMenu) for the base of the menu. We could have hard-coded the ID of the "Main" sitemap item (3) here, but as configuration should be kept separate, we'll insert it in our config object. The widget-specific directives indicate that we want a multi-level menu (if we've arranged the sitemap tree more than one level deep, so that we can have dropdown menus), and that it should go down 1 level below the top.

Set up config.ini

We want our menu to contain all the child pages of the "Main" sitemap item. We add a config item pointing to that item in our config.ini that can be referred to by whatever code requires it. While the item could be inserted anywhere, by convention this sort of item is inserted under the Site category, as follows.

[Site]
online = 1
template = default
debug = 1
defaultPage = 1
.
.
.
MainMenu = 3

After that, the menu is ready to go!

The Final Outcome

After saving the config.ini file and reloading a page on the site, the menu is output as follows:

<div id="MainMenu">
    <ul class="basicMenu" >
        <li class="menuItem_1 first even active ">
            <a href="/" title="Home" class="menuItem_1 ">Home</a>
            <ul class="basicMenuSubMenu">
                <li class=" first ">
                    <a href="/main/home/introduction" title="Introduction" class="menuItem_51 ">Introduction</a>
                </li>
            </ul>
        </li>
        <li class="menuItem_68 odd ">
            <a href="/main/about-us" title="About Us" class="menuItem_68 ">About Us</a>
            <ul class="basicMenuSubMenu">
                <li class=" first ">
                    <a href="/main/about-us/our-methodology" title="Our Methodology" class="menuItem_26 ">Our Methodology</a>
                </li>
                <li class="">
                    <a href="/main/about-us/our-promise" title="Our Promise" class="menuItem_5 ">Our Promise</a>
                </li>
                <li class=" last ">
                    <a href="/main/about-us/our-team" title="Our Team" class="menuItem_27 ">Our Team</a>
                </li>
            </ul>
        </li>
        <li class="menuItem_45 even ">
            <a href="/main/products" title="Products" class="menuItem_45 ">Products</a>
            <ul class="basicMenuSubMenu">
                <li class=" first ">
                    <a href="/main/products/products-style-1" title="Products" class="menuItem_25 ">Products Style 1</a>
                </li>
                <li class=" last ">
                    <a href="/main/products/products-style-2" title="Products" class="menuItem_46 ">Products Style 2</a>
                </li>
            </ul>
        </li>
        <li class="menuItem_32 odd ">
            <a href="/main/news" title="News" class="menuItem_32 ">News</a>
        </li>
        <li class="menuItem_7 even ">
            <a href="/main/faqs" title="Frequently Asked Questions List" class="menuItem_7 ">FAQs</a>
            <ul class="basicMenuSubMenu">
                <li class=" first ">
                    <a href="/main/faqs/faqs-list" title="FAQ's (List)" class="menuItem_39 ">FAQ's (List)</a>
                </li>
                <li class="">
                    <a href="/main/faqs/faqs-expandable" title="FAQ's (Expandable)" class="menuItem_38 ">FAQ's (Expandable)</a>
                </li>
                <li class=" last ">
                    <a href="/main/faqs/faqs-grouped" title="FAQs (Grouped)" class="menuItem_40 ">FAQs (Grouped)</a>
                </li>
            </ul>
        </li>
        <li class="menuItem_28 odd ">
            <a href="/main/links" title="Links" class="menuItem_28 ">Links</a>
        </li>
        <li class="menuItem_63 even ">
            <a href="/main/downloads" title="Downloads" class="menuItem_63 ">Downloads</a>
        </li>
        <li class="menuItem_22 odd ">
            <a href="/main/image-gallery" title="Image Gallery" class="menuItem_22 ">Image Gallery</a>
            <ul class="basicMenuSubMenu">
                <li class=" first ">
                    <a href="/main/image-gallery/smooth-gallery" title="Smooth Gallery" class="menuItem_33 ">Smooth Gallery</a>
                </li>
                <li class=" last ">
                    <a href="/main/image-gallery/test" title="test" class="menuItem_74 ">test</a>
                </li>
            </ul>
        </li>
        <li class="menuItem_8 even ">
            <a href="/main/contact-us" title="Contact Us" class="menuItem_8 ">Contact Us</a>
            <ul class="basicMenuSubMenu">
                <li class=" first ">
                    <a href="/main/about-us" title="About Us" class="menuItem_59 ">About Us</a>
                </li>
            </ul>
        </li>
        <li class="menuItem_29 last odd ">
            <a href="/main/survey" title="Survey" class="menuItem_29 ">Survey</a>
        </li>
    </ul>
</div>