Dev tool website navbar examples

Really good product navbar tab from Supabase.

The product tab in your navbar is likely the most visited one on your site.

And there are a million ways of organizing information in there.

But ultimately, you want to help people understand what this product is about at a glance.

Even before they click. Even if they never click.

And how do you explain your product to devs?
By answering common questions:

• "What are the capabilities/features, specifically?"
• "What do people use it for in producution, specifically?"
• "Ok, so how is it different than ... I used before/use now?"

Supabase does it really nicely:

• They show features + give a one-liner explanation
• They show customer logos + a one-liner on what they got from it
• They list the most common competitors with links to deeper comparisons

Very solid pattern imho.

What I'd improve:

• Make the third testimonial copy more dev-centric, more specific -> It reads "... to become top 10 mortgage broker"
• I'd add a link to a page with all comparisons -> what if I don't see mine?

Navbar is a hugely important conversion lever on the dev-facing website. I saw it move the needle by x times in some cases/conversion events.

So, what does a good one look like?

Auth0 did a great job on their developer portal. But the learnings can be applied to your marketing website too.

What I like:

• They have an explicit division between docs and resources (you can do without it but I like it)
• Community (with all the events, forums, support etc) is clearly emphasized and discoverable
• When you click on the navbar tab you get an extensive mega menu with many options
• Each item in the mega menu gets a one-sentence description of what you'll find there

That makes it easy for devs to explore. Without having to click out to see what each tab/item means. And when devs know what you mean they are more likely to actually click out. And convert.

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 :)

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.

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)

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).

Simple yet powerful CTA in the navbar resources section.

The resources section in the navbar is mostly navigational. Well, the entire navbar is ;)

But you always have that one action that is more impactful than others.  

💚 And I think that a Plauground  is a great option. You get people to see how your product works. You let people play with it and see for themselves.

Not many next actions can be as impactful as getting people to experience the product.

Especially if you are a heavier infra tool that people cannot really test out in that first session. I mean, you won't really create a realistic example of your core database in 15 minutes to see how that new tool that you just saw works.

🔥 Making this CTA "big and shiny" and showing a glimpse of what will happen after clicking is great too.

🤔 2 changes I'd test out:

• Making the copy more descriptive performs better.  Like "Launch playground", "Play with Sandbox", or something around "Run an example project/app/environment".

• Showing something more exciting about the product (or playground/tour) on that visual

But the core idea behind making the playground your core navbar resource section CTA is just great.