I have a question about styling an anchor component when it is on the active page.
Here is my code:
import Link from 'next/link';
import styled from 'styled-components';
const NavStyle = styled.nav`
display: flex;
justify-content: space-between;
.nav-link a {
text-decoration: none;
color: white;
padding: 10px;
background-color: #FFCF00;
}
`;
export default function Nav() {
return (
<NavStyle>
<div className="nav-link">
<Link href="/" passHref>
<a>HOME</a>
</Link>
<Link href="/pricing">
<a>PRICING</a>
</Link>
<Link href="/terms">
<a>TERMS</a>
</Link>
<Link href="/login">
<a>LOGIN</a>
</Link>
</div>
<Link href="/">
<a>LOGO</a>
</Link>
</NavStyle>
)
}
What I want is, when the I click on the link and move to another page, the active link (that's matched with the URL) would have a green background. I have tried this, but it doesn't make any change:
const NavStyle = styled.nav`
display: flex;
justify-content: space-between;
.nav-link a {
text-decoration: none;
color: white;
padding: 10px;
background-color: #FFCF00;
&[aria-current] {
background-color: green;
}
}
`;
Next.js won't add aria-current
to your active link; however, you can create a custom Link
component that checks if the current pathname
is the same as the href
prop.
import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";
const NavLink = ({ children, href }) => {
const child = React.Children.only(children);
const router = useRouter();
return (
<Link href={href}>
{React.cloneElement(child, {
"aria-current": router.pathname === href ? "page" : null
})}
</Link>
);
};
export default NavLink;
Then, you can use this component instead of the default Link
whenever you want to add aria-current
to the active link:
const NavStyle = styled.nav`
display: flex;
justify-content: space-between;
a {
background-color: #353637;
color: #fff;
padding: 1rem;
text-decoration: none;
&[aria-current] {
background-color: #faf9f4;
color: #353637;
}
}
`;
export default function Nav() {
return (
<NavStyle>
<div className="nav-link">
<NavLink href="/">
<a>HOME</a>
</NavLink>
<NavLink href="/pricing">
<a>PRICING</a>
</NavLink>
<NavLink href="/terms">
<a>TERMS</a>
</NavLink>
<NavLink href="/login">
<a>LOGIN</a>
</NavLink>
</div>
<Link href="/">
<a>LOGO</a>
</Link>
</NavStyle>
);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With