Description

Toggle Native Tab Bar gives you complete control over your browser's real estate. Whether you prefer the classic horizontal layout or the new native vertical tabs, this extension allows you to toggle that bar on and off instantly whenever you need it. It is the perfect companion for sidebar extensions like Tree Style Tab or Sidebery.

Key Features

• Flexible Scoping: Choose whether toggling the tab bar affects all Firefox windows (Global) or only the active one (Per-Window).
• Session Persistence: Your per-window toggle states are automatically saved and restored when you restart Firefox.
• Quick Access: Right-click the extension icon in the toolbar to quickly jump to the Options page.
• Dynamic Theme Matching: The toolbar icon automatically adapts its color to match your Firefox theme (Dark, Light, or Colorful).
• Theme-Responsive Design: The Options page and all setup documentation automatically switch between Light and Dark modes to match your browser's appearance.

Functionality examples

Firefox now offers two types of sidebars that can be used in combination with this add-on:

• Traditional Sidebar: The standard sidebar used by extensions like Tree Style Tab or Sidebery.
• New Sidebar (Select): The modern Firefox sidebar that allows switching between different sidebar views.
  • Note: In Vertical Tabs mode, these selections are integrated directly into the vertical tab bar.

Horizontal Tabs + Traditional Sidebar (TST)

Horizontal_Tabs-Normal_Sidebar_TST.mp4

Horizontal Tabs + New Sidebar (Select)

Horizontal_Tabs-Sidebar.mp4

Horizontal Tabs + Both Sidebars Visible

Horizontal_Tabs-Sidebar-Normal_Sidebar_TST.mp4

Vertical Tabs - Integrated Vertical Mode

Vertical_Tabs.mp4

Note

These examples show the add-on toggling the native tab bar while correctly preserving the state of both the traditional and new sidebar elements.

How to configure Toggle Native Tab Bar

(REQUIRED) Enable userChrome.css in Firefox (Skip if already enabled)

1. In Firefox, type about:config into the address bar and press Enter.
2. Search for toolkit.legacyUserProfileCustomizations.stylesheets and set it to TRUE to enable custom stylesheets.
3. Next, type about:profiles into the address bar.
4. Find the profile labeled "This is the profile in use and it cannot be deleted."
5. In the same row, click Open Folder under Root Directory to access your profile folder.
6. In the profile folder, create a new folder named chrome (if it doesn’t already exist).
7. Inside the chrome folder, create a file named userChrome.css (ensure it’s not userChrome.css.txt).

These steps will enable custom styling with the userChrome.css file.

(REQUIRED) Enter CSS to hide or show the native tab bar in userChrome.css

1. Open the userChrome.css file you created earlier in the chrome folder.
2. Add one of these CSS solutions to your userChrome.css file (below).
3. Save your userChrome.css file and restart Firefox to apply the changes.

Handling horizontal tab bar (only)

FF133+: Current solution (RECOMMENDED)

 #main-window[titlepreface*=" "] {
     #TabsToolbar {
         display: none;
     }

     #nav-bar {
         .titlebar-buttonbox-container {
             display: flex !important;
         }
     }
 }

FF133+: Original solution

  #main-window[titlepreface*=" "] #TabsToolbar {
      display: none;
  }

Up to FF132: Legacy solution (Only if on FF132 or earlier)

#main-window #titlebar {
    overflow: hidden;
    transition: height 0.3s 0.3s !important;
}

/* Hidden state: Hide native tabs strip */
#main-window[titlepreface*=" "] #titlebar { height: 0 !important; }

/* Hidden state: Fix z-index of active pinned tabs */
#main-window[titlepreface*=" "] #tabbrowser-tabs { z-index: 0 !important; }

Handling horizontal and vertical tab bars (FF136+)

FF136+: Current solution (RECOMMENDED)

#main-window[titlepreface*=" "] {
    #TabsToolbar {
        display: none;
    }

    #nav-bar {
        .titlebar-buttonbox-container {
            display: flex !important;
        }
    }
	
    #sidebar-main {
        display: none;
    }
}

FF136+: Original solution

#main-window[titlepreface*=" "] {
    #TabsToolbar {
        display: none;
    }
	
    #sidebar-main {
        display: none;
    }
}

Explanation & Reference

• This CSS targets the native tab bar components (horizontal and/or vertical) and hides them when a specific condition is met.
• The condition is based on the titlepreface property, which this add-on manipulates by adding or removing a space (" ").
• You can refer to Mozilla’s documentation for more details: MDN WebExtensions API - windows.update

(INFO) Window Control Buttons (Min/Max/Close)

Depending on which CSS solution you choose, the native window control buttons (minimize, maximize, and close) may be hidden along with the tab bar. This is easily managed:

