Obsidian folder navbar.

ch-transclude-nav.css

.markdown-preview-view:has(div[data-callout="nav"]) { scrollbar-gutter: auto; }

.internal-embed:has(div[data-callout="nav"]) { padding: 0; border: 0; }

div[data-callout="nav"] div.callout-fold,
.internal-embed:has(div[data-callout="nav"]) > div.embed-title,
.internal-embed:has(div[data-callout="nav"]) > div.embed-title { display: none }

p:has(div[data-callout="nav"]) { margin:0; }

div[data-callout="nav"] .callout-title-inner > .dataview > [data-tag-name="p"] a,
div[data-callout="nav"] .callout-title-inner > a { text-decoration: none; }

Example.md

await dv.view();

The content goes here, and a navigation appears above, with all files in the current directory or tagged with a tag that matches the name of the directory. It works great with Obsidian Folder Notes.

You can also manually specify it with dv.view("ShrimpFashion") and all files in /StrimpFashion or tagged #ShrimpFashion will be displayed.

This is a quick and dirty dump of this for a friend. It is possible the css is missing something, as it's out of my snippets directory and may have dependencies I did not include here. If he uses it and it fails, I'll have a bug report and will update it.

If you know Obsidian with Dataview, you should know how to install this. This link will help if you're not using Dataview's dv.view() feature. Oh, and that documentation appears to be slightly misleading: you can just drop the js file anywhere in your vault and it will pick it up. No path needed. I use /_assets/js (next to a templates directory, etc).

Note that Github renders this Markdown as if it were documentation. Which it is, but it's really example code for Obsidian.

Screenshot

It should look something like this. This is a directory with three files, with "Fing Fong Fooey" selected. Clicking either of the other two titles takes you to those entries.

nav.js

let root=input?.root ?? dv.current().file.folder;
let co='';
let firstco='';
let myName=dv.current().file.name;

dv.pages('"'+root+'" or #'+root).forEach(
  p => {
    if(p.file.name[0]=='_')
      return;
    if(p.file.name==root) {
      firstco='**[['+p.file.name+']]**';
      if(p.file.name==myName)
        firstco=`==${firstco}==`
      return;
    }
    if(p.file.name==myName)
      co+='==[['+p.file.name+']]==';
    else
      co+='[['+p.file.name+']]';
    co+=', '
  });

dv.span(`> [!nav] <small> ${firstco} : `+co.substring(0,co.length-2)+'</small>');