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

leptos_bootstrap/v5/
nav.rs
