2 unstable releases

0.2.0	Feb 10, 2024
0.1.0	Feb 10, 2024

#222 in GUI

26 downloads per month

Apache-2.0

13KB

NavLink Component for Yew Router

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

use yew::{html, prelude::*};
use yew_router::prelude::*;

#[function_component(App)]
pub fn app() -> Html {
    html! {
        <nav>
            <NavLink<AppRoute> to={AppRoute::Home}>{ "Home" }</NavLink<AppRoute>>
            <NavLink<AppRoute> to={AppRoute::About}>{ "About" }</NavLink<AppRoute>>
            <!-- ... other NavLinks -->
        </nav>
    }
}

Examples

Using nav_link function

in header or navbar

    ...
    <li class="nav-item">
        { nav_link(HomeRoute::IntroPage, "Home") }
    </li>
    <!-- same  
    <li class="nav-item">
     <NavLink<HomeRoute> to={HomeRoute::IntroPage}>
         {"Home"}
     </NavLink<HomeRoute>>
    </li>
    -->
    ...

Advanced example with bootstrap

index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>Your title</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
</body>

</html>

main.rs

fn main() {
    yew::Renderer::<app::App>::new().render();
}

app.rs

#[function_component(App)]
pub fn app() -> Html {
    html! {
        <BrowserRouter>
            <Switch<MainRoute> render={switch_main} />
        </BrowserRouter>
    }
}

main_routes.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! { <Switch<HomeRoute> render={switch_home} /> }
        }
        MainRoute::RegisterPage => html! { <HomeLayout> {html! { <RegisterPage/> }} </HomeLayout> },
        MainRoute::LoginPage => html! { <HomeLayout> {html! { <LoginPage/> }} </HomeLayout> },
        MainRoute::NotFoundPage => html! { <NotFoundPage/> },
    }
}

home_routes.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! {<Intro/>},
        HomeRoute::IntroPage => html! { <HomeLayout> { html! { <Intro/> } } </HomeLayout> },
        HomeRoute::FeaturesPage => html! { <HomeLayout> { html! { <Features/> } } </HomeLayout> },
        HomeRoute::BillingsPage => html! { <HomeLayout> { html! { <Billings/> } } </HomeLayout> },
        HomeRoute::FaqPage => html! { <HomeLayout> { html! { <FAQ/> } } </HomeLayout> },
        HomeRoute::NotFoundPage => html! {<Redirect<MainRoute> to={MainRoute::NotFoundPage}/>},
    }
}

in navbar or header

    ...
    <ul class="nav nav-pills d-inline-flex mt-2 mt-md-0 ms-md-auto" style="justify-content:center;">
        <li class="nav-item">
            <NavLink<HomeRoute> to={HomeRoute::IntroPage}>
                {"Home"}
            </NavLink<HomeRoute>>
        </li>
        <li class="nav-item">
            <NavLink<HomeRoute> to={HomeRoute::FeaturesPage}>
                {"Features"}
            </NavLink<HomeRoute>>
        </li>
        <li class="nav-item">
            <NavLink<HomeRoute> to={HomeRoute::BillingsPage}>
                {"Billing"}
            </NavLink<HomeRoute>>
        </li>
        <li class="nav-item">
            <NavLink<HomeRoute> to={HomeRoute::FaqPage}>
                {"FAQ"}
            </NavLink<HomeRoute>>
        </li>
        <li class="nav-item">
            <NavLink<MainRoute> to={MainRoute::RegisterPage}>
                {"Register"}
            </NavLink<MainRoute>>
        </li>
        <li class="nav-item">
            <NavLink<MainRoute> to={MainRoute::LoginPage}>
                {"Login"}
            </NavLink<MainRoute>>
        </li>
    </ul>
    ...

License

This project is licensed under the Apache License 2.0.

Dependencies

~16MB
~295K SLoC