Sidebar Menu for YOOtheme Pro

SIDEBAR MENU is a builder element for YOOtheme Pro 4 and 5 on Joomla 5 and 6. You drag it into a row, pick one of your existing Joomla menus and get a multi-level side navigation. The menu items come from Joomla's own mod_menu, icons and subtitles from the menu editor in the YOOtheme customizer, and the active path is highlighted automatically. There are 34 settings, plus a field for your own CSS. The stylesheet and script only load on pages that contain the element.

Menu source and levels

You pick the menu from a list of all Joomla menus on the site. By default, the output follows the current menu item. Alternatively, you set a base item so the same branch always appears. Start and end level can be set between 1 and 10, an empty end level shows all levels. Menu items of the type Heading become group titles, separators become an element with role="separator".

Appearance: three styles, colors, sizes

Accent Line puts a colored bar to the left of the active item, Soft Pills gives it a rounded background, Type & Marker works with font weight and a short line. Four color fields cover background, accent, text and active text, the last one separately so it stays readable on a light panel. On top of that: corner radius up to 40 pixels, drop shadows in five UIkit 3 levels and a width between 180 and 480 pixels. Optionally, the sidebar fills the full row height, aligned to the top, middle or bottom.

Icon bar and off-canvas

On desktop, the sidebar collapses into an icon bar between 48 and 120 pixels wide. It can start collapsed, open temporarily on mouse hover or keyboard focus, or show a UIkit tooltip with the menu title to the left or right of each icon. The element remembers the chosen state in localStorage, so no cookie and no extra consent prompt. Below a breakpoint of your choice, the sidebar turns into an off-canvas panel with a hamburger and a close button.

Controlling submenus

Either the parent link opens the submenu itself, or it navigates as usual and a separate toggle icon takes care of opening. You pick the expand and collapse icons from the UIkit icon library, plus an animation: none, a 180-degree rotation or a fade. On page load, the active path, everything or nothing is open, and optionally several branches at once.

Accessibility under the BFSG

Navigation is the first thing an audit under the German Accessibility Strengthening Act (BFSG) and EN 301 549 looks at. At these points, the sidebar is built to WCAG 2.1 AA: it sits in a nav landmark with its own name, the active item carries aria-current="page", and every toggle reports aria-expanded and points to the list it opens via aria-controls. Toggles with their own icon are real buttons with an ARIA label that includes the menu title. The focus ring is visible via focus-visible.