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.9"

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.23+
• yew-router 0.20+

Re-exports

pub use active_link::Match;

pub use active_link::NavLink;

pub use active_link::NavLinkProps;

pub use active_link::nav_link;

pub use active_link::nav_link;

pub use attrs::NavItemAttrs;

pub use attrs::NavLinkAttrs;

pub use attrs::NavListAttrs;

pub use components::NavBadge;

pub use components::NavBadgeProps;

pub use components::NavDropdown;

pub use components::NavDropdownDivider;

pub use components::NavDropdownItem;

pub use components::NavDropdownProps;

pub use components::NavHeader;

pub use components::NavHeaderProps;

pub use components::NavIcon;

pub use components::NavIconProps;

pub use components::NavIconSize;

pub use components::NavLinkWithIcon;

pub use components::NavLinkWithIconProps;

pub use components::NavTab;

pub use components::NavTabPanel;

pub use components::NavTabPanelProps;

pub use components::NavTabProps;

pub use components::NavTabs;

pub use components::NavTabsProps;

pub use components::NavText;

pub use components::NavTextProps;

pub use components::PageItem;

pub use components::PageItemProps;

pub use components::PageLink;

pub use components::PageLinkProps;

pub use components::Pagination;

pub use components::PaginationProps;

pub use errors::NavError;

pub use errors::NavResult;

pub use hooks::BreadcrumbItem;

pub use hooks::Navigation;

pub use hooks::use_breadcrumbs;

pub use hooks::use_is_active;

pub use hooks::use_is_exact_active;

pub use hooks::use_is_partial_active;

pub use hooks::use_navigation;

pub use hooks::use_navigation;

pub use hooks::use_query_params;

pub use hooks::use_route_info;

pub use nav::NavDivider;

pub use nav::NavDividerProps;

pub use nav::NavItem;

pub use nav::NavItemProps;

pub use nav::NavList;

pub use nav::NavListProps;

pub use utils::is_absolute;

pub use utils::join_paths;

pub use utils::normalize_path;

Modules

active_link

NavLink component and Match strategy for active state detection.

attrs

HTML attribute builders for navigation components.

components

Reusable navigation UI components (badges, dropdowns, tabs, pagination). Navigation UI components.

errors

Error types returned by navigation operations.

hooks

Reactive hooks for route and navigation state. Reactive hooks for navigation state.

nav

Core navigation primitives (lists, items, dividers). Core navigation primitives.

utils

Path, URL, query string, and keyboard navigation utilities. Utility functions and helpers.