NavLink

A navigation link element that you can use in your navigation sections, for example in the navbar. Just add a navlink class to your link to style it as a navigation link.

<div class="is-inline-flex">
    <a class="navlink">Link 1</a>
    <a class="navlink">Link 2</a>
    <a class="navlink">Link 3</a>
</div>

We provide an is-active modifier to mark a navigation link as active, and a is-disabled modifier to mark a navigation link as disabled.

<div class="is-inline-flex">
    <a class="navlink">Link 1</a>
    <a class="navlink is-active">Link 2</a>
    <a class="navlink is-disabled">Link 3</a>
</div>

Customize

The navlink element will apply the styles defined in the links.nav field of your theme configuration.

export default {
    links: {
        nav: {
            fontWeight: "bold",
            "&:hover": {
                color: "primary",
            },
            "&.is-disabled": {
                opacity: "0.5",
                pointerEvents: "none",
            },
        },
    },
    // ...other configuration
};