yew_nav_link/
lib.rs

1//! # yew-nav-link
2//!
3//! A navigation link component for [Yew](https://yew.rs) applications with
4//! automatic active state detection based on the current route.
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` component with automatic active state management. When the link's
14//! target route matches the current URL, an `active` CSS class is automatically
15//! applied.
16//!
17//! ## Quick Start
18//!
19//! Add to your `Cargo.toml`:
20//!
21//! ```toml
22//! [dependencies]
23//! yew-nav-link = "0.3"
24//! ```
25//!
26//! ## Usage
27//!
28//! ```rust
29//! use yew::prelude::*;
30//! use yew_nav_link::NavLink;
31//! use yew_router::prelude::*;
32//!
33//! #[derive(Clone, PartialEq, Debug, Routable)]
34//! enum Route {
35//!     #[at("/")]
36//!     Home,
37//!     #[at("/about")]
38//!     About
39//! }
40//!
41//! #[component]
42//! fn App() -> Html {
43//!     html! {
44//!         <BrowserRouter>
45//!             <nav>
46//!                 <NavLink<Route> to={Route::Home}>{ "Home" }</NavLink<Route>>
47//!                 <NavLink<Route> to={Route::About}>{ "About" }</NavLink<Route>>
48//!             </nav>
49//!             <Switch<Route> render={switch} />
50//!         </BrowserRouter>
51//!     }
52//! }
53//!
54//! fn switch(route: Route) -> Html {
55//!     match route {
56//!         Route::Home => html! { <h1>{ "Home" }</h1> },
57//!         Route::About => html! { <h1>{ "About" }</h1> }
58//!     }
59//! }
60//! ```
61//!
62//! ## Helper Function
63//!
64//! For text-only links, use the [`nav_link`] helper function:
65//!
66//! ```rust
67//! use yew::prelude::*;
68//! use yew_nav_link::nav_link;
69//! use yew_router::prelude::*;
70//!
71//! # #[derive(Clone, PartialEq, Debug, Routable)]
72//! # enum Route {
73//! #     #[at("/")]
74//! #     Home,
75//! # }
76//! #[component]
77//! fn Menu() -> Html {
78//!     html! {
79//!         <ul class="nav">
80//!             <li>{ nav_link(Route::Home, "Home") }</li>
81//!         </ul>
82//!     }
83//! }
84//! ```
85//!
86//! ## CSS Classes
87//!
88//! The rendered `<a>` element receives:
89//! - `nav-link` - always applied
90//! - `active` - applied when route matches current URL
91//!
92//! Compatible with Bootstrap, Tailwind, and other CSS frameworks.
93//!
94//! ## Requirements
95//!
96//! - Yew 0.22+
97//! - yew-router 0.19+
98//!
99//! ## License
100//!
101//! Licensed under the MIT License. See [LICENSE-MIT](LICENSE-MIT) for details.
102
103mod nav_link;
104
105pub use nav_link::{NavLink, NavLinkProps, nav_link};
yew_nav_link/lib.rs

yew_nav_link/
lib.rs
