文章 / COMPONENT ATLAS

面包屑Breadcrumbs

在文章标题上方展示 Home → 当前文章,帮助读者确认位置并返回首页。路径保持单行,长标题按可用宽度省略,窄屏下仍保留首页入口。

组件预览。

01 / COMPONENT PREVIEW
● Breadcrumbs

随笔 / 设计

让想法生根

把零散的念头,写成有迹可循的文字。

长标题单行省略

窄屏≤ 280px

保留首页入口,当前标题随可用宽度省略。

COMPONENT PREVIEW · 跟随全站主题

用法

02 / USAGE

下方展示组件的调用方式。

RUST · DIOXUS RSX
use crate::components::post::breadcrumbs::Breadcrumbs;

rsx! {
    // 公开文章:Home 使用客户端导航
    Breadcrumbs { title: "让想法生根".to_string() }

    // 后台文章预览:Home 使用整页加载
    Breadcrumbs {
        title: post.title.clone(),
        full_reload: true,
    }
}

主要属性

03 / PROPERTIES
属性 / 类型默认值说明
titleString必填当前文章标题;超出宽度时单行省略,完整标题保留在提示与无障碍文本中。
full_reloadboolfalseHome 是否整页加载。后台文章预览(/admin/preview)中设为 true,避免跨布局的客户端导航。
YGGDRASIL · 每一个细节,都有回应。src/components/post/breadcrumbs.rs
© 2026 Yggdrasil