Shadcn navbars for portfolios
Portfolio navbars should be the smallest navbars on the web. Three or four items maximum: Work, About, Contact, plus an optional Journal/Writing link. Logo or wordmark on the left. No sticky scroll. No dropdowns. The visitor isn't here to browse a complex information architecture — they're here to look at a few projects and decide if they want to talk to you. Keep the navigation invisible enough that the work carries the page.
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 portfolio
The portfolio-navbar mistake is mimicking agency navbars. Personal portfolios are smaller information surfaces than agency sites — the same nav structure that works for a 30-person agency feels overbuilt on a single-person site. Use a navbar that matches your scale; otherwise the navbar itself signals 'I'm trying too hard'.
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 I link to my CV or LinkedIn from the navbar?
CV yes, LinkedIn maybe. A 'CV' or 'Resume' nav link sends recruiters straight to the document they need; LinkedIn is duplicate signaling that interrupts the portfolio flow. If you do link LinkedIn, put it in the footer with your other social links, not in the navbar. The navbar is for the highest-intent destinations: work, about, contact, CV. Everything else dilutes.
Is a 'Hire me' nav CTA too aggressive?
It depends on positioning. 'Hire me' works for actively-freelancing folks who want to optimize for inbound; it reads as desperate for senior in-house designers or engineers signaling tier. Default to 'Contact' or 'Get in touch' — neutral, action-oriented, and doesn't trigger the 'this person is between jobs' read. If you're confident in your tier, the work itself does the hire-me signaling.
Should I show my availability status in the navbar?
If you're freelancing, yes — a small dot ('● Available for projects' or '○ Booked through Q3') in the navbar saves recruiters and prospects a click. Update it. A dot showing 'Available' next to a calendar that's been dormant for two years is worse than no dot at all. If you can't commit to keeping it accurate within a week of changes, omit the indicator.
Browse all navbars
The Navbars category page has every Ruixen navbars variant — not just the curated picks for portfolio.
See all navbars →