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.
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>
}
}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> ...
This project is licensed under the Apache License 2.0.