dioxus_element_plug/components/
breadcrumb.rs

1use dioxus::prelude::*;
2
3/// Breadcrumb separator
4#[derive(Clone, PartialEq)]
5pub enum BreadcrumbSeparator {
6    Slash,
7    Arrow,
8    Custom(String),
9}
10
11impl BreadcrumbSeparator {
12    pub fn as_str(&self) -> String {
13        match self {
14            BreadcrumbSeparator::Slash => "/".to_string(),
15            BreadcrumbSeparator::Arrow => "›".to_string(),
16            BreadcrumbSeparator::Custom(s) => s.clone(),
17        }
18    }
19}
20
21/// Breadcrumb props
22#[derive(Props, Clone, PartialEq)]
23pub struct BreadcrumbProps {
24    #[props(default)]
25    pub children: Element,
26
27    #[props(default = BreadcrumbSeparator::Slash)]
28    pub separator: BreadcrumbSeparator,
29
30    #[props(default)]
31    pub class: Option<String>,
32
33    #[props(default)]
34    pub style: Option<String>,
35}
36
37/// Breadcrumb component for navigation paths
38#[component]
39pub fn Breadcrumb(props: BreadcrumbProps) -> Element {
40    let mut class_names = vec!["el-breadcrumb".to_string()];
41    if let Some(ref c) = props.class { class_names.push(c.clone()); }
42
43    rsx! {
44        div {
45            class: "{class_names.join(\" \")}",
46            style: props.style.clone().unwrap_or_default(),
47            role: "navigation",
48            aria_label: "Breadcrumb",
49            {props.children}
50        }
51    }
52}
53
54/// BreadcrumbItem props
55#[derive(Props, Clone, PartialEq)]
56pub struct BreadcrumbItemProps {
57    #[props(default)]
58    pub children: Option<Element>,
59
60    #[props(default)]
61    pub to: Option<String>,
62
63    #[props(default = false)]
64    pub replace: bool,
65
66    #[props(default = "/".to_string())]
67    pub separator: String,
68
69    #[props(default)]
70    pub on_click: Option<EventHandler<MouseEvent>>,
71
72    #[props(default)]
73    pub class: Option<String>,
74}
75
76/// BreadcrumbItem component for individual breadcrumb items
77#[component]
78pub fn BreadcrumbItem(props: BreadcrumbItemProps) -> Element {
79    rsx! {
80        span {
81            class: "el-breadcrumb__item",
82            if let Some(ref to) = props.to {
83                a {
84                    class: "el-breadcrumb__inner is-link",
85                    href: "{to}",
86                    onclick: move |e| {
87                        if let Some(handler) = props.on_click {
88                            handler.call(e);
89                        }
90                    },
91                    {props.children}
92                }
93            } else {
94                span {
95                    class: "el-breadcrumb__inner",
96                    {props.children}
97                }
98            }
99            span {
100                class: "el-breadcrumb__separator",
101                "{props.separator}"
102            }
103        }
104    }
105}
dioxus_element_plug/components/breadcrumb.rs

dioxus_element_plug/components/
breadcrumb.rs
