yew-nav-link

Navigation link component for Yew with automatic active state detection.

Table of Contents

• Overview
• Installation
• Requirements
• Usage
  • Component Syntax
  • Function Syntax
• CSS Classes
  • Bootstrap Integration
  • Tailwind CSS
• API Reference
• Coverage
• License

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 automatically.

Installation

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

Requirements

Usage

Component Syntax

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

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

#[component]
fn App() -> Html {
    html! {
        <BrowserRouter>
            <Navigation />
            <main>
                <Switch<Route> render={switch} />
            </main>
        </BrowserRouter>
    }
}

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

fn switch(route: Route) -> Html {
    match route {
        Route::Home => html! { <h1>{ "Home" }</h1> },
        Route::About => html! { <h1>{ "About" }</h1> },
    }
}

Function Syntax

For text-only links, use the nav_link helper:

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

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

#[component]
fn Menu() -> Html {
    html! {
        <ul class="nav">
            <li>{ nav_link(Route::Home, "Home") }</li>
            <li>{ nav_link(Route::About, "About") }</li>
        </ul>
    }
}

CSS Classes

The component applies these classes to the rendered <a> element:

Bootstrap Integration

<ul class="nav nav-pills">
    <li class="nav-item">
        <NavLink<Route> to={Route::Home}>{ "Home" }</NavLink<Route>>
        <!-- Renders: <a class="nav-link active" href="/">Home</a> -->
    </li>
</ul>

Tailwind CSS

.nav-link {
    @apply px-4 py-2 text-gray-600 hover:text-gray-900;
}
.nav-link.active {
    @apply text-blue-600 font-semibold;
}

API Reference

NavLink<R> Component

nav_link<R> Function

fn nav_link<R: Routable>(to: R, children: &str) -> Html

Creates a NavLink with text content.

Code coverage is tracked via Codecov. Target: 95%+ coverage.

Sunburst

The inner-most circle is the entire project, moving away from the center are folders then, finally, a single file. The size and color of each slice represents the number of statements and the coverage, respectively.

Grid

Each block represents a single file in the project. The size and color of each block represents the number of statements and the coverage, respectively.

Icicle

The top section represents the entire project. Proceeding with folders and finally individual files. The size and color of each slice represents the number of statements and the coverage, respectively.

License

Licensed under the MIT License.