• Preserve Native Buttons (RECOMMENDED): Use the Current Solution CSS provided above. It moves the native Firefox control buttons to the navigation bar so they remain fully accessible even when tabs are hidden.
• Other Workarounds: If you prefer a CSS solution that hides the entire titlebar area, you can still control the window using:
  • Keyboard Shortcuts: Alt+Space, N (Minimize) or Alt+Space, X (Maximize).
  • Taskbar Menu: Right-click the Firefox icon in your OS taskbar.
  • System Controls: Use Windows Key + Arrow Keys to snap or minimize.
  • Emulation Add-ons: Place standalone toolbar buttons for Minimize, Maximize, and Close.
    

(INFO) Add-on Icon & Theme Support

Toolbar Icon Meanings

The extension icon in the toolbar changes dynamically to reflect whether the native tab bar is currently suppressed or active.

• Tabs are Visible: Displays an outer frame with a tab strip line inside.
• Tabs are Hidden: Displays only the outer frame, indicating tabs are suppressed.

---

Add-ons Manager Appearance (about:addons)

The main extension icon is specifically designed with a subtle border to ensure it remains perfectly visible and professional-looking across both light and dark browser themes.

Light Mode	Dark Mode

---

Dynamic Theme Coloring (Advanced)

By default, the toolbar icon uses a fixed color. However, it supports Dynamic Icon Coloring using native SVG context-fill, allowing it to automatically match your theme's text color (Dark, Light, or Colorful).

1. Go to about:config.
2. Set svg.context-properties.content.enabled to true.

Important

Action Required: If you do not enable this setting, the add-on icon will remain black/fixed and will not adapt to your theme's text color.

The icon color automatically adapts to match your browser theme's text color.

Inspiration and credits

• This add-on was inspired by Sidebery's Dynamic Native Tabs feature

  • Dynamic Native Tabs (GitHub Description)
  • While Sidebery focuses on whether its own sidebar is displayed, this add-on toggles only the native tab bar.
  • This allows both the sidebar and native tab bar to be shown simultaneously if desired.
  • You do not even have to show your sidebar to use this add-on.
  • It also offers a more generic implementation that could work with other sidebar add-ons like Tree Style Tab.

• Attribution for the base add-on icon:

  • Icons made by Freepik from www.flaticon.com.

Version History

Version 0.9.8 (May 2, 2026) — Per-Window Toggling & Session Persistence

• Per-Window Toggling: Added support for toggling the tab bar on individual windows independently.
• Session Persistence: Per-window toggle states are now saved and restored using the browser sessions API.
• Quick Access: Added a right-click context menu to the toolbar icon for instant access to the Options page.
• Dynamic Version History: The "What's New" section in Options is now dynamic, showing all updates since your last visit.
• Icon Visibility: Updated the main extension icon with a subtle border for better visibility on all themes in the Add-on Manager.

Version 0.9.7.1 (April 26, 2026) — Icon Refresh

• Icon Refresh: Use the AMO icon for both about:addons page and AMO.

Version 0.9.6 (April 26, 2026) — Vertical Tabs Support & Dynamic Icon Coloring

• Vertical Tabs Support: Updated CSS instructions to support Firefox 136+ native vertical tabs.
• Dynamic Icon Coloring: Implemented dynamic SVG icons with context-fill to automatically match browser themes.
• Storage Modernization: Migrated to the asynchronous browser.storage.local API for improved reliability and data persistence.
• Project Hardening: Implemented CI/CD security best practices and standardized repository metadata (package.json).
• Project Reorganization: Organized all project assets into logical directories (icons/, ui/, options/).
• Build Modernization: Transitioned to the official Mozilla web-ext tool for standardized building and linting.
• Enhanced Options UI: Redesigned the Options page with a modern layout, dynamic versioning, and theme-aware favicons.
• Optimization: Reduced final XPI package size by 25% (compared to v0.9.5) through improved exclusion rules and asset optimization.
• Mozilla Compliance: Updated naming to "add-on" terminology and added accessibility metadata.

Version 0.9.5 (January 12, 2025) — Native Button Support Documentation

• Native Button Support: Documented a new (optional) CSS solution that allows using native min/max/close buttons instead of emulated ones.

Version 0.9.4 (December 14, 2024) — Keyboard Shortcut Support

• Keyboard Shortcut: Added keyboard support with "Ctrl+Alt+T" as the default shortcut to toggle the tab bar.

Version 0.9.3 (November 3, 2024) — Improved Instructions & Formatting

• Update Notifications: Added Firefox 133 userChrome.css change instructions to be displayed after add-on updates.
• Dismissible Instructions: Added a checkbox to disable showing installation instructions after an update until the next required change.
• OS-Specific Guides: Integrated better formatting and PC/Mac-specific instructions for initial userChrome.css setup.

Version 0.9.2 (June 24, 2024) — Bug Fixes

• Window Management: Fixed a bug where creating a new window did not behave as expected.

Version 0.9.1 (March 11, 2024) — Technical Update

• Compatibility Update: Updated the internal title delimiter from "XXX" to " " for better compatibility.

Version 0.9.0 (March 11, 2024) — Initial Release

• Core Functionality: Toggles the native Firefox tab bar via title preface manipulation.