How to Disable a Link Using CSS

By the end of this page, you will understand why CSS alone cannot truly disable an HTML link, what CSS can do visually, and the practical ways developers handle inactive or current-page links using HTML, CSS, and sometimes JavaScript.

A link (<a>) is an interactive HTML element. Its behavior comes from the browser and the href attribute, not from CSS.

CSS is mainly responsible for presentation:

• colors
• spacing
• fonts
• layout
• visual states

CSS does not normally change the meaning or built-in behavior of HTML elements in a reliable, semantic way. That means CSS can make a link look disabled, but it cannot truly turn a real link into a non-link in the same way a disabled attribute works on form controls like buttons.

For example, this CSS can make a link appear inactive:

.current-page {
  color: gray;
  text-decoration: none;
  cursor: default;
}

But if the element still has an href, it is still a link.

A commonly used CSS rule is:

.current-page {
  pointer-events: none;
}

This prevents mouse clicks in many modern browsers, but it is still not a complete or semantic "disabled" state:

• keyboard navigation may still matter in some contexts
• screen readers still treat it based on the HTML
• the element is still structurally a link if href exists

So the important idea is:

• CSS changes appearance
• HTML defines meaning

Think of HTML as the structure and purpose of a building, CSS as the paint and decoration, and JavaScript as the moving parts.

If a door is built into the wall, painting it gray does not remove the door. It only changes how it looks.

A link with an href is like that door:

• HTML says: "this is a door you can use"
• CSS says: "paint it gray"
• JavaScript says: "block the door from opening"

So if you want a link to be truly inactive, the best fix is often to change the HTML or behavior, not just the styling.

If your goal is to make the current page link look inactive, here are the main approaches.

1. Visual-only CSS styling

<a href="/about" class="current-page">About</a>

.current-page {
  color: #777;
  text-decoration: none;
  cursor: default;
}

This only changes appearance. The link still works.

2. Prevent pointer clicks with CSS

<a href="/about" class="current-page">About</a>

.current-page {
  pointer-events: none;
  color: #777;
  text-decoration: none;
  cursor: default;
}

This stops mouse interaction in many cases, so clicking does nothing. However, this is not a full semantic disabled state.

3. Better HTML for the current page

Consider this example:

<a href="/about" class="current-page">About</a>

.current-page {
  pointer-events: none;
  color: gray;
}

What happens step by step

1. The browser reads the HTML.
2. It sees an <a> element with an href of /about.
3. Because it has an href, the browser treats it as a link.
4. The browser then applies the CSS.
5. color: gray; changes the text color.
6. pointer-events: none; tells the browser to ignore pointer interactions like mouse clicks on that element.
7. If the user tries to click with the mouse, nothing happens.
8. But the element is still an anchor in the HTML, so this is still not the same as removing or disabling the link semantically.

Now compare that with JavaScript:

<a href= =>About

This concept appears often in navigation and UI design.

Current page in a navigation menu

A site menu often highlights the page the user is already viewing.

Example:

• Home
• About
• Contact

If the user is already on About, developers may:

• style it differently
• mark it with aria-current="page"
• leave it clickable
• or render it as plain text instead of a link

Temporarily inactive actions

Sometimes a UI shows an action that is unavailable, such as:

• "Upgrade" only for admins
• "Download" before a file is ready
• "Continue" until required data is filled in

In these cases, a button is often better than a link because buttons support disabled semantics more naturally.

Menu items controlled by permissions

In dashboards, some links may appear unavailable to certain users. Developers usually do one of these:

• hide the link entirely
• replace it with text
• show the link but intercept it with JavaScript and show a message

Documentation or tab navigation

Sometimes the current tab or current section is displayed in the same layout as links, but it should not be clicked again. A non-link element styled like the rest of the navigation is often the cleanest solution.

In real projects, developers usually choose one of a few practical patterns.

Pattern 1: Render a link only when navigation is valid

Instead of disabling a link with CSS, render different HTML.

<nav>
  <a href="/home">Home</a>
  <span class="current-page" aria-current="page">About</span>
  <a href="/contact">Contact</a>
</nav>

This is common in server-rendered apps and component-based frameworks.

Pattern 2: Keep the link and mark it as current

<a href="/about" aria-current="page" class="current-page">About</a>

This is useful when consistency matters and the team wants every nav item to remain a link.

Pattern 3: Guard behavior in JavaScript

1. Assuming CSS can truly disable a link

Broken expectation:

.current-page {
  color: gray;
}

This only changes appearance. The link still navigates.

2. Using pointer-events: none as a complete solution

.current-page {
  pointer-events: none;
}

This may block mouse clicks, but it does not fully replace proper semantics or behavior control.

How to avoid it:

• use it only when visual mouse blocking is enough
• prefer better HTML or JavaScript when behavior really matters

3. Using disabled on an anchor

Broken code:

<a href="/about" disabled>About</a>

disabled is not a valid disabling mechanism for standard anchor behavior.

How to avoid it:

• use a <button> for button-like actions

/* Visual-only styling */
.current-page {
  color: gray;
  text-decoration: none;
  cursor: default;
}

/* Mouse click blocking */
.current-page {
  pointer-events: none;
}

<!-- Current page kept as link -->
<a href="/about" class="current-page" aria-current="page">About</a>

<!-- Current page rendered as non-link -->
<span class="current-page" aria-current="page">About</span>

// Stop link navigation on click
document.querySelectorAll('.current-page').forEach(link => {
  link.addEventListener('click', event => {
    event.();
  });
});

Can CSS completely disable an HTML link?

No. CSS can change appearance and can sometimes block pointer clicks, but it does not truly disable the link's semantic behavior.

Does pointer-events: none disable a link?

It prevents pointer interaction such as mouse clicks in many cases, but it is not a full disabled state.

Can I use the disabled attribute on an <a> tag?

Not as a standard way to disable navigation. Anchors do not support disabled like buttons do.

What is the best way to show the current page in navigation?

Use aria-current="page" and either keep the link styled as current or render the current item as non-clickable text.

Should I use a link or a button for disabled actions?

Use a button for actions and a link for navigation. Buttons support disabled; links do not.

Is JavaScript required to stop a link from navigating?

If the link still exists with an href and you want to block its behavior, JavaScript is the reliable way to prevent navigation on click.

Why not just leave the current page link clickable?

You can. Many sites do. But if you want a cleaner user experience, you may visually mark it as current or render it differently.

• HTML anchor element: Links are created with <a>, so understanding anchors is essential.
• CSS pointer-events: This property is often used to block pointer interaction.
• JavaScript event.preventDefault: This is the standard way to stop default link navigation.
• aria-current: This attribute identifies the current item in navigation for accessibility.
• Buttons vs links: Choosing the correct element helps you get the right behavior and semantics.
• Accessibility in navigation: Current-page and inactive states should be clear to all users.
• Semantic HTML: The right HTML element usually solves problems better than styling alone.