Article Navigator

An Obsidian community plugin · 中文文档

Adds Previous / Next / See Also navigation to your notes through standard frontmatter properties. Supports a VitePress-style inline nav bar, floating side buttons, and automatic reverse linking — all without any external dependencies.

Features

Demo

Installation

Make sure you have turned off Restricted mode in Settings → Community plugins to allow using plugins.

Via Obsidian URI

1. click this link: obsidian://show-plugin?id=article-navigator to open the plugin page in Obsidian's Community plugin browser.
2. Click Install, then Enable.

Community plugin browser

1. Open Settings → Community plugins → Browse.
2. Search for Article Navigator.
3. Click Install, then Enable.

Manual installation

1. Download main.js, manifest.json, and styles.css from the latest release.
2. Copy the three files to <vault>/.obsidian/plugins/article-navigator/.
3. Reload Obsidian and enable the plugin in Settings → Community plugins.

Getting started

1 · Add navigation properties to a note

Open any note and run the command:

Article Navigator: Insert navigation properties into current note

This inserts three empty frontmatter keys if they are not already present:

---
PreviousArticle: ""
NextArticle: ""
SeeAlso: []
---

2 · Link to adjacent notes

Fill in the keys with wikilinks:

PreviousArticle: "[[My Previous Note]]"
NextArticle: "[[My Next Note]]"
SeeAlso:
  - "[[Related Topic A]]"
  - "[[Related Topic B]]"

3 · Navigate

• Click the inline nav cards at the bottom of the note.
• Click the floating side buttons at the document edges.
• Use the commands Go to previous article / Go to next article (assignable to hotkeys).

Settings reference

Display

Floating button behaviour

Tap navigation

Auto reverse linking

Property keys

Override the frontmatter key names used by the plugin.

Edits to these three fields are not saved on the fly — the inputs hold a draft until you click one of the two shared buttons at the bottom of the section. Both buttons are always visible but only become clickable once at least one key actually differs from the saved value.

The rename pass is safe to use when you reshuffle multiple keys at once (for example swapping A → B and B → A). Internally each affected file is processed in two phases: every source key is first moved to a unique temporary placeholder, then the placeholder is moved onto the final destination. This avoids any intermediate collision. If a target key is already present on a note from an unrelated source, the rename for that particular key on that note is skipped so unrelated data is never clobbered — the final notice tells you how many keys were skipped, if any.

Renaming uses Obsidian's processFrontMatter API, which means the YAML is normalised the same way Obsidian itself writes properties; cached navigation snapshots are also reset afterwards so the auto-backlink controller doesn't mistake the rename for a real user edit.

Display labels

Leave blank to use the default label for Obsidian's current language.

Commands

All three commands can be assigned to custom hotkeys in Settings → Hotkeys.

Development

Requirements

• Node.js ≥ 18 (LTS recommended)
• npm

Setup

git clone https://github.com/IvanHanloth/obsidian-article-navigator
cd obsidian-article-navigator
npm install

Scripts

Tip: You can also set the target vault via an environment variable:

VAULT_PATH=/path/to/my-vault npm run deploy

Project layout

src/
├── main.ts                 Plugin lifecycle — event wiring, onload / onunload
├── types.ts                Shared TypeScript types
├── constants.ts            CSS class names, timer durations
├── settings.ts             Settings interface, defaults, migration
├── settings-tab.ts         Settings UI
├── commands.ts             Command registration
├── i18n/
│   ├── index.ts            I18n class, locale detection
│   └── locales/
│       ├── en.ts           English
│       └── zh.ts           Chinese
├── nav/
│   ├── link-resolver.ts    Frontmatter link parsing and resolution
│   ├── frontmatter.ts      Frontmatter read / write helpers
│   └── auto-backlink.ts    Reciprocal link automation
└── ui/
    ├── view-manager.ts     Per-view refresh orchestration
    ├── floating-buttons.ts Floating prev / next buttons
    ├── inline-injections.ts Inline nav bar + See Also block
    ├── edge-handlers.ts    Edge / mobile tap handlers
    └── confirm-modal.ts    Confirmation dialog

Adding a locale

1. Create src/i18n/locales/<code>.ts implementing the Translation interface from src/i18n/index.ts.
2. Import and register it in the BUNDLES map in src/i18n/index.ts.
3. Add the locale code to the LocaleCode union type.

Releasing

1. Update minAppVersion in manifest.json if needed (see the Obsidian version reference).
2. Run npm version patch|minor|major — this bumps manifest.json, package.json, and versions.json.
3. Push the tag and create a GitHub release with main.js, manifest.json, and styles.css as release assets.

Compatibility

• Minimum Obsidian version: 1.4.0
• Mobile: ✓ fully supported (isDesktopOnly: false)
• No external network requests, no telemetry.

License

MIT License