GitHub Custom Global Navigation

This is a userscript to customize the global navigation of GitHub.

Usage

1. Install a userscript manager like Tampermonkey, Violentmonkey, or Greasemonkey
2. Go to GreasyFork or OpenUserJS
3. Click the install button
4. The userscript will open in your userscript manager where you can install it
5. Once installed, click your avatar in the top right to open the sidebar

6. "Customize global navigation" will be listed underneath the regular "Settings" option

   <img height="40%" width="40%" src="img/menu_option.png" alt="menu option for 'Customize global navigation'" title="GitHub Custom Global Navigation logo" />

Documentation

Configurations

There are two (2) preset configurations that are actively maintained and supported.

Happy Medium

This previews some the best features and aims to deliver a happy medium between the old and new styles without compromising on accessibility. It relies more on Github's CSS variables in hopes of adapting to their changes.

Old School

This aims to deliver an experience as close to the style March 2023 as reasonably possible without compromising on accessibility. Where applicable, it uses hardcoded values instead of CSS variables to prevent side effects from GitHub's changes.

Accessability

Accessibility is important. GitHub agrees.

This userscript should not make GitHub less accessible. However, this userscript doesn't go out of its way to improve accessability on existing elements, and elements added try to be consistent with existing ones.

If you have an accessibility concern with the userscript's operations or additions, please create a new issue.

Responsive Design

GitHub's new design is responsive, hiding and condensing more elements as screen width decreases. There are breakpoints at 1011px and 768px.

Because this userscript is highly customizable, it's complex to make every possible variant similarly responsive. However, the default configurations can be regularly tested during development. It's also worth noting userscripts are not popularly run on tablets or phones.

With these considerations in mind, this is the support priority order of screen widths:

1. 1011px - 1920px (e.g. laptops)
2. 1920px and up (e.g. external monitors)
3. 1011px and below (e.g. tablets, phones)

Theming

As of the time of writing, GitHub supports four (4) light and an equal number of dark themes.

This userscript does not have first-class support for sub-themes, but can tell light or dark preference either from GitHub (data-color-mode) or falling back to browser-level (data-color-mode), which typically matches the OS-level.

Archiving

Part of the challenge of maintaining the Old School configuration is finding enough archival resources to make it accurate. To help maintain this project and in the spirit of aiding future developers, the HTML of the main header tag and repository-container-header will be archived as breaking changes occur. These elements will also be archived in a post-script state for each supported configuration.

Maintenance

This was built with long-term maintenance in mind.

• Keeping selectors neatly sorted and in one place
• Minimizing DOM traversal
• Adding unique IDs to relevant HTML elements that don't have good selectors
• Logging errors cleanly

Background

In April 2023, GitHub released a public beta for a redesigned global navigation and asked for feedback.

In October 2023, GitHub initiated a public rollout and removed the opt-out from Release preview.

Credit

• Colors, icons, and element properties for theming were collected from a variety of sources

  • Internet Archive (donate)

  • GitHub

  • Gist

  • YouTube ^[1][2][3]

  • If you have video sources that show Old School user navigation around the website (or better yet, some HTML), please contribute to this thread

• Menu

  • Dependency: GM_config

• Archiving

  • Formatter: Web Formatter

• Logo

  • Silhouette: Mohamed Hassan

  • Optimization: SVGOMG

Not affiliated with Microsoft Corporation, GitHub, Inc., or any of their affiliations.