Add a menu

While you can easily write a menu from scratch, it is not in scope for this how-to, so we will reuse a ready-made responsive menu app.

Install menu.boomla.net

Go to menu.boomla.net and install it onto your website.

Once installed, it will be mounted under /sys/packages/menu.boomla.net.

Create a menu instance

  • Open the IDE,

  • navigate into /apps/page,

  • open the New Panel on the Boomla Sidebar,

  • find menu.boomla.net in the installed packages section and open it,

  • find a menu element,

  • drag it anywhere into /apps/page, for example after the .Request file.

This will create the file /apps/page/menu and its type will be menu.boomla.net/menu-v1 or similar, it will definitely start with menu.boomla.net. (You could also write /sys/packages/menu.boomla.net/menu-v1 but the /sys/packages prefix is optional.)

In Block mode, now you can right click the menu instance and configure it if you want. For example, changed its theme to blue.

Add the menu to our theme

Within the .Request file, replace the word menu with the following:

<?== source.select('../menu').inline(false) ?>

This will select the /apps/page/menu file and inline it (call its .Inline method).

Let's revisit your website to see the menu appear. Note that your root file doesn't have a title, so let's open the Text mode on the Boomla Toolbar and change it. (Alternatively, you can set the root file's title property in the IDE.)

Full code

<?
    response.attrStr('head', '<meta name="viewport" content="width=device-width, initial-scale=1">');
    var css = response.addCssModule(source.select('../style.css'));
?>
<div class="<?== css.wrapper ?>">
    <div class="<?== css.paper ?>">
        <div class="<?== css.menu ?>">
            <?== source.select('../menu').inline(false) ?>
        </div>
        <div class="<?== css.contents ?>">
            contents
        </div>
    </div>
</div>
Subscribe to our newsletter!