Works great, exactly what I was looking for. It will be more convenient if you can add a forward and backward button in the front

[SiriusXT]

Works great, exactly what I was looking for. It will be more convenient if you can add a forward and backward button in the front

[Nriver]

Nice idea.

[zerebos]

Can you test this version and see if it works as you expect? I wasn't sure if you meant it to navigate the tree or to act as forward/backward history but I went with history.

The buttons should be hidden by default, just add the #history label to the widget to enable them.

/**
 * A widget to show note breadcrumbs at the bottom of the page.
 */
const TPL = `<div style="display: flex;align-items:center;gap:10px;padding: 10px; border-top: 1px solid var(--main-border-color); contain: none;">
<div id="history-buttons">
<button onclick="window.history.back()" class="tree-floating-button bx bx-left-arrow-circle tree-settings-button" title="Go Back"></button>
<button onclick="window.history.forward()" class="tree-floating-button bx bx-right-arrow-circle tree-settings-button" title="Go Back"></button>
</div>
<div id="breadcrumbs"></div>
</div>`;

const styles = `
/* Place your CSS below this */

/* Place your CSS above this */`;

class BreadcrumbWidget extends api.NoteContextAwareWidget {
    get position() {return 100;}
    get parentWidget() {return "center-pane";}

    constructor() {
        super();
        this.title = "";
    }

    isEnabled() {
        if (!super.isEnabled()) return false;
        const widgetDisable = api.startNote.hasLabel("disable");
        const noteDisable = this.note.hasLabel("breadcrumbsDisable");
        return !widgetDisable && !noteDisable;
    }

    doRender() {
        this.$widget = $(TPL);
        this.$breadcrumbs = this.$widget.find("#breadcrumbs");
        this.updateStyles();
        this.cssBlock(styles);
        return this.$widget;
    }

    async refreshWithNote() {
        await this.makeBreadcrumb();
    }

    async entitiesReloadedEvent({loadResults}) {
        if (loadResults.attributes.length) this.updateStyles();
        if (!this.note) return this.title = "";
        if (!this.title) this.title = this.note.title;
        if (this.note.title != this.title) {
            this.title = this.note.title;
            this.refresh();
        }
    }

    async makeBreadcrumb() {
        this.$breadcrumbs.empty();
        const notePath = api.getActiveContextNotePath().split("/");
        for (let n = 0; n < notePath.length; n++) {
            const path = notePath.slice(0, n + 1);
            const link = await api.createNoteLink(path.join("/"));
            this.$breadcrumbs.append(link);
            if (n < (notePath.length - 1)) this.$breadcrumbs.append(" / ");
        }
    }

    updateStyles() {
        const buttonWrapper = this.$widget.find("#history-buttons");
        if (!buttonWrapper) return; // This should never happen but... just in case
        const isVisible = buttonWrapper.css("display") !== "none";
        const shouldHide = !api.startNote.hasLabel("history");
        if (isVisible && shouldHide) buttonWrapper.hide();
        if (!isVisible && !shouldHide) buttonWrapper.show();
    }
}

module.exports = new BreadcrumbWidget();

[SiriusXT]

What I think is something like this, there are two buttons in front of the root, which means forward and backward, similar to a browser

[zerebos]

Yes that's what this does exactly!

[Nriver]

Looks nice. I tweaked it a little bit.

[SiriusXT]

Just now I added the wrong tag, now it works, great

[SiriusXT]

看起来不错。 我稍微调整了一下。

how to make it show above

[Nriver]

I just pushed my mods here https://github.com/Nriver/Trilium-Breadcrumbs/blob/main/src/widget.js

You can add a #top label to move it to the top.

[zerebos]

I liked the idea of moving it to the top a lot, feels like a much better fit for it! I think I'll make that the default. And I liked the tag-style links you did there, Nriver, and took inspiration for my own iteration.

https://github.com/rauenzi/Trilium-Breadcrumbs/assets/6865942/4fe328f6-9a74-4c4d-9c4d-e76524ccbdfb

https://github.com/rauenzi/Trilium-Breadcrumbs/assets/6865942/e3578d3d-78d9-4c32-84d6-063023a02f5f

[Nriver]

Wow, you made the buttons look better. The animation looks nice.

[zerebos]

Thanks, I wanted to be fancy 😄