Menu link class in Joomla Cassiopeia

Customising the Menu Link Class in Joomla's Cassiopeia Template

Cassiopeia remains the default frontend template in Joomla 5, and while it has matured considerably since its introduction, its default menu hover and active-state styling still lacks contrast for many designs. Here's how to fix that cleanly in 2026 — no third-party extensions, no template overrides, just a Link Class and a few lines of CSS.

The good news is that the approach is straightforward: add a Link Class to your menu item, then drop the corresponding CSS into your user.css file. That file sits outside the template's core files, so it survives every Joomla update — including the incremental Joomla 5.x releases that have landed over the past year.

TL:DR – Give your Joomla menu items a sharper hover and active border in under five minutes, with changes that persist through template updates.

Adding a Link Class to a Joomla Menu Item

The Link Class field lives inside the menu item editor, under the Link Type tab. It adds a CSS class directly to the anchor element the template renders, giving you a precise styling hook without touching any PHP or template files.

• Open Menus in the Joomla Administrator and click the menu item you want to style.
• Select the Link Type tab.
• In the Link Class field, enter a class name. In this example, menu__home is used — but any meaningful, hyphenated class name works well.
• Save the menu item.

With Joomla 5, the administrator interface has been refreshed with a cleaner layout, so the Link Type tab is easier to spot than it was in earlier versions. The field itself behaves identically — it simply appends your class to the rendered <a> tag on the frontend.

Adding the CSS to Cassiopeia's user.css

Rather than editing the template's core CSS files — which would be wiped on the next template update — Cassiopeia provides a dedicated user.css file for exactly this kind of customisation. If it doesn't exist yet in your installation, you can create it directly from the administrator.

• Go to System → Site Templates, then click Cassiopeia Details and Files.
• In the file tree on the left, locate the css folder.
• If user.css is already there, click it to open the editor. If not, select the css folder, click New File, and name it user.css.

  

• Add the following CSS to apply a visible bottom border on hover and when the menu item is active:

  a.menu__home:hover,
  li.active a.menu__home {
      border-bottom: 2px solid #f8f9fa;
  }

• Save the file.
• To confirm the change in your browser, do a hard reload — in Chrome or Edge, open DevTools and right-click the reload button to select Empty Cache and Hard Reload. Firefox users can hold Shift while clicking reload.

The colour value #f8f9fa is Cassiopeia's near-white, which works well against the default dark navbar. If your site uses a custom colour scheme or you've switched Cassiopeia to a light header variant — an option that became more accessible through the template's style settings in recent Joomla 5 releases — adjust the hex value to suit your palette.

Taking It Further with CSS Custom Properties

Cassiopeia in Joomla 5 makes increasing use of CSS custom properties (variables) throughout its stylesheet. If you want your menu styling to stay in sync with the rest of your theme automatically, you can reference those variables in user.css rather than hardcoding a hex value. For example:

a.menu__home:hover,
li.active a.menu__home {
    border-bottom: 2px solid var(--cassiopeia-color-primary);
}

This ties your hover border to the primary brand colour you've set in the template's style options, so a single colour change in the administrator propagates everywhere — including your custom menu styles. It's a small change that pays dividends as your site evolves.

You can inspect which variables Cassiopeia exposes by opening DevTools on any frontend page and examining the :root block in the Styles panel. The variable names are reasonably descriptive and have been stable across the Joomla 5.x series.

The Result on the Frontend

Below is the menu before the change — the default hover state blends into the background and gives very little visual feedback to the user.

And here it is after adding the Link Class and the two-line CSS rule. The active and hovered item now has a clear bottom border that gives the user immediate visual confirmation of where they are.

It's a small change with a noticeable usability improvement — and because it lives entirely in user.css, you won't need to redo it when Joomla or Cassiopeia receives its next update.