leptos_bootstrap/v5/
nav.rs

1use leptos::prelude::*;
2
3#[component]
4pub fn NavLink<'a>(
5    #[prop(into)] href: &'a str,
6    #[prop(optional)] active: bool,
7    #[prop(optional)] disabled: bool,
8    #[prop(optional, into)] class: &'a str,
9    children: Children,
10) -> impl IntoView {
11    let mut className = "nav-link".to_string();
12    if active {
13        className.push_str(" active");
14    }
15    if disabled {
16        className.push_str(" disabled");
17    }
18    let class = format!("nav-link {}", class);
19    view! {
20        <a class=class href=href>
21            {children()}
22        </a>
23    }
24}
25
26#[component]
27pub fn NavBar<'a>(#[prop(optional, into)] class: &'a str, children: Children) -> impl IntoView {
28    let class = format!("navbar {}", class);
29    view! { <nav class=class>{children()}</nav> }
30}
31
32#[component]
33pub fn NavBarBrand<'a>(
34    #[prop(into)] href: &'a str,
35    #[prop(optional, into)] class: &'a str,
36    children: Children,
37) -> impl IntoView {
38    let class = format!("navbar-brand {}", class);
39    view! {
40        <a class=class href=href>
41            {children()}
42        </a>
43    }
44}
45
46#[component]
47pub fn NavBarMenu(children: Children) -> impl IntoView {
48    view! {
49        <button
50            class="navbar-toggler"
51            type="button"
52            data-bs-toggle="collapse"
53            data-bs-target="#navbarNavAltMarkup"
54            aria-controls="navbarNavAltMarkup"
55            aria-expanded="false"
56            aria-label="Toggle navigation"
57        >
58            <span class="navbar-toggler-icon"></span>
59        </button>
60        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
61            {children()}
62        </div>
63    }
64}
65
66#[component]
67pub fn NavItem(children: Children) -> impl IntoView {
68    view! { <div class="navbar-item">{children()}</div> }
69}
70
71#[component]
72pub fn NavBarNav<'a>(#[prop(optional, into)] class: &'a str, children: Children) -> impl IntoView {
73    let class = format!("navbar-nav {}", class);
74    view! { <ul class=class>{children()}</ul> }
75}
76
77#[component]
78pub fn NavBarDropDown<'a>(
79    #[prop(into)] label: &'a str,
80    #[prop(optional, into)] class: &'a str,
81    children: Children,
82) -> impl IntoView {
83    let class = format!("navbar-item dropdown {}", class);
84    view! {
85        <li class=class>
86            <a
87                class="nav-link dropdown-toggle"
88                href="#"
89                role="button"
90                data-bs-toggle="dropdown"
91                aria-expanded="false"
92            >
93                {label}
94            </a>
95            <ul class="dropdown-menu">{children()}</ul>
96        </li>
97    }
98}
99
100#[component]
101pub fn NavBarDropDownItem<'a>(
102    #[prop(optional)] href: &'a str,
103    #[prop(optional, into)] class: &'a str,
104    children: Children,
105) -> impl IntoView {
106    let class = format!("dropdown-item {}", class);
107    if href.is_empty() {
108        view! { <li class=class>{children()}</li> }
109        .into_any()
110    } else {
111        view! {
112            <li>
113                <a class=class href=href>
114                    {children()}
115                </a>
116            </li>
117        }
118        .into_any()
119    }
120}
121
122#[component]
123pub fn NavBarText<'a>(#[prop(optional)] class: &'a str, children: Children) -> impl IntoView {
124    let class = format!("navbar-text {}", class);
125    view! { <span class=class>{children()}</span> }
126}
leptos_bootstrap/v5/nav.rs

leptos_bootstrap/v5/
nav.rs
