[WIDGET] Display Note Path Before Note Title

[SiriusXT]

By default, TriliumNext displays the note path in the ribbon. I prefer a more direct way to view the note path and navigate through it easily. Additionally, when hovering over a path segment, a list of its child notes will be shown to enable quick navigation—no need to open the tree. Similarly, when hovering over the note title, the child notes of the current note will also be displayed.

2025/03/30: Add the function of creating child notes.

Shortcut hints:

• Ctrl + Left Click: Open note in the background.
• Ctrl + Shift + Left Click: Open note in a new tab and activate it.
• Shift + Left Click: Open note in a new window.

/* https://github.com/orgs/TriliumNext/discussions/1760 */
const notePathTemplate = `
<div class="note-path-widget">
    <div class="note-path"></div>
</div>`;

const styleContent = `
.note-path-widget {
    display: inline-flex;
    visibility: visible !important;
    max-width: 40%;
    align-items: center;
    font-size: 110% !important;
    margin: 2px 5px 2px 0px;
    padding-top: 1px;
    padding-bottom: 1px;
}
    
body.zen .note-path-widget {
	display: none;
}

.note-path {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    
}

.note-path-widget span {
    display: inline-flex;
    align-items: center;
}

.note-path-widget a {
    max-width: 200px;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: inherit;
}

/* Title row style */
.component.title-row {
    height: 30px !important;
    min-height: 15px !important;
    margin-top: 1px !important;
}

.note-title-widget.component {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    display: flex;
}

.note-title-widget.component input.note-title {
    font-size: 110% !important;
    min-width: 58%;
}

.component.title-row .note-icon-widget.dropdown.component {
    height: 30px !important;
    min-height: 15px !important;
    padding-top: 0px !important;
    margin-left: 10px;
}

#center-pane .title-row .note-icon-widget button {
    margin-top: 0px !important;
    padding: 1px;
    padding-top: 2px;
    font-size: 140% !important;
}

body.zen .component.title-row {
    height: 30px !important;
}

/* Prevent ribbon's hover effect */
.ribbon-tab-container .ribbon-tab-title-icon {
    pointer-events: none;
}`;

const styleElement = document.createElement('style');
styleElement.innerHTML = styleContent;
document.head.appendChild(styleElement);

let tooltipTimer, tooltipEl, centerPane, cretedNoteTitle;

function appenndCreateNoteButton(tooltipContentEl, pathSegments) {
    const span = document.createElement('span');
    cretedNoteTitle = cretedNoteTitle ? cretedNoteTitle : (document.querySelector('.add-note-button')?.title || 'Create Note');
    span.innerHTML = `<span><span class="bx bx-plus"></span> <a href="#">${cretedNoteTitle}</a></span>`;
    span.querySelector('a').onclick = async e => {
        e.preventDefault();
        const { note } = await api.runOnBackend(noteId => api.createTextNote(noteId), [pathSegments.at(-1)]);
        api.activateNewNote(`${pathSegments.join('/')}/${note.noteId}`);
    };
    tooltipContentEl.appendChild(span);
}

// Handle hover events over note path link
function handleLinkHover(linkEl, pathSegments) {
    clearTimeout(tooltipTimer);
    tooltipEl?.remove();
    tooltipTimer = setTimeout(async () => {
        // Fetch child links for the hovered link
        const childrenLinks = await getChildrenLinks(pathSegments.at(-1), pathSegments);
        if ( !Object.keys(childrenLinks).length && pathSegments.at(-1).startsWith('_')) return;
        // Get the position of the link element to place the tooltip
        const { top, left, height } = linkEl.getBoundingClientRect();

        // Create and style the tooltip
        tooltipEl = document.createElement('div');
        tooltipEl.classList.add("tooltip", "note-tooltip");
        tooltipEl.style.cssText = `position:absolute;top:${top + height + window.scrollY}px;left:${left + window.scrollX}px;opacity:1!important;`;

        const tooltipInnerEl = document.createElement('div');
        tooltipInnerEl.classList.add("tooltip-inner");

        const tooltipContentEl = document.createElement('div');
        tooltipContentEl.classList.add("note-tooltip-content");
        tooltipContentEl.style.setProperty('min-height', '40px', 'important');
        for (const link of Object.values(childrenLinks)) {
            tooltipContentEl.appendChild(link[0]);
            tooltipContentEl.appendChild(document.createElement('br'));
        }

        if (!pathSegments.at(-1).startsWith('_')){
            appenndCreateNoteButton(tooltipContentEl, pathSegments);
        }

        tooltipInnerEl.appendChild(tooltipContentEl);
        tooltipEl.appendChild(tooltipInnerEl);
        document.body.appendChild(tooltipEl);

        tooltipEl.addEventListener('mouseenter', () => clearTimeout(tooltipTimer));
        tooltipEl.addEventListener('mouseleave', () => tooltipEl.remove());
        tooltipEl.addEventListener('click', () => tooltipEl.remove());
    }, 300);
}

