Skip to main content

fc_dioxus/components/
breadcrumb.rs

1//! The path to the current page, from breadcrumb.css.
2use crate::{
3    core::{assets, attrs::component_attributes},
4    prelude::*,
5    theme::use_stylesheets,
6};
7const BEM: Bem = Bem::new("fc-breadcrumb");
8
9/// An ordered trail of [`Crumb`]s inside a named navigation landmark.
10#[component]
11pub fn Breadcrumb(
12    /// Names the landmark; "Breadcrumb" when omitted.
13    #[props(default)]
14    label: Option<AccessibleName>,
15    #[props(default)] class: Option<String>,
16    #[props(extends = GlobalAttributes)] attributes: Vec<Attribute>,
17    children: Element,
18) -> Element {
19    let attributes = component_attributes(
20        attributes,
21        ClassList::new(BEM.block()).extend(class.as_deref()),
22        &["aria-label"],
23    );
24    let label = label.map_or_else(|| "Breadcrumb".to_owned(), |l| l.to_string());
25    rsx! {
26        if use_stylesheets() { document::Stylesheet { href: assets::COMPONENTS_BREADCRUMB_CSS } }
27        nav { aria_label: label, ..attributes,
28            ol { class: BEM.element("list"), {children} }
29        }
30    }
31}
32
33/// One step in a [`Breadcrumb`]. A crumb without `href` is the current page.
34#[component]
35pub fn Crumb(
36    #[props(default)] href: Option<String>,
37    #[props(default)] class: Option<String>,
38    #[props(extends = GlobalAttributes)] attributes: Vec<Attribute>,
39    children: Element,
40) -> Element {
41    let current = href.is_none();
42    let link = crate::core::link::use_link(href);
43    let href = link.href.clone();
44    let attributes = component_attributes(
45        attributes,
46        ClassList::new(&BEM.element("link")).extend(class.as_deref()),
47        &["href", "aria-current"],
48    );
49    rsx! {
50        li { class: BEM.element("item"),
51            a { href, aria_current: current.then_some("page"), onclick: move |event| { link.follow(&event); }, ..attributes, {children} }
52        }
53    }
54}