Design prompts for navbars

A navbar is the first thing a visitor reads and the map they return to all day, so it has one job: tell them where they are and hand them the next step. The best ones lead with a logo that links home, three to five links named for the customer journey, a current-page state, and one clear call to action, then reflow into a labeled menu on a phone. The prompts below are the most-copied navbar and navigation designs in the Superdesign library, from sticky glass SaaS headers to mega-menus, pill navs and animated dock components. Open any one to see the exact prompt behind it, then change the links, copy and brand colors and generate your own editable version in seconds.

How to prompt a navbar that looks designed, not generated

An AI design agent has a strong default for a navbar, and most of those defaults waste the slot: six equal ghost links, no current-page state, two competing buttons, an indigo gradient and the Inter typeface. A good prompt is really a list of constraints that override those defaults. Here is each default to override, the words that do it, and a template that bakes them all in.

Design a [dark or light] sticky navbar for [the product] that tells a visitor where they are and hands them their next step.
Logo: a wordmark on the left that links to home, the universal way back.
Links: [3 to 5] links named for the customer journey, for example Product, Pricing, Docs, Customers. Use real labels, not "Resources" or "Company".
Current state: mark the active link with weight and an accent underline so the visitor always knows where they are.
Primary action: one action-specific CTA on the right like "Start free trial", with a quiet secondary "Sign in" beside it. Not two competing buttons.
Sticky behavior: a compact bar that stays put on scroll, capped at five items with the rest in an overflow menu, and scroll-padding so anchor links are not hidden under it.
Mobile: collapse into a labeled "Menu" toggle that opens a full-screen or side drawer, with tap targets at least 48px.
Style: a neutral base with one [accent] color reserved for the active link and the CTA. Typeface [name], not the default. No indigo gradient.
Accessibility: a native nav landmark, keyboard-operable dropdowns, a visible skip link, and WCAG-level contrast on every label.

Link count and labels

Default: It drops six or more equal links with vague labels like Resources and Company, so there are too many choices and none of them is the real journey.

Constrain it: Ask for three to five links named for the customer journey, with real labels like Product, Pricing, Docs and Customers. Webflow and most navbar guides put the sweet spot at three to five.

The logo as a home anchor

Default: It places a decorative icon-plus-wordmark that links nowhere, so visitors lose the universal way back to home.

Constrain it: Ask for a left wordmark that links to home, the exit users expect on every page, anchoring the start of the bar.

One clear call to action

Default: It stacks two competing gradient buttons and a vague "Get Started", so no single next step stands out.

Constrain it: Ask for one action-specific primary CTA on the right, like "Start free trial", with a quiet secondary "Sign in" beside it so the next step is obvious.

Current-page state

Default: It makes every link look identical, so there is no current-page state and the visitor cannot tell where they are.

Constrain it: Ask for the active link to be marked with weight and an accent underline or pill, so the navbar always answers "you are here".

Mobile reflow

Default: It either crams the desktop links onto a phone or hides them behind a bare hamburger with no label.

Constrain it: Ask for a labeled "Menu" toggle that opens a full-screen or side drawer with large tap targets. Nielsen Norman Group found hidden navigation is used in only 27% of cases and is 39% slower than visible navigation.

Sticky behavior and color

Default: Left alone it builds a fixed indigo-to-purple gradient bar in Inter, packed with seven or more items, that eats the screen and breaks on zoom.

Constrain it: Ask for a compact sticky bar capped at five items with the rest in an overflow menu, one accent on a neutral base, a named typeface, and scroll-padding so anchor links are not hidden under it.

Frequently asked questions

What makes a good navbar?

It answers two questions fast: where am I, and where do I go next. Lead with a logo that links home, three to five links named for the customer journey, a clear current-page state, and one call to action. Keep it consistent on every page, reflow it into a labeled menu on mobile, and reserve one accent color for the active link and the CTA. Restraint and a clear hierarchy do more than another link ever will.

How many items should a navbar have?

Three to five primary links is the common sweet spot. That keeps the choices scannable, lowers cognitive load, and leaves room for readable labels without truncation. If you genuinely have more, group the extras into a dropdown or an overflow "More" menu rather than stretching the bar, and never push past five items in a sticky bar.

Should a navbar be sticky or fixed?

Sticky usually wins for pages where people navigate a lot, like landing pages, docs and product pages, because it keeps the links and CTA in reach without the visitor scrolling back up. Keep it compact, cap it at about five items, and add scroll-padding so anchor links are not hidden under it. Watch the accessibility traps: sticky bars can break on zoom and cover focusable elements, so test with the keyboard.

Where should the logo and CTA go in a navbar?

Put the logo on the left, because that is where people look for it, and make it link home. Put the primary CTA on the right, where the eye lands last, and keep it to one action-specific button like "Start free trial" with a quiet "Sign in" beside it. The links in the middle should map to your customer journeys, not your internal org chart.

Why does my AI-generated navbar look generic?

Because a vague prompt gets the model defaults: a floating dark bar with an indigo-to-purple gradient, the Inter typeface, six equal ghost links with no current-page state, and a vague "Get Started". Name three to five real link labels, ask for a current-page state and a labeled mobile menu, set one accent color on a neutral base, pick a named typeface, and it stops reaching for the average.

How do you write a prompt to generate a navbar?

Describe the job, not the vibe: a logo that links home, the three to five real link labels, the active-state treatment, one action-specific CTA, how it sticks and reflows on mobile, and one accent color on a neutral base with a named typeface. The template above walks through each part, and you can open any example here to see a full prompt that works. Stuck on something? Ping us and we will sort it out together.