# Navbar component 01

> A sticky navigation header with centered logo and brand name flanked symmetrically by navigation links on both sides. Features a search icon button and responsive mobile dropdown menu, perfect for balanced logo-centric layouts.

A shadcn/ui block from the [@shadcn-studio](https://shadcnstudio.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-studio/navbar-component-01).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/navbar-component-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/navbar-component-01-light-2169fc8a16b5c142.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/navbar-component-01.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstudio.com/r/new-york-v4/navbar-component-01.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `button`, `dropdown-menu`, `utils`

## Files

### `src/registry/new-york/blocks/marketing-ui/navbar-component/navbar-component-01/page.tsx`

```tsx
import Navbar from '@/registry/new-york/components/blocks/navbar-component-01/navbar-component-01'

const navigationData = [
  {
    title: 'Home',
    href: '#'
  },
  {
    title: 'Products',
    href: '#'
  },
  {
    title: 'About Us',
    href: '#'
  },
  {
    title: 'Contact Us',
    href: '#'
  }
]

const NavbarPage = () => {
  return <Navbar navigationData={navigationData} />
}

export default NavbarPage
```

### `src/assets/svg/logo.tsx`

```tsx
// React Imports
import type { SVGAttributes } from 'react'

const Logo = (props: SVGAttributes<SVGElement>) => {
  return (
    <svg width='1em' height='1em' viewBox='0 0 328 329' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
      <rect y='0.5' width='328' height='328' rx='164' fill='black' className='dark:fill-white' />
      <path
        d='M165.018 72.3008V132.771C165.018 152.653 148.9 168.771 129.018 168.771H70.2288'
        stroke='white'
        strokeWidth='20'
        className='dark:stroke-black'
      />
      <path
        d='M166.627 265.241L166.627 204.771C166.627 184.889 182.744 168.771 202.627 168.771L261.416 168.771'
        stroke='white'
        strokeWidth='20'
        className='dark:stroke-black'
      />
      <line
        x1='238.136'
        y1='98.8184'
        x2='196.76'
        y2='139.707'
        stroke='white'
        strokeWidth='20'
        className='dark:stroke-black'
      />
      <line
        x1='135.688'
        y1='200.957'
        x2='94.3128'
        y2='241.845'
        stroke='white'
        strokeWidth='20'
        className='dark:stroke-black'
      />
      <line
        x1='133.689'
        y1='137.524'
        x2='92.5566'
        y2='96.3914'
        stroke='white'
        strokeWidth='20'
        className='dark:stroke-black'
      />
      <line
        x1='237.679'
        y1='241.803'
        x2='196.547'
        y2='200.671'
        stroke='white'
        strokeWidth='20'
        className='dark:stroke-black'
      />
    </svg>
  )
}

export default Logo
```

### `src/registry/new-york/components/blocks/navbar-component-01/navbar-component-01.tsx`

```tsx
import { MenuIcon, SearchIcon } from 'lucide-react'

import { Button } from '@/registry/new-york/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger
} from '@/registry/new-york/ui/dropdown-menu'

import Logo from '@/components/layout/logo'

type NavigationItem = {
  title: string
  href: string
}[]

const Navbar = ({ navigationData }: { navigationData: NavigationItem }) => {
  return (
    <header className='bg-background sticky top-0 z-50'>
      <div className='mx-auto flex max-w-7xl items-center justify-between gap-8 px-4 py-7 sm:px-6'>
        <div className='text-muted-foreground flex flex-1 items-center gap-8 font-medium md:justify-center lg:gap-16'>
          <a href='#' className='hover:text-primary max-md:hidden'>
            Home
          </a>
          <a href='#' className='hover:text-primary max-md:hidden'>
            Products
          </a>
          <a href='#'>
            <Logo className='text-foreground gap-3' />
          </a>
          <a href='#' className='hover:text-primary max-md:hidden'>
            About Us
          </a>
          <a href='#' className='hover:text-primary max-md:hidden'>
            Contact Us
          </a>
        </div>

        <div className='flex items-center gap-6'>
          <Button variant='ghost' size='icon'>
            <SearchIcon />
            <span className='sr-only'>Search</span>
          </Button>
          <DropdownMenu>
            <DropdownMenuTrigger className='md:hidden' asChild>
              <Button variant='outline' size='icon'>
                <MenuIcon />
                <span className='sr-only'>Menu</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className='w-56' align='end'>
              <DropdownMenuGroup>
                {navigationData.map((item, index) => (
                  <DropdownMenuItem key={index}>
                    <a href={item.href}>{item.title}</a>
                  </DropdownMenuItem>
                ))}
              </DropdownMenuGroup>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </header>
  )
}

export default Navbar
```

### `src/components/layout/logo.tsx`

```tsx
// SVG Imports
import LogoSvg from '@/assets/svg/logo'

// Util Imports
import { cn } from '@/registry/new-york/lib/utils'

const Logo = ({ className }: { className?: string }) => {
  return (
    <div className={cn('flex items-center gap-2.5', className)}>
      <LogoSvg className='size-8.5' />
      <span className='text-xl font-bold'>shadcn/studio</span>
    </div>
  )
}

export default Logo
```