Description

This page demonstrates a “mobile app” layout: a bottom navigation bar and slide-in menus. The HTML on this page is the reference (doc + demo).

What this example shows

• A bottom bar: nav#nav-content.nav-wexa.bottom
• Two app menus: aside.appmenu#appmenu-menu and aside.appmenu#appmenu-profile
• Submenu toggles: #submenu-toggle-menu and #submenu-toggle-profile

JavaScript

The visual layout is CSS. JavaScript is only used to open/close the menus (see MenuManager: initMobileToggle() and registerSubmenu(...)).

Customization

App menus can be positioned using CSS variables (see inline styles on the aside.appmenu blocks, e.g. --appmenu-position and --appmenu-align).