SharePoint Online: Hiding "Shared with Us" link in Modern Menu

Problem

For apparently nearly 3 years, people have wanted to hide the “Shared with Us” menu item that is displayed in the Current navigation on modern SharePoint list views. The menu item is injected as 4th item on the menu on sites that are Group based. Item doesn’t exist on traditional Team sites although they would be modern.

Thoughts

There is no way to hide it by modifying the Current navigation, nor by disabling any feature.

Solution

Best I came up with was to inject CSS on all tenant sites, and hide it with simple CSS style. It’s not perfect solution, as the CSS is injected using JavaScript meaning when page is loaded, it will momentarily display the “Shared with us” link before the JavaScript is loaded and CSS is injected.

Good thing, though, is that it does work across all sites with just one deploy and can be easily modified.

Let’s do this

1. Clone and build my fork (https://github.com/jpalo/react-application-injectcss) of the handy CSS injection SPFx extension made originally by hugoabernier, thanks Hugo!
   - Hugo’s latest version is for SPFx 1.8.0, mine is 1.9.1, so in case you want to use the latest (as of writing) SPFx version, use my fork.
   - My code also assumes the custom.css is in /sites/cdn/Style%20Library/custom.css, but that is easily modified in case you want to use another location.
2. Before deploying the .sspkg to the tenant, ensure /sites/cds site collection exists, and upload the custom.css from the of the SPFx project to /sites/cdn/Style%20Library/custom.css
3. Depending on the user base of your tenant, you will need to assign proper Read permissions to the /sites/cdn site collection for all users (and possibly Guests) to be able to read the custom.css file