yew_nav_link/
lib.rs

1//! # yew-nav-link
2//!
3//! Navigation link component for [Yew](https://yew.rs) with automatic active
4//! state detection.
5//!
6//! [![Crates.io](https://img.shields.io/crates/v/yew-nav-link)](https://crates.io/crates/yew-nav-link)
7//! [![Documentation](https://docs.rs/yew-nav-link/badge.svg)](https://docs.rs/yew-nav-link)
8//! [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE-MIT)
9//!
10//! ## Overview
11//!
12//! `yew-nav-link` provides a [`NavLink`] component that wraps Yew Router's
13//! `Link` with automatic active state management. When the target route matches
14//! the current URL, an `active` CSS class is applied.
15//!
16//! ## Quick Start
17//!
18//! ```toml
19//! [dependencies]
20//! yew-nav-link = "0.4"
21//! ```
22//!
23//! ## Component Syntax
24//!
25//! ```rust
26//! use yew::prelude::*;
27//! use yew_nav_link::NavLink;
28//! use yew_router::prelude::*;
29//!
30//! #[derive(Clone, PartialEq, Debug, Routable)]
31//! enum Route {
32//!     #[at("/")]
33//!     Home,
34//!     #[at("/about")]
35//!     About
36//! }
37//!
38//! #[component]
39//! fn Navigation() -> Html {
40//!     html! {
41//!         <nav>
42//!             <NavLink<Route> to={Route::Home}>{ "Home" }</NavLink<Route>>
43//!             <NavLink<Route> to={Route::About}>{ "About" }</NavLink<Route>>
44//!         </nav>
45//!     }
46//! }
47//! ```
48//!
49//! ## Function Syntax
50//!
51//! For text-only links, use [`nav_link`] with explicit [`Match`] mode:
52//!
53//! ```rust
54//! use yew::prelude::*;
55//! use yew_nav_link::{Match, nav_link};
56//! use yew_router::prelude::*;
57//!
58//! # #[derive(Clone, PartialEq, Debug, Routable)]
59//! # enum Route {
60//! #     #[at("/")]
61//! #     Home,
62//! #     #[at("/docs")]
63//! #     Docs,
64//! # }
65//! #[component]
66//! fn Menu() -> Html {
67//!     html! {
68//!         <nav>
69//!             { nav_link(Route::Home, "Home", Match::Exact) }
70//!             { nav_link(Route::Docs, "Docs", Match::Partial) }
71//!         </nav>
72//!     }
73//! }
74//! ```
75//!
76//! ## Partial Matching
77//!
78//! Use `partial` prop to keep parent links active on nested routes:
79//!
80//! ```rust
81//! use yew::prelude::*;
82//! use yew_nav_link::NavLink;
83//! use yew_router::prelude::*;
84//!
85//! # #[derive(Clone, PartialEq, Debug, Routable)]
86//! # enum Route {
87//! #     #[at("/docs")]
88//! #     Docs,
89//! #     #[at("/docs/api")]
90//! #     DocsApi,
91//! # }
92//! #[component]
93//! fn Navigation() -> Html {
94//!     html! {
95//!         <nav>
96//!             // Active on /docs, /docs/api, /docs/*
97//!             <NavLink<Route> to={Route::Docs} partial=true>{ "Docs" }</NavLink<Route>>
98//!         </nav>
99//!     }
100//! }
101//! ```
102//!
103//! ## CSS Classes
104//!
105//! | Class | Condition |
106//! |-------|-----------|
107//! | `nav-link` | Always |
108//! | `active` | Route matches |
109//!
110//! Compatible with Bootstrap, Tailwind, and other CSS frameworks.
111//!
112//! ## Requirements
113//!
114//! - Yew 0.22+
115//! - yew-router 0.19+
116
117mod nav_link;
118
119pub use nav_link::{Match, NavLink, NavLinkProps, nav_link};
yew_nav_link/lib.rs

yew_nav_link/
lib.rs
