Navigating Between Pages
2026 Edition

In the previous chapter, you created the dashboard pages and the shared layout that wraps them.

Now it is time to connect those pages. In this chapter, you will learn how to handle navigation with Qwik City, starting with a temporary homepage shortcut for local development, then improving the dashboard sidebar, and finally highlighting the active route.

🧭 Why navigation matters

Navigation is what turns a collection of pages into a coherent application. It helps users move through the interface, understand where they are, and switch between sections without friction.

In a dashboard, this matters even more. Users often move back and forth between routes such as the homepage, invoices, and customers. If navigation feels clumsy, the whole application feels clumsy.

Qwik City gives you the tools to make that experience smoother while keeping the code simple and predictable.

🔗 Using the <Link> component

For internal navigation, Qwik City provides the <Link> component.

It works like a standard anchor tag, but instead of writing <a href="...">, you write <Link href="...">.

In other words, the API stays familiar, but the router can now handle navigation inside your application.

Adding a temporary dashboard link on the homepage

Before improving the sidebar, let’s add one small shortcut to make local development more convenient.

Right now, when you run the project locally, the application opens on the homepage. To access the dashboard, you have to type /dashboard/ in the browser manually every time.

That works, but it quickly becomes repetitive while developing. So for now, we will temporarily update the homepage button so it points to the dashboard instead of the login page.

More precisely, we will change its href from /login to /dashboard/, and update the button label from Log in to Go to Dashboard.

Later in the course, once authentication is properly implemented, this button can be restored to its original purpose.

Open src/routes/index.tsx and update the existing button:

Save the file and open the homepage in your browser. The updated button should now take you directly to the dashboard, without editing the URL manually.

When to use <a> instead of <Link>

Do not assume that a regular <a> element is somehow wrong or outdated. In Qwik, it is still a perfectly valid part of the platform.

Qwik City provides <Link> as the standard way to navigate between routes inside your application. That does not mean a normal anchor should disappear from your toolbox.

A regular <a> element still makes sense when:

• you want standard browser navigation behavior,
• you are linking to an external website,
• or a full document navigation is simply the clearer and more direct choice.

Navigating with a button and useNavigate()

So far, navigation has been triggered by links in the interface. But sometimes a route change needs to happen programmatically.

In those cases, Qwik City provides useNavigate(), which lets you navigate in response to code rather than a regular link.

This is especially useful after a successful form submission, after a login, or after a button click that should redirect the user somewhere.

For example, if you wanted to reach the dashboard with a real button instead of a link, you could write:

This works well, but semantically it is not the same thing as a link.

A link naturally represents navigation to another page. A button represents an action.

So if the goal is simply to move the user to another route, Link is usually the better choice.

But when navigation depends on logic or happens after another action, useNavigate() becomes very useful.

Replacing sidebar <a> tags with <Link>

Now that you know how to use Link, it is time to apply it to the dashboard sidebar. This is a great way to see the difference it makes in practice.

At the moment, the sidebar navigation still uses regular <a> elements. Those links already work, so this is not about fixing broken navigation. It is about improving how navigation feels inside the dashboard.

Watch closely when you move between the dashboard pages in your browser. Did you see it? Each click triggers a full browser navigation.

Replacing those <a> elements with <Link> gives you a smoother, more app-like experience.

Open src/components/ui/dashboard/nav-links.tsx and import Link from @builder.io/qwik-city. Then replace each <a> tag with <Link>.

This change is not only cosmetic. A regular <a> element triggers a normal browser navigation, which reloads the page as a new document. A Qwik City <Link>, on the other hand, performs an SPA navigation and updates the route without a full page reload.

In this dashboard, that makes a real difference: the shared layout can stay in place while only the page content changes.

Save the file and test the sidebar in your browser. You should now be able to move between dashboard pages without triggering a full page navigation on each click.

✨ Displaying the active link

A common UI pattern is to highlight the current page so users can instantly see where they are.

Qwik City gives you access to the current URL through the useLocation() function.

Start by importing useLocation alongside Link:

Inside the NavLinks component, read the current pathname:

The pathname gives you the current route, such as /dashboard/ or /dashboard/customers/.

You can now compare that pathname with each link and apply different styles when they match.

At first glance, this looks correct. But if you test it, you will notice that the active class does not apply as expected.

The reason is simple: the current pathname includes a trailing slash, such as /dashboard/, while the link href values do not.

So even though both URLs point to the same page, the two strings are not identical, and the comparison fails.

The fix is simple: keep the same URL convention everywhere in your navigation links. In our case, that means adding a trailing slash to each href.

With that change in place, the active link highlighting works correctly, because both pathname and href now follow the same convention.

⚡ How navigation works in Qwik City

When a user clicks a <Link>, Qwik City intercepts the click and updates the route without reloading the entire document.

Because the dashboard already uses a shared layout.tsx, the sidebar can stay in place while only the page content inside the Slot changes.

That is why navigation feels smoother and more stable. The interface does not visually reboot on every click.

Under the hood, Qwik is also selective about what needs to resume or update, so navigation does not require waking up the entire application at once.

You now know how to create internal navigation with <Link>, highlight the active route, and understand why layouts make navigation feel more stable.

Your dashboard is no longer just a collection of pages. It is now a connected route system.

Recommended reading

To go deeper into Qwik City navigation, explore the official resources below:

• Qwik Docs API Link
• Qwik Docs Cookbook Nav Link

Source code

You can find the source code for chapter 5 2026 edition on GitHub.