Crate yew_nav_link 

yew-nav-link

Navigation link component for Yew with automatic active state detection.

Overview

yew-nav-link provides a NavLink component that wraps Yew Router’s Link with automatic active state management. When the target route matches the current URL, an active CSS class is applied.

Quick Start

[dependencies]
yew-nav-link = "0.4"

Component Syntax

use yew::prelude::*;
use yew_nav_link::NavLink;
use yew_router::prelude::*;

#[derive(Clone, PartialEq, Debug, Routable)]
enum Route {
    #[at("/")]
    Home,
    #[at("/about")]
    About
}

#[component]
fn Navigation() -> Html {
    html! {
        <nav>
            <NavLink<Route> to={Route::Home}>{ "Home" }</NavLink<Route>>
            <NavLink<Route> to={Route::About}>{ "About" }</NavLink<Route>>
        </nav>
    }
}

Function Syntax

For text-only links, use nav_link with explicit Match mode:

use yew::prelude::*;
use yew_nav_link::{Match, nav_link};
use yew_router::prelude::*;

#[component]
fn Menu() -> Html {
    html! {
        <nav>
            { nav_link(Route::Home, "Home", Match::Exact) }
            { nav_link(Route::Docs, "Docs", Match::Partial) }
        </nav>
    }
}

Partial Matching

Use partial prop to keep parent links active on nested routes:

use yew::prelude::*;
use yew_nav_link::NavLink;
use yew_router::prelude::*;

#[component]
fn Navigation() -> Html {
    html! {
        <nav>
            // Active on /docs, /docs/api, /docs/*
            <NavLink<Route> to={Route::Docs} partial=true>{ "Docs" }</NavLink<Route>>
        </nav>
    }
}

CSS Classes

Class	Condition
nav-link	Always
active	Route matches

Compatible with Bootstrap, Tailwind, and other CSS frameworks.

Requirements

• Yew 0.22+
• yew-router 0.19+

Structs

NavLink

Navigation link with automatic active state detection.

NavLinkProps

Properties for the NavLink component.

Enums

Match

Path matching strategy for NavLink active state detection.

Functions

nav_link

Creates a NavLink with the specified match mode.