Dev tool website navbar examples

A nice example of making navbar more developer-focused.

Ask for GitHub stars with a link to the repository.

It does three things:

• shows where your repository is and that you have something I can see
• lets me see that you have a popular repository
• reminds me that I can star it (if I am a returning user)

How to design the navbar product tab? This is what @PostHog does 👇

Figuring out what to put in the navbar is tricky:

• How should you name tabs
• What should go where
• Should you have "resources" or divide it

The "Product" tab is especially tricky.

It can get overloaded with a ton of content.

• Some teams put docs, and product videos there.
• Some show features, integrations, and code examples.
• Some go with solutions and per person per industry pages.
• Some just put everything in there ;)

I like how Posthog approached it:

• They use the word "features". Most devs like it more than other options.
• They show the data stack with which the tools integrate. That is an important obstacle handler pretty much always.
• They include customers in the product tab. Most devs want to see the product and may not go to the "customers" tab. This is a nice way to add social proof and increase conversion to user stories pages.
• They show customer logos and the results they got from the product. Again more social proof without clicking out.
• They use "customer stories" rather than "case studies" which again feels more devy .

I like it.

The "Resources" tab is the most loved and hated tab for developer marketers.

Ok so the common problem is that you have lots of different resources:

• docs
• product videos
• meetup videos
• recorded webinars
• learning center guides
• blog articles that don't talk about your product
• and so much more stuff

You want to showcase them in the navbar but where do you put them?

Under product? Company? Docs?

How to make sure that people don't go to your blog to read about your product just to find out that you talk about the industry problems there?

Enter the "Resources" tab. The "Miscellaneous" of the navbar world.

And typically it is just crammed with all stuff that doesn't fit anywhere. Just like any respectable misc folder would.  

How do you deal with that?

Snyk approached it in a clear and logical way:

• Add sub-navigation
• Make it clear to devs which parts are about the product and which ones are not
• They use "Using Snyk" and "Learn & Connect" that could be extended to "Using {Product} and "Learning {Category/Problem}"

I love this (and already stole the idea for our site).

Linked GitHub logo in the navbar

Adding CTA to your GitHub repo makes your company look more dev-friendly.

If you have a ton of stars I'd show those as well to play that social proof card.

But even without it, I think it's a good way to get more traffic to your repo and get those stars :)