Does Navbar Centered work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Navbar Centered

Editorial shop nav with a big centred serif wordmark that shrinks on scroll and a bag count.

Type: Navbar section
Styles: Minimal, Light
Licence: Charcoal UI Pro

About Navbar Centered

Navbar Centered is a fashion and lifestyle shop header: a thin note bar, links either side and a large serif wordmark in the middle that shrinks as you scroll, with search, account and a bag count.

It is a full-width navbar section for React and Tailwind CSS 4, in a minimal and light style. Preview it at any width above, then install it with one command.

When to use Navbar Centered

Fashion and lifestyle shops.
Galleries and print shops.
Bookshops and coffee roasters.
Plant and tea shops.

How it is built

The wordmark size is driven by scroll position, a left-side sheet handles mobile, and links, note and bag count are props.

It is composed from Sheet, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with Navbar Centered

Navbar Centered is part of 5 full templates, so you can see it in a finished page.

Atelier template: A gallery that happens to have a checkout.
Roastery template: Build a box, save every delivery.
Steep template: Loose-leaf, sold like it matters.
Fernhouse template: Plants that arrive happy.
Marginalia template: An independent bookshop, online.
Navbar Floating: A floating glass React navbar that hides on scroll with a mobile sheet
Navbar Mega Menu: A full-width React navbar with a mega menu on hover or focus
Navbar Announcement: A React navbar with a dismissible announcement bar, Cmd+K search and sheet
Sheet: An animated React side sheet on the native dialog element that you can fling closed

Install Navbar Centered

npx shadcn@latest add @charcoal/navbar-centered

Navbar Centered is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Navbar Centered work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Built from

Sheet: Side panel on the native <dialog> element. It slides in from either edge, and you can fling it back to close.

Navbar Centered as Markdown