A visitor lands on your site, opens the "Services" page, and cannot tell at a glance where they are. Menu items look identical. There is no active state. This is not a WordPress bug; by default a theme is not required to highlight the current item. But a few lines of CSS fix the problem in under a minute.

WordPress has automatically assigned a set of CSS classes to every menu item since version 3.0. Three of them indicate "the user is currently on this page or inside this section." All you need to do is write the styles, and the navigation becomes clear without a single click.

💡 Quick overview:

• Open your browser's inspector and find the CSS selector for your site's menu
• Add 3-5 lines of CSS in the Customizer or style.css targeting the classes .current-menu-item, .current-page-ancestor, and .current-post-ancestor
• If the site has multiple menus, refine the selector so the highlight applies only to the main one
• In block themes (FSE) the approach is the same, but CSS is added through the site editor

Which classes WordPress adds to menu items

When WordPress renders a menu via wp_nav_menu(), each <li> item receives several classes. Here are the three that control the "active" state:

.current-menu-item is assigned to the item whose link points to the current page. Open "Contact," and the "Contact" menu item receives this class. The most straightforward and commonly used.

.current-page-ancestor fires when the user is on a child page while the menu item points to the parent. For example, the menu contains "Portfolio" and the visitor is reading a case study inside that section. The parent "Portfolio" item receives the ancestor class, so you can highlight it too and show which section of the site the user is in.

.current-post-ancestor is the same concept, but for posts and categories. If a menu item links to the "News" category and the reader opens a specific article from that category, the "News" item will carry this class.

WordPress assigns all three classes automatically. You do not need to write PHP conditionals or edit templates manually, unlike the WP 2.9 era and earlier, when every link had to be wrapped in an if check against the current URL. Today you can just open the inspector and see which class is already attached to the target item.

Step 1: Find the menu selector

Open your site, press F12 (developer tools), and locate the <ul> or <nav> element that contains the menu items. It usually looks like this:

1
<ul id="primary-menu" class="menu">
2
  <li class="menu-item ... current-menu-item">
3
    <a href="/about">О нас</a>
4
  </li>
5
</ul>

Note the identifier (#primary-menu) or class (.main-navigation) of your menu. This is the selector we will use in the next step to limit the scope of the CSS.

In classic themes, menus are most often rendered via wp_nav_menu() with a theme_location argument such as 'primary'. CSS classes are assigned by the nav_menu_css_class function, and a filter with the same name lets developers add or remove classes programmatically. But for basic highlighting no code is needed, only CSS.

Step 2: Add the highlight CSS

The simplest and safest approach is to insert styles via the built-in Customizer. In the WordPress admin, go to Appearance → Customize → Additional CSS.

Copy and paste:

1
.current-menu-item > a {
2
  color: #ffffff;
3
  background: #2271b1;
4
  border-radius: 4px;
5
  padding: 6px 14px;
6
}

What this code does: when a menu item receives the .current-menu-item class, its link changes text color to white and background to blue, plus slight rounding. The result is visible immediately in the Customizer preview, before saving.

For finer control you can also highlight ancestors:

1
.current-menu-item > a,
2
.current-page-ancestor > a,
3
.current-post-ancestor > a {
4
  border-bottom: 3px solid #2271b1;
5
  color: #2271b1;
6
}

Here, instead of a fill, there is an underline with a blue bar. This option looks cleaner in minimalist themes.

Step 3: Limit the scope

If your site has multiple menus (main in the header, secondary in the footer, a widget menu in the sidebar), the CSS from the previous step will highlight the active item everywhere. That is rarely desirable.

Prefix the class selector with the ID or class of the specific menu you found in step 1:

1
#primary-menu .current-menu-item > a {
2
  background: #2271b1;
3
  color: #ffffff;
4
}

Now the highlight will fire only inside the element with id="primary-menu". Other menus on the site remain unchanged.

If your theme uses a class instead of an ID, write .main-navigation .current-menu-item > a. The principle is the same.

What about block themes (FSE)

In block-based themes (Twenty Twenty-Four, Twenty Twenty-Five, and similar) there is no classic Customizer with an Additional CSS field. Menus are built via the Navigation block.

CSS is added through the site editor: Appearance → Editor → Styles → three dots (menu) → Additional CSS. The code is exactly the same; WordPress continues to assign the .current-menu-item and other classes in block themes as well.

The difference is the selector. In FSE the menu wrapper is a <nav> with a class like .wp-block-navigation. Confirm the selector via the inspector and prepend it to the active-item classes:

1
.wp-block-navigation .current-menu-item > a {
2
  border-bottom: 2px solid #2271b1;
3
}

If your site runs on a modern theme and the menu does not highlight "out of the box," check whether the theme itself overrides link states via :hover and :focus without styles for .current-menu-item. The fix is to add a selector of equal specificity.

Deeper menu customization (from mega menus to mobile navigation) is covered in a separate article. It also includes a plugin roundup for cases when CSS is no longer enough: from free builders to professional solutions with grids and icons.

⁉️🤔 Frequently asked questions

Why does the menu not highlight after I add the CSS?

The most common cause is that the selector does not match the actual HTML structure. Open the inspector (F12), click on the active menu item, and check: does the <li> have the .current-menu-item class? If the class is missing, WordPress does not consider this page "current" for that item. This can happen with custom post types or plugins that override menu logic. Solution: register the custom type with 'show_in_nav_menus' => true or add support via the nav_menu_css_class filter.

Can I highlight a menu item with a different color for each page?

Yes. WordPress adds a unique class like .menu-item-{ID} to each item, for example .menu-item-42. Use the inspector to find the ID of the target item and write: .menu-item-42 > a { background: #d63638; }. This lets you color-code the menu to match the site sections.

How do I highlight a menu item if it is an external link or an anchor?

An external link will not receive .current-menu-item because it points to another site, and WordPress cannot identify it as "current." For anchors within the same page the class does not fire either. In these cases add a custom CSS class to the item manually: Appearance → Menus → Screen Options → check CSS Classes, then enter your class in the item settings and style it.

Is it safe to add CSS via Additional CSS in the Customizer?

Yes. Styles from this field are stored in the database and are not lost when the theme updates, unlike edits to style.css in a child theme that can be accidentally overwritten. The field has been available since WordPress 4.7 and is supported by virtually all classic themes.

Is it worth the effort: three-line summary

Highlighting the active menu item is not a designer's whim; it is a navigational baseline. Without it, visitors spend extra seconds orienting themselves. With it, the site structure is clear at a glance.

The task is fully handled by three classes: .current-menu-item, .current-page-ancestor, and .current-post-ancestor. It fits in five lines of code. Implementation takes three minutes via the Customizer.

If you need more (non-standard menu behavior, conditional highlighting by user role, or custom indicators) see the roundup of 15+ menu plugins. For basic highlighting, CSS is enough.