NavLink Component for Yew Router

Crates.io Version Crates.io Total Downloads Crates.io MSRV GitHub License GitHub repo size

NavLink is a component for Yew applications using Yew Router. It creates a navigational link that is aware of its active state based on the current route in the application.

Usage

```rs use yew::{html, prelude::*}; use yew_router::prelude::*; #[function_component(App)] pub fn app() -> Html { html! { } } ```

Examples

### Using *nav_link* function >
> in header or navbar > > ```html > ... >
  • > { nav_link(HomeRoute::IntroPage, "Home") } >
    • > > ... > ``` >
    ### Advanced example with [bootstrap](https://getbootstrap.com/) > [![yew](https://shields.io/badge/yew-0.21.0-darkgreen)](https://docs.rs/yew/0.21.0/yew/index.html) > [![yew-router](https://shields.io/badge/yew_router-0.18.0-darkgreen)](https://docs.rs/yew-router/0.18.0/yew_router/index.html) > >
    > index.html > > ```html > > > > > > > > > Your title > > > > > > > > > > > ``` >
    > >
    > main.rs > > ```rs > fn main() { > yew::Renderer::::new().render(); > } > ``` >
    > >
    > app.rs > > ```rs > #[function_component(App)] > pub fn app() -> Html { > html! { > > render={switch_main} /> > > } > } > ``` >
    > >
    > main_routes.rs > > ```rs > #[derive(Clone, Routable, PartialEq)] > pub enum MainRoute { > #[at("/home")] > HomeRoot, > #[at("/home/*")] > Home, > #[at("/register")] > RegisterPage, > #[at("/login")] > LoginPage, > #[not_found] > #[at("/404")] > NotFoundPage, > } > > pub fn switch_main(routes: MainRoute) -> Html { > match routes { > MainRoute::HomeRoot | MainRoute::Home => { > html! { render={switch_home} /> } > } > MainRoute::RegisterPage => html! { {html! { }} }, > MainRoute::LoginPage => html! { {html! { }} }, > MainRoute::NotFoundPage => html! { }, > } > } > ``` > >
    > >
    > home_routes.rs > > ```rs > #[derive(Clone, Routable, PartialEq)] > pub enum HomeRoute { > #[at("/home")] > HomePage, > #[at("/home/intro")] > IntroPage, > #[at("/home/features")] > FeaturesPage, > #[at("/home/billings")] > BillingsPage, > #[at("/home/faq")] > FaqPage, > #[not_found] > #[at("/home/404")] > NotFoundPage, > } > > pub fn switch_home(route: HomeRoute) -> Html { > match route { > HomeRoute::HomePage => html! {}, > HomeRoute::IntroPage => html! { { html! { } } }, > HomeRoute::FeaturesPage => html! { { html! { } } }, > HomeRoute::BillingsPage => html! { { html! { } } }, > HomeRoute::FaqPage => html! { { html! { } } }, > HomeRoute::NotFoundPage => html! { to={MainRoute::NotFoundPage}/>}, > } > } > ``` >
    > >
    > in navbar or header > > ```html > ... > > ... > ``` >

    License

    This project is licensed under the Apache License 2.0.