yew-nav-link 0.9.0

Navigation link component for Yew with automatic active state detection
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

//! # yew-nav-link
//!
//! Navigation link component for [Yew](https://yew.rs) with automatic active
//! state detection.
//!
//! [![Crates.io](https://img.shields.io/crates/v/yew-nav-link)](https://crates.io/crates/yew-nav-link)
//! [![Documentation](https://docs.rs/yew-nav-link/badge.svg)](https://docs.rs/yew-nav-link)
//! [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/RAprogramm/yew-nav-link/blob/main/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.
//!
//! ## Quick Start
//!
//! ```toml
//! [dependencies]
//! yew-nav-link = "0.9"
//! ```
//!
//! ## Component Syntax
//!
//! ```rust
//! 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:
//!
//! ```rust
//! use yew::prelude::*;
//! use yew_nav_link::{Match, nav_link};
//! use yew_router::prelude::*;
//!
//! # #[derive(Clone, PartialEq, Debug, Routable)]
//! # enum Route {
//! #     #[at("/")]
//! #     Home,
//! #     #[at("/docs")]
//! #     Docs,
//! # }
//! #[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:
//!
//! ```rust
//! use yew::prelude::*;
//! use yew_nav_link::NavLink;
//! use yew_router::prelude::*;
//!
//! # #[derive(Clone, PartialEq, Debug, Routable)]
//! # enum Route {
//! #     #[at("/docs")]
//! #     Docs,
//! #     #[at("/docs/api")]
//! #     DocsApi,
//! # }
//! #[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+

/// HTML attribute builders for navigation components.
pub mod attrs;

/// Reusable navigation UI components (badges, dropdowns, tabs, pagination).
pub mod components;

/// Error types returned by navigation operations.
pub mod errors;

/// Reactive hooks for route and navigation state.
pub mod hooks;

/// Core navigation primitives (lists, items, dividers).
pub mod nav;

/// [`NavLink`] component and [`Match`] strategy for active state detection.
pub mod active_link;

/// Path, URL, query string, and keyboard navigation utilities.
pub mod utils;

pub use active_link::{Match, NavLink, NavLinkProps, nav_link};
pub use attrs::{NavItemAttrs, NavLinkAttrs, NavListAttrs};
pub use components::{
    NavBadge, NavBadgeProps, NavDropdown, NavDropdownDivider, NavDropdownItem, NavDropdownProps,
    NavHeader, NavHeaderProps, NavIcon, NavIconProps, NavIconSize, NavLinkWithIcon,
    NavLinkWithIconProps, NavTab, NavTabPanel, NavTabPanelProps, NavTabProps, NavTabs,
    NavTabsProps, NavText, NavTextProps, PageItem, PageItemProps, PageLink, PageLinkProps,
    Pagination, PaginationProps
};
pub use errors::{NavError, NavResult};
pub use hooks::{
    BreadcrumbItem, Navigation, use_breadcrumbs, use_is_active, use_is_exact_active,
    use_is_partial_active, use_navigation, use_query_params, use_route_info
};
pub use nav::{NavDivider, NavDividerProps, NavItem, NavItemProps, NavList, NavListProps};
pub use utils::{is_absolute, join_paths, normalize_path};