Shadcn navbars for agencies
Agency navbars announce craft before they announce structure. Most should be minimal: logo, 3-4 nav items (Work, Services, About, Journal/Blog), and a single 'Contact' CTA. Skip the multi-level dropdowns that consulting firms love — they signal procedure and process, the opposite of what design and development buyers want. The visitor wants to see your work first, then decide if you're a fit; the navbar's job is to make Work the easiest click.
npx shadcn@latest add https://ruixen.com/r/navbar-minimal
For Tailwind v3 or Base UI, swap the URL prefix — see /tailwind-v3-shadcn or /base-ui-shadcn.
Why this differs for agency
Agency-navbar mistakes are usually about over-structure. Sub-menus listing 'Strategy / Brand Identity / Visual System / Motion Design' read as agency-jargon overload. One 'Services' top-level link to a single page covering everything you do is cleaner and converts better. Save the discipline-by-discipline breakdown for the Services page itself.
Recommended components
Curated picks from the Ruixen registry that fit this use case. Click through to the canonical component docs for code, previews, and props.
Frequently asked questions
Should our agency navbar list specific services?
No — keep 'Services' as a single nav item linking to one services page. Listing each discipline (UX research, visual design, frontend dev, motion) in the navbar fragments your work into procurement categories that lower-tier agencies use. A senior agency presents itself as a unit ('we design and build digital products'), not as a checklist of disciplines. Save the breakdown for the services page where it can have nuance.
Where should the contact CTA go?
Far-right, as a single button that's visually distinct from the nav items. 'Contact', 'Start a project', or 'Work with us' all work; 'Get in touch' is fine but generic. Avoid two CTAs in the navbar — agencies don't have a 'sign in' equivalent, so the 'Contact' button doesn't need to compete with anything. One clear button, end of nav, every page. That's the pattern.
Is a sticky navbar the right choice?
Sticky-on-scroll works well for agency sites because the case study pages are long-scroll. Visitors deep into a case study want one-click access back to navigation. Use a translucent or background-blur sticky navbar that doesn't dominate when overlaid on case study imagery. Avoid the 'navbar shrinks on scroll' pattern — it's a transition that adds visual noise without earning its complexity.
Browse all navbars
The Navbars category page has every Ruixen navbars variant — not just the curated picks for agency.
See all navbars →