FirefoxSidebar
Vertical tab design for Firefox with dynamic indentation:: Sidebery and TreeStyleTabs (Legacy) themes available! [!] Moved to https://codeberg.org/macleod/FirefoxSidebar
Install / Use
/learn @macleod-ee/FirefoxSidebarREADME
Firefox Sidebar (w/ Dynamic Indentation)
As GitHub is now officially just a Microsoft Copilot feeder product instead of a universal, global, code repository, we have migrated this project to Codeberg, a non-profit.
While we understand that companies and organizations inevitably use our public code anywhere to seed their models, we would prefer not directly helping the organizations do it on the platform of their choosing, and make them work just a smidge harder to get it. As GH also hosts the most number of private repositories, there is an ethical issue with allowing any of our code reside here, public or not.
:: All new releases will be found here ::
TO SET YOUR NEW ORIGIN URL, USE THE FOLLOWING COMMAND:
git remote set-url origin https://codeberg.org/macleod/FirefoxSidebar.git
Previous readme with updated (git) instructions:
Firefox Sidebar (w/ Dynamic Indentation)
Features:
- Longest lasting, oldest, and possibly first, major dynamic Firefox sidebar w/ regular updates.
- Dynamic Indentation: Unfurls tab names and indentations on hover of the sidebar, saving you space while you browse.
- Native Vertical Tabs: Now built on top of the native Firefox vertical tab system.
- Tree style tabs: Tree style tab support by using Sidebery & TreeStyleTabs (legacy)
- Automatic themes: Automatically matches your Firefox theme colors!
- Custom theming: Custom theme configuration using Sidebery, or any other
- Tab Power Features: Tab groups and tab containers (both with visual identifiers), bookmarks, history, and more.
- Pinned Tabs: Pinned tabs stay at the top (right click to close)
- Sidebar Switching: switch between different sidebars by hovering over the switcher at the bottom.
- Cross-Platform: Should work on Windows, Linux, and Mac.
Note as of 2025.02.09: This is now using (and replaces!) the new built in Firefox 134+ vertical tabs, make sure you have updated. If you are still on an older version of Firefox, please check the releases page for the older versions.
Instructions (guide/setup)
The instructions may seem like quite a lot, but the entire proces takes less than a few minutes and does not require you to be overly technical. Most guides will entirely skip the first three main steps and expect you to know what you are doing, I don't, so I hope this helps as much as possible.
-
Activate vertical tabs and install sidebery:
- Right click on any open space on the tab bar
- Select "Turn on vertical tabs"
- Install Sidebery from Firefox Addons
-
Allow modifying your Firefox appearance:
- In Firefox navigate to
about:configin your address bar - Search for
toolkit.legacyUserProfileCustomizations.stylesheets - Double click or manually change this to
true
- In Firefox navigate to
-
Add the FirefoxSidebar settings:
- Navigate to
(about:profiles)in your address bar - Click on the
open root folderbutton for your current profile - Open this folder location in your terminal
- Clone this repo with the following command:
git clone https://codeberg.org/dxfiers/FirefoxSidebar "chrome"- You may need to install
gitfor this to work -> Git Downloads - If installing
gitis not possible, then download the latestSource Code (zip)files from Releases, create a folder calledchromeinside your current profile, unzip and move the files into that folder.
- You may need to install
- Navigate to
-
Load the custom Sidebery theme and settings (optional, suggested!):
- Navigate to Sidebery settings (Right click on the Sidebery extension icon > "Open Settings")
- Click on "Help" in the sidebar (Settings > Help)
- Click on "Import addon data"
- Select and load the
sidebery-data.jsonfile located in your 'chrome' folder from step 3.
-
Restart Firefox, and click on the 'Sidebery' extension, everything should now be working as expected.
FAQ
Sidebery Themes
If you dislike any of the theme presets for dark or light themes, or you have a particular color scheme in mind then navigate to Sidebery Settings > Style Editor (found at the end of the settings sidebar).
Custom Modifications
Add any additional Firefox modifications into custom.css, these will not be overwritten on future sidebar updates (when using git pull)
Visit userchrome.org if you have any questions.
TreeStyleTabs (Legacy)
Either add the firefox/treestyletabs.css to your TST addon preferences or import the treestyletabs-*.json preferences to your TST addon.
This is a legacy support theme and not often changed.
Updates
Release notes have migrated to here.
Related Skills
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
openpencil
2.1kThe world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
HappyColorBlend
HappyColorBlendVibe Project Guidelines Project Overview HappyColorBlendVibe is a Figma plugin for color palette generation with advanced tint/shade blending capabilities. It allows designers to
Flyaro-waffle-app
Waffle Delight - Full Stack MERN Application Rules & Documentation Project Overview A comprehensive waffle delivery application built with MERN stack featuring premium UI/UX, admin management, a
