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.
Go to menu.boomla.net and install it onto your website.
Once installed, it will be mounted under
Open the IDE,
open the New Panel on the Boomla Sidebar,
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
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.
.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
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.)
<? 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>