dioxus_bootstrap/
breadcrumb.rs

1use dioxus::prelude::*;
2use dioxus_router::navigation::NavigationTarget;
3use dioxus_router::components::Link;
4
5#[derive(Clone, Props, PartialEq)]
6pub struct BreadcrumbProps {
7    #[props(optional)]
8    id: String,
9    #[props(optional, default = "".to_string())]
10    class: String,
11    #[props(optional, default = "/".to_string())]
12    divider: String,
13    children: Element,
14}
15
16#[component]
17pub fn Breadcrumb(props: BreadcrumbProps) -> Element {
18    let mut class_list = vec!["breadcrumb".to_string()];
19    
20    if !props.class.is_empty() {
21        class_list.push(props.class.clone());
22    }
23    
24    let class_list = class_list.join(" ");
25    let style = if props.divider != "/" {
26        format!("--bs-breadcrumb-divider: '{}';", props.divider)
27    } else {
28        String::new()
29    };
30    
31    rsx! {
32        nav {
33            id: props.id,
34            "aria-label": "breadcrumb",
35            ol {
36                class: class_list,
37                style: style,
38                {props.children}
39            }
40        }
41    }
42}
43
44#[derive(Clone, Props, PartialEq)]
45pub struct BreadcrumbItemProps {
46    #[props(optional)]
47    id: String,
48    #[props(optional, default = "".to_string())]
49    class: String,
50    #[props(optional, default = false)]
51    active: bool,
52    #[props(optional)]
53    href: Option<String>,
54    #[props(optional)]
55    link_to: Option<NavigationTarget>,
56    children: Element,
57}
58
59#[component]
60pub fn BreadcrumbItem(props: BreadcrumbItemProps) -> Element {
61    let mut class_list = vec!["breadcrumb-item".to_string()];
62    
63    if props.active {
64        class_list.push("active".to_string());
65    }
66    
67    if !props.class.is_empty() {
68        class_list.push(props.class.clone());
69    }
70    
71    let class_list = class_list.join(" ");
72    
73    if props.active {
74        rsx! {
75            li {
76                id: props.id,
77                class: class_list,
78                "aria-current": "page",
79                {props.children}
80            }
81        }
82    } else {
83        rsx! {
84            li {
85                id: props.id,
86                class: class_list,
87                match props.link_to {
88                    Some(to) => rsx! {
89                        Link {
90                            to: to,
91                            {props.children}
92                        }
93                    },
94                    None => rsx! {
95                        a {
96                            href: props.href.unwrap_or("#".to_string()),
97                            {props.children}
98                        }
99                    }
100                }
101            }
102        }
103    }
104}
dioxus_bootstrap/breadcrumb.rs

dioxus_bootstrap/
breadcrumb.rs