// Bind mouse events to note path link elements
function bindNotePathEvents(el, pathSegments) {
    el.addEventListener('mouseenter', () => handleLinkHover(el, pathSegments));
    el.addEventListener('click', () => {
        clearTimeout(tooltipTimer);
        tooltipEl?.remove();
    });
    el.addEventListener('mouseleave', () => {
        clearTimeout(tooltipTimer);
        tooltipTimer = setTimeout(() => { tooltipEl?.remove(); }, 300);
    });
}

// Fetch child links for the given noteId and pathSegments
async function getChildrenLinks(noteId, pathSegments) {
    const children = await api.runOnBackend((noteId) =>
        api.sql.getColumn('SELECT noteId FROM branches WHERE parentNoteId = ? AND isDeleted = 0 ORDER BY notePosition ASC;', [noteId])
        , [noteId]);

    const basePath = pathSegments.join("/");

    return Object.fromEntries(await Promise.all(
        children.map(childId =>
            api.createLink(`${basePath}/${childId}`, { showTooltip: false, showNoteIcon: true })
                .then(link => [childId, link])
        )
    ));
}

module.exports = class extends api.NoteContextAwareWidget {
    static get parentWidget() { return 'center-pane'; }
    doRender() { this.$widget = $(``); return this.$widget; }
    async refreshWithNote() {
        if (!centerPane) { centerPane = document.getElementById('center-pane'); }
        const titleWidget = centerPane.querySelector(`.note-split[data-ntx-id="${this.noteContext.ntxId}"]`).querySelector(".note-title-widget:not(.hidden-int)");
        let notePath = titleWidget.querySelector('.note-path');

        // Create note path widget if not present
        if (!notePath) {
            const wrapper = document.createElement('div');
            wrapper.innerHTML = notePathTemplate;
            const notePathWidget = wrapper.firstElementChild;
            notePath = notePathWidget.querySelector('.note-path');
            titleWidget.prepend(notePathWidget);
            // Enable horizontal scrolling of note path
            notePath.addEventListener('wheel', e => {
                e.preventDefault();
                notePath.scrollLeft += e.deltaY;
            });
            notePath.addEventListener('scroll', () => {
                const leftShadow = notePath.scrollLeft > 0 ? 'inset 3px 0 2px -2px var(--main-border-color)' : '';
                const rightShadow = notePath.scrollLeft < notePath.scrollWidth - notePath.clientWidth - 1 ? 'inset -3px 0 2px -2px var(--main-border-color)' : '';
                notePath.style.boxShadow = [leftShadow, rightShadow].filter(Boolean).join(', ');
            });
        } else notePath.innerHTML = '';

        const fullPath = api.getActiveContextNotePath().split('/');

        // Generate note path links for each segment in the path
        for (let i = 0; i < fullPath.length - 1; i++) {
            const pathSegments = fullPath.slice(0, i + 1);
            const linkEl = (await api.createLink(pathSegments.join("/"), { showTooltip: false }))[0];
            notePath.appendChild(linkEl);
            notePath.appendChild(document.createTextNode("/"));
            bindNotePathEvents(linkEl, pathSegments);
        }

        notePath.scrollLeft = notePath.scrollWidth;

        // Handle title input wheel event for smooth scrolling
        const titleInput = titleWidget.querySelector("input.note-title");
        titleInput.addEventListener('wheel', e => {
            e.preventDefault();
            titleInput.scrollLeft += e.deltaY;
        });

        // Bind note path events to the title input
        bindNotePathEvents(titleInput, fullPath);
    }
}

---

Cite: This widget is inspired by https://github.com/zerebos/Trilium-Breadcrumbs.

[CobriMediaJulien]

This is awesome!

[maphew]

I love this navigation paradigm. Thank you for making a means to add it to Trilium!

General setup instructions

0. Go to whatever note used to keep track of your Trilum preferences in
1. Create a child note of type code: JS Frontend
2. Paste in the javascript code from above
3. Add #widget attribute (Alt-A)
4. Reload front-end (Ctrl-R) or restart Trilium

[perfectra1n]

Hey, that looks pretty great! There's this one too by Zerebos:
https://github.com/zerebos/Trilium-Breadcrumbs

Edit: I'm dumb, I see you even mentioned that in the footnotes of the post lol

[perfectra1n]

If you want to remove the root / note from always appearing at the top, change the line:

for (let i = 0; i < fullPath.length - 1; i++) {

to

for (let i = 1; i < fullPath.length - 1; i++) {