Navbar 1

A responsive React navbar with Shadcn UI and Tailwind CSS, customizable Logo, desktop/Mobile Layouts, and action buttons.

Preview

Theme:

Installation

Usage

import { Navbar } from '@/components/navbar'

<Navbar />

Customization

The navbar is structured around a Config section and a set of Sub-components, keeping layout logic separate from content. Most changes only require editing one of these two areas.

Logo

Find the Logo function in the Sub-components section and replace its return value with your own markup.

// ============================================
// Sub-components
// ============================================
function DesktopNavbar() {...}
function MobileNavbar() {...}
function Buttons() {...}

function Logo() { 
  return ( 
    <MyLogo /> // Replace with your logo
  ) 
}

Action buttons

Find the Buttons function in the Sub-components section and update it with your own calls-to-action.

// ============================================
// Sub-components
// ============================================
function DesktopNavbar() {...}
function MobileNavbar() {...}

function Buttons() { 
  return (
    <div className="flex items-center gap-root-xs px-0">
      <Link href='#'>
        <Button variant='ghost' className='text-muted-foreground'>Log in</Button>
      </Link>

      <Link href='#'>
        <Button>Sign up</Button>
      </Link>
    </div>
  )
}

function Logo() {...}

Edit the LINKS array in the Config section. Each entry takes a text label and a url.

// ============================================
// Config
// ============================================
const LINKS = [
  { text: 'Home', url: '#' },
  { text: 'Pricing', url: '#' },
  { text: 'Blog', url: '#' },
  { text: 'Contact us', url: '#' },
  { text: 'Services', url: '#' },
  { text: 'Community', url: '#' },
]

Links render in the same order they appear in the array. Reorder entries to reorder the navigation.

Styling

<Navbar /> extends React.ComponentProps<'div'>, so you can pass a className prop to override or extend its styles directly.

<Navbar className='border fixed rounded-2xl' />

Animation

Animations are defined in the Config section using Motion MotionProps. You can adjust them independently for the overlay and the menu items.

Overlay

Controls the fade in/out of the mobile menu background.

// ============================================
// Config
// ============================================
const OVERLAY_ANIMATION: MotionProps = {
  initial: { opacity: 0 },
  animate: { opacity: 1 },
  exit: { opacity: 0 }
}

Controls how individual nav items enter and exit. The default uses a staggered blur-and-slide effect.

// ============================================
// Config
// ============================================
const ITEMS_CONTAINER_ANIMATION: MotionProps = {
  initial: "init",
  animate: "open",
  exit: "close",
  variants: {
    open: { transition: { delayChildren: stagger(0.07, { startDelay: 0.03 }) } },
    close: { transition: { delayChildren: stagger(0.05, { from: 'last' }) } },
  }
}

const ITEMS_ANIMATION: MotionProps = {
  variants: {
    init: { filter: 'blur(4px)', opacity: 0, y: 20 },
    open: { filter: 'blur(0px)', opacity: 1, y: 0 },
    close: { filter: 'blur(4px)', opacity: 0 },
  },
  transition: {
    duration: 1.5,
    ease: [0.19, 1, 0.22, 1]
  }
}