Navbar Component Showcase

Introduction

The Navbar component is designed to provide flexible and customizable navigation options. Below are some examples of how to use and style this component.

Usage Examples

Basic Navbar

<Navbar
  brandName="MySite"
  className='w-full'
  links={[
    { text: 'Home', href: '/' },
    { text: 'About', href: '/about' },
    { text: 'Services', href: '/services' },
    { text: 'Contact', href: '/contact' },
  ]}
/>

Styled Navbar with Custom Colors

<Navbar
  brandName="StyledSite"
  links={[
    { text: 'Home', href: '/' },
    { text: 'Blog', href: '/blog' },
    { text: 'Portfolio', href: '/portfolio' },
    { text: 'Contact', href: '/contact' },
  ]}
  className="bg-blue-900 w-full"
  navClassName="p-6"
  linkClassName="hover:text-yellow-400"
  mobileMenuClassName="bg-blue-800"
/>