Pinned Tabs Row

approved

by tnmyk

Shows pinned tabs in a separate row above the tab bar, like VS Code and IntelliJ. - This plugin has not been manually reviewed by Obsidian staff.

↓ 32 downloadsUpdated 5d ago0BSD
Install in ObsidianView on GitHub

Pinned Tabs Row

An Obsidian plugin that shows pinned tabs in a separate row above the tab bar, like VS Code and IntelliJ.

Features

  • Pinned tabs get their own row on top of the tab bar; unpinned tabs stay in the row below
  • Compact pinned tabs option: pinned tabs collapse into an icon-only strip (VS Code style)
  • Pinned and unpinned rows scroll horizontally when full — no layout shifts, no tab reordering side effects
  • Commands:
    • Pin or unpin current tab — toggle pin without touching the mouse
    • Unpin all tabs — clear the pinned row in one shot

How it works

Pure CSS. Obsidian marks pinned tabs with a .mod-pinned status icon inside the tab header, which enables :has(.mod-pinned) selectors. When a tab is pinned, the tab bar switches from flexbox to a CSS grid with three rows:

pinned tabs    ← grid row 1
─────────────  ← grid row 2 (divider, rendered via ::before)
unpinned tabs  ← grid row 3

Tab headers are never moved in the DOM, so Obsidian's own tab rendering (updateTabDisplay) cannot interfere — no flicker, no disappearing tabs, no fighting with drag-and-drop.

The plugin's JavaScript is minimal: it toggles two body classes for the settings (enabled / compact) and registers a few commands.

Requirements

  • Obsidian 1.13.0 or later (needs :has() support)
  • Desktop or mobile — the layout adapts automatically

Installation

  1. Open Settings → Community plugins
  2. Select Browse, search for Pinned Tabs Row
  3. Install and enable the plugin

Usage

  • Right-click a tab → Pin (or run Pin or unpin current tab)
  • Pinned tabs jump to their own row on top
  • Click the pin icon on a pinned tab to unpin it
  • Optional: enable Compact pinned tabs in plugin settings for an icon-only pinned strip

Development

npm install
npm run dev     # watch mode
npm run build   # production build
npm run lint    # eslint

Releasing

  1. Bump version in manifest.json and add the matching entry to versions.json
  2. npm run build
  3. Tag the release with the exact version (no v prefix) and attach main.js, manifest.json, styles.css

For plugin developers

Search results and similarity scores are powered by semantic analysis of your plugin's README. If your plugin isn't appearing for searches you'd expect, try updating your README to clearly describe your plugin's purpose, features, and use cases.