apps/www/content/docs/components/link.mdx
import { Link } from "@chakra-ui/react"
<Link href="...">Click here</Link>
Use the variant prop to change the appearance of the Link component
Use Link within a text to create a hyperlink
Add an external link icon to the Link component
Use the asChild prop to compose Link with framework links like (Next.js)
import { Link as ChakraLink } from "@chakra-ui/react"
import NextLink from "next/link"
const Demo = () => {
return (
<ChakraLink asChild>
<NextLink href="/about">Click here</NextLink>
</ChakraLink>
)
}
Use the _currentPage condition to style active links when using
aria-current="page".
<Link
href="/home"
aria-current="page"
_currentPage={{ color: "blue.500", fontWeight: "bold" }}
>
Home
</Link>
With routing libraries, set aria-current based on the current route:
import { Link as ChakraLink } from "@chakra-ui/react"
import NextLink from "next/link"
import { usePathname } from "next/navigation"
const NavLink = ({ href, children }) => {
const pathname = usePathname()
const isActive = pathname === href
return (
<ChakraLink asChild>
<NextLink
href={href}
aria-current={isActive ? "page" : undefined}
_currentPage={{ color: "blue.500", fontWeight: "bold" }}
>
{children}
</NextLink>
</ChakraLink>
)
}