Bottom and top menus — live demo

This page demonstrates both nav.nav-wexa.bottom (the fixed bar at the bottom of the screen) and nav.nav-wexa.top (the compact accessibility bar at the top). It also shows two aside.appmenu off-canvas panels with different positions.

What this demo shows

• nav#nav-content.nav-wexa.bottom — fixed bottom navigation bar with three items, the first opening a slide-in submenu.
• nav.nav-wexa.top.mini-top — compact top bar for secondary controls, using CSS variable overrides on the .mini-top class.
• #appmenu-menu — main submenu, slides in from the left (--appmenu-position: left).
• #appmenu-profile — profile submenu in the header, slides in from the top (--appmenu-position: top), with custom colors and a horizontal item layout.

CSS provides all layout and transitions (menu.css). JavaScript manages submenu open/close (MenuManager).

HTML structure

<!-- Bottom nav -->
<nav id="nav-content" class="nav-wexa bottom"
     aria-label="Main navigation">
    <button id="submenu-toggle-menu" class="menuitem"
            aria-haspopup="true" aria-controls="appmenu-menu">
        <svg aria-hidden="true">...</svg>
        <span>Menu</span>
    </button>
    ...
</nav>

<!-- Submenu: slides in from left -->
<aside class="appmenu" id="appmenu-menu"
       style="--appmenu-position: left; --appmenu-align: left bottom;"
       aria-label="Main menu submenu">
    <nav>
        <p class="nav-section-label">Navigation</p>
        <a class="menuitem" href="#">Option 1</a>
    </nav>
</aside>

<!-- Submenu: slides in from top, custom colors -->
<aside class="appmenu" id="appmenu-profile"
       style="--appmenu-position: top; --appmenu-align: right top;"
       aria-label="Profile submenu">
    <nav>
        <a class="menuitem" href="#">Settings</a>
    </nav>
</aside>

JavaScript initialization

const menu = new MenuManager();
menu.registerSubmenu('appmenu-profile', 'submenu-toggle-profile');
menu.registerSubmenu('appmenu-menu',    'submenu-toggle-menu');

Compact top bar — .mini-top

Reduce item heights with CSS variable overrides scoped to the nav element. Any class name works; .mini-top is a local convention for this demo.

.mini-top {
    --nav-min-height:      2rem;
    --nav-item-min-height: 1.8rem;
    --nav-item-height:     1.8rem;
    --nav-item-max-height: 1.9rem;
}

<nav class="nav-wexa top mini-top" aria-label="...">
    ...
</nav>