How do I highlight the current page in a Webflow navbar?

Put one class on the nav links

The Current state marks a link that points at the page, section, or tab the visitor is already on. Webflow applies it to the class of that link, or to the All Links tag. It is not a class you type. A green Current label in the Selector means you are styling that state.

The navbar links should share one class before you style Current. Select a nav link and type a class such as Nav link in the Selector. Apply that same class to the other text links in the navbar. A button that is a call to action can keep a different class, so it does not pick up the current-page color.

Example: the bar has Home, Work, Pricing, and Contact, plus a separate Start project button. Put Nav link on the four page links. Leave the button on its own class. You will style Current once, on Nav link, and each of the four links can show it on its own page.

Hover follows the pointer. Current follows the open page. Set the color while the green Current label is showing, not while the States menu says Hover.

Open the Current state on this page

Webflow's states article says Current is applied when the link points at the page you have open. Select one nav link. Open Element settings with D. In Link settings, set the type to Page and choose the page you are designing from the Page dropdown. If you are on the homepage, choose the homepage.

Go to the Style panel. A green Current label appears in the Selector. Press S if the Style panel is closed. If you do not see Current, open Inherited selectors and choose the All Links tag. The states article says Current will apply to that tag as well. Prefer the Nav link class when you can. All Links would mark every text link on the site that points at the open page, including a footer link, not only the navbar.

A section link can use Current too. Set the type to Page section, choose the section, then open the Style panel. Webflow says this helps when fixed links should show which section is in view. Style Current on the class those links share.

Style Current without changing the resting link

Current inherits from None, the default state. A color you do not change on Current still comes from None. A color you set while the green label is showing belongs to Current only.

Change one thing a visitor can notice, such as the text color or an underline. The resting links should stay readable. Current is a marker, not a second button style. If the whole bar shifts color, you edited None. Choose the base class in the Inheritance menu to leave Current and return to the default state, then check the resting color.

Choosing the base class in the Inheritance menu is the direct way back to the default state. You can also clear the link setting, style the class, and set the link again.

Do not remove the outline you may already have on Focused (keyboard). That state is how a keyboard user sees the link. Current is how every visitor sees the open page.

Tabs use Current as well, through Tabs settings rather than this nav link path. Styling the open tab is a separate task from the navbar. A class on a tab does not highlight the page links.

Point each link at its own page

After Current is styled on the shared class, set every nav link to the page it should open. Select Home, set the type to Page, and choose Home. Do the same for Work, Pricing, and Contact. The states article says you can update Link settings to point the links at other pages or sections after you style Current. The green label was only how you reached the state while one link matched the page on the canvas.

A link that still points at the homepage will show the current style whenever the visitor is on the homepage, even if the visible words say Pricing. Read Link settings on each item in the Navigator. The page name in the dropdown should match the label.

Page section links work the same way. Point each one at its section after the Current style is on the class. A URL in the URL field is not a page link. Use the Page type for your own static pages. The link settings article lists the Page dropdown for this nav link.

If the navbar is a component, edit the main component so the class and the Current style exist once. The next page link you add should use that same class.

Publish and walk the navbar

Publish the site and open Home. The Home link should show the Current color. Work, Pricing, and Contact should show the resting color. Open Pricing. The highlight should move to Pricing, and Home should return to the resting color.

If every link looks current, they all point at the same page, or you styled None instead of Current. If none of them change, Current was styled on a class the links do not use, or this navbar was not in the publish. Select a link on the live page's matching canvas page, confirm the green label's class is Nav link, and publish again.

If footer links also change color on the open page, Current is on All Links. Move the style onto Nav link: select a nav link, apply the class, open Current again by pointing that link at the page you have open, set the color there, and reset the Current color on All Links.

Check a phone width after you publish. The current style is on the class, so a menu that uses the same links should show it. A second set of links with a different class needs Current styled on that class too.