Skip to content

dive2Pro/roam-tabs

Repository files navigation

Roam Tabs

Manage your working pages with tabs.

Stack Mode 🥳

Screen.Recording.2025-11-29.at.16.mp4

Stack Mode is an alternative display mode for tabs that provides a unique visual experience. Instead of the traditional horizontal tab bar, pages are displayed in a stacked layout with horizontal scrolling.

Features

  • Stacked Layout: Pages are displayed side-by-side in a horizontal scrollable container, with each page showing a vertical spine (edge) that displays the page title
  • Visual Stacking: Pages overlap each other, creating a visual stack effect where you can see multiple pages at once
  • Spine Navigation: Click on the vertical spine (edge) of any page to focus and scroll to that page
  • Horizontal Scrolling: Scroll horizontally to navigate through your open tabs
  • Foldable Pages: Fold pages to their spine to save space. You can fold/unfold individual pages or all pages at once.
  • Minimap Navigation: A visual minimap appears at the bottom-right corner showing all open pages as blocks. You can drag the thumb or click anywhere on the minimap to quickly navigate to different positions. The minimap automatically hides when all pages fit within the viewport
  • Page Width Configuration: Customize the width of each page in Stack Mode (default: 650px) through the extension settings

How to Enable Stack Mode

  1. Go to Extension Settings
  2. Find "Tab Display Mode" option
  3. Select "stack" from the dropdown
  4. Alternatively, use the Command Palette and search for "Tabs: Change to Stack Mode"

Using Stack Mode

  • Navigate: Scroll horizontally or click on a page's spine to focus on it
  • Fold/Unfold: Click the chevron icon on a page's spine to fold/unfold it. Right-click the title to access "Fold All" / "Unfold All" options.
  • Close Tabs: Click the close button (×) on the spine of any page
  • Switch Pages: Click on the spine or content area of a page to make it active
  • Minimap Navigation:
    • The minimap displays at the bottom-right corner showing all your open pages as colored blocks. The active tab is highlighted.
    • The blue thumb (slider) represents your current viewport position
    • Drag the thumb to scroll through pages smoothly
    • Click anywhere on the minimap to jump to that position instantly
    • The minimap automatically hides when all pages are visible (no scrolling needed)

Stack Mode is particularly useful when you want to see multiple pages at once and prefer a more visual, spatial way of managing your tabs.

image

Open Page In a New Tab

You can open a new tab by pressing Ctrl or the Meta key and clicking the link (page or block reference).

You can enable the "Auto" mode, after which just clicking will open a tab (if the page tab exists, it will focus on that tab).

image

Switch Tab

image

You can open the switch palette by

  1. Command Pallete image

  2. custom hotkeys image

When the switch palette opens, the input text is automatically selected, so you can start typing immediately to search for tabs.

Drag to Reorder Tabs in Switch Palette

You can reorder tabs directly in the switch palette by dragging the handle icon (⋮⋮) on the right side of each tab item. This allows you to:

  • Drag to Reorder: Click and hold the drag handle (⋮⋮) on any tab item and drag it to a new position
  • Visual Feedback: The dragged item will show visual feedback (highlighted background and reduced opacity)
  • Auto-scroll: When dragging near the top or bottom of the list, the viewport will automatically scroll to help you reach items outside the visible area
  • Persistent Order: The new order is saved and will be reflected in your tab bar

Note: The drag handle only appears when there's no search query active, allowing you to reorder tabs when browsing the full list.

Open Tab in Sidebar

Shift + click on tabs

Right-Click to Close Tab(s)

You can right-click on a tab to close it or other tabs

Keyboard Shortcut for Closing the Current Tab

There are keyboard shortcuts available for closing tabs. You can set them up in the settings.

Pin Tab

You have the option to pin tabs to keep them in order at the beginning and prevent accidental removal.

Drag & Drop to rearrange the tabs

20230816-182549.mp4

Settings (Admin Only)

Initial Tabs for Visitors

As an admin, you can configure initial tabs that will be shown to visitors and collaborators when they first open the workspace. This feature allows you to:

  • Search and select pages from your Roam database
  • Set up a default set of tabs for new users
  • Manage the initial tabs list through a multi-select interface

To configure initial tabs:

  1. Go to Extension Settings
  2. Find "Initial Tabs for Visitors" section
  3. Use the search box to find and select pages
  4. Selected pages will appear as tags that can be removed individually
  5. Click the clear button (×) to remove all selections

Collaborator Tabs

When enabled, this option allows collaborators to save their personal tab state to browser local storage. Their tab configuration will be restored after page refresh, providing a personalized experience while still respecting the initial tabs set by admins.

🚨 Browser Compatibility Note

A core feature of this application relies on the modern window.navigation API.

✅ Supported Browsers: Chrome 102+, Edge 102+, Safari 16.4+, Opera 88+.

⚠️ Important: Firefox does NOT support this API by default. Using Firefox may cause navigation or routing features to malfunction. For the best experience during development and production, we recommend using Chrome, Edge, or Safari (16.4+).

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published