# Navbar Centered Logo — React Navbar Component

> An editorial storefront header with a serif wordmark between two link groups; labels roll on hover and the bag count pops when it changes.

- Category: [Navbars](https://pixelpapa.com/components/navbars.md)
- Tags: navbar, centered, ecommerce, editorial, hover
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/navbars/navbar-centered-logo

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/navbar-centered-logo
```

The file is written to `components/pixelpapa/navbar-centered-logo.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/navbars/navbar-centered-logo.

## AI prompt

```text
Add the "Navbar Centered Logo" component from PixelPapa UI to this project.

What it is: An editorial storefront header with a serif wordmark between two link groups; labels roll on hover and the bag count pops when it changes.
Category: Navbars. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/navbar-centered-logo
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/navbar-centered-logo.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/navbar-centered-logo.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/navbar-centered-logo" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More navbars

- [Navbar Announcement Bar](https://pixelpapa.com/components/navbars/navbar-announcement-bar.md) (Pro): A navbar topped by a dismissible strip that ticks through announcements and folds away with a spring when closed.
- [Navbar Command Search](https://pixelpapa.com/components/navbars/navbar-command-search.md) (Pro): A docs navbar whose compact search field widens on focus or ⌘K into a filterable result list with arrow-key navigation.
- [Navbar Dynamic Island](https://pixelpapa.com/components/navbars/navbar-dynamic-island.md) (Pro): A compact black pill of links that swells on a spring into a live notification, drains a timer line, then shrinks back to navigation.
- [Navbar Floating Pill](https://pixelpapa.com/components/navbars/navbar-floating-pill.md) (Pro): A floating pill navbar that condenses as you scroll: it narrows on a spring, drops its release chip and swaps the CTA label for an arrow.
- [Navbar Glass Blur](https://pixelpapa.com/components/navbars/navbar-glass-blur.md): A frosted floating navbar that blurs and saturates whatever scrolls beneath it, with a specular highlight that tracks the pointer along the glass.
- [Navbar Mega Menu](https://pixelpapa.com/components/navbars/navbar-mega-menu.md) (Pro): Hover or focus a trigger and one shared panel springs to the new height while its content crossfades in the direction you moved.