Show only the file name in top bar (hide directories)

General
1

Hi everyone,

I hope you’re all doing well! Apologies if this has been asked before—I tried searching but couldn’t find a solution.

Currently, the top bar displays the full path of the current file, including directories (e.g., Work/Notes/2025-07-14). However, when the file is in multiple subdirectories, the actual file name can get hidden especially in mobile view.

Is there a way to modify the top bar to show only the file name, without the directory path? Any configuration or workaround would be really helpful.

Thanks in advance!

2

Hey again! I couldn’t help myself— I put together a workaround. I did a quick test, and it seems to be working. If anyone wants to try it out, here’s the script. Just a heads-up: there might still be some bugs! :slight_smile:

Just put this in a space-script code block and give it a reload.

silverbullet.registerEventListener({ name: '*' }, (event) => {
    if (event.name === 'editor:pageLoaded' || event.name === 'editor:pageReloaded') {
        const parentEl = document.querySelector(
            '.main .inner .wrapper .sb-mini-editor .cm-editor .cm-scroller',
        );
        const titleEl = document.querySelector(
            '.main .inner .wrapper .sb-mini-editor .cm-editor .cm-scroller .cm-line',
        );

        if (titleEl) {
            const absolutePageName = titleEl.innerText.trim();
            const actualPageName = absolutePageName.split('/').pop();

            let newElement = document.getElementById('file-name');
            if (!newElement) {
                newElement = document.createElement('div');
                newElement.id = 'file-name';
                newElement.style.position = 'absolute';
                newElement.style.top = '0px';
                newElement.style.left = '0px';
                newElement.style.width = '100%';
                newElement.style.backgroundColor = 'var(--top-background-color)';
                newElement.style.pointerEvents = 'none';
                newElement.style.opacity = '0';
                parentEl.appendChild(newElement);
            }

            newElement.innerText = actualPageName;

            const cmLineElements = document.querySelectorAll(
                '.main .inner .wrapper .sb-mini-editor .cm-editor .cm-scroller .cm-content',
            );

            function toggleElements(isFocused) {
                if (isFocused) {
                    cmLineElements.forEach((el) =>
                        el.style.setProperty('opacity', '100%', 'important'),
                    );
                    newElement.style.setProperty('opacity', '0', 'important');
                } else {
                    cmLineElements.forEach((el) =>
                        el.style.setProperty('opacity', '0', 'important'),
                    );
                    newElement.style.setProperty('opacity', '100%', 'important');
                }
            }

            parentEl.addEventListener('focusin', () => toggleElements(true));
            parentEl.addEventListener('focusout', () => toggleElements(false));

            if (document.activeElement) {
                document.activeElement.blur();
            }

            if (document.activeElement.closest('.cm-scroller')) {
                toggleElements(true);
            } else {
                toggleElements(false);
            }
        } else {
            console.log('Page name container not found');
        }
    }
});
3 Likes