Description

This page shows how a page looks like if this code is added to the <head>:

<link
    rel="stylesheet"
    href="https://sourceforge.net/p/whakerexa/code/ci/master/tree/statics/css/wexa.css?format=raw"
    media="all" />
<link
    rel="stylesheet"
    href="https://sourceforge.net/p/whakerexa/code/ci/master/tree/statics/css/menu.css?format=raw"/>

Overview

menu.css/js is an extension of the wexa.css framework dedicated to navigation menus. It provides both the styling and the interactive behavior to create accessible and responsive navigation bars.

With menu.css you can design menus at the top, bottom or left-side of the page, including collapsible and pinnable side menus. The companion menu.js adds the necessary JavaScript to manage interactivity such as opening and closing submenus, pinning/unpinning the side menu, and maintaining keyboard accessibility.

The framework is designed to be lightweight, accessible by default, and to require a minimum of additional HTML classes, keeping source code clear and readable.

Not convinced? Take a look at the source code of this page!

Usage

By default, menu.css creates a horizontal navigation bar that is sticky at the top of the page. This is the most common layout, suitable for desktop websites. This solution is not responsive.

Other layouts are available:

Top: horizontal bar fixed at the top of the page.
Bottom: horizontal bar fixed at the bottom of the page. Useful for mobile apps where bottom navigation is preferred. See this example.
Side: vertical navigation bar attached to the left side. It can be collapsible and pinnable, allowing more space for the main content while keeping quick access to menu items. See this example.

Each layout reuses the same HTML structure, but applies different CSS rules depending on the class of the <nav> element (top, bottom, or side). Customization is achieved with the variables defined above, so developers can easily adapt height, width, or expanded/collapsed behavior.

The companion menu.js ensures interactivity: it manages toggle buttons, pin/unpin actions for side menus, submenu open/close states, and ARIA attributes for accessibility. Keyboard navigation (Tab, Shift+Tab, Escape) is fully supported by default.

The class .focus-visible-only defines a visual behavior for interactive elements that stay hidden until they receive keyboard focus. It can be applied to skip links or other accessibility controls to ensure they become visible only when navigated by keyboard.

Menu buttons

The navigation framework defines three dedicated buttons, each one designed for a specific type of menu and screen size:

Menu button (#menu-button) — Used exclusively with the .side (collapsible) menu. It appears automatically on screens narrower than 896 px and toggles the visibility of the side navigation. Fully keyboard accessible; manages aria-expanded consistently with the menu state.
Pin button (#pin-menu) — Optional control for the .side.collapsible menu on wide screens. When activated, it keeps the side navigation permanently expanded (aria-pinned="true"). Hidden on screens below 896 px and updates aria-pressed / aria-label dynamically.

The variables

Menus can be fully customized through CSS variables. These variables allow you to adapt the size, width, or alignment of menu items without modifying the CSS code directly. They make it easy to create consistent designs across different types of menus (top, bottom, side) while keeping flexibility for application-specific needs.

Variable	Default value	Description
--nav-min-height	max(calc(6rem / var(--size-divisor)), 4rem);	Minimum height of the main nav bar (top/bottom).
--nav-min-width	0	Minimum width of the nav (set >0 for side menus).
--nav-item-min-height	max(calc(2rem / var(--size-divisor)), 2rem)	Minimum height of any menu item.
--nav-item-height	max(calc(2.5rem / var(--size-divisor)), 2.5rem)	Default height of any menu item.
--nav-item-max-height	max(calc(3rem / var(--size-divisor)), 3rem)	Maximum height of any menu item.
--nav-item-min-width-h	max(calc(6rem / var(--size-divisor)), 4rem)	Min width of horizontal items (top/bottom).
--nav-item-width-h	max(calc(8rem / var(--size-divisor)), 6rem)	Default width of horizontal items.
--nav-item-max-width-h	max(calc(15rem / var(--size-divisor)), 12rem)	Max width of horizontal items.
--nav-expanded-width	max(calc(16rem / var(--size-divisor)), 14rem);	Width of the side menu when expanded/pinned.
--nav-item-width-v-collapsed	var(--nav-min-width)	Item width in side menu (collapsed).
--nav-item-width-v-expanded	var(--nav-expanded-width)	Item width in side menu (expanded).
--appmenu-position	left	Default off-canvas edge for app submenus (left/right/top/bottom).
--appmenu-align	left bottom	Submenu inner alignment (horizontal vertical).
--menu-button-size	max(calc(4rem / var(--size-divisor)), 3rem)	Size of the hamburger menu button