Navbar Block

The Navbar Component is a fully customizable and accessible navigation bar built with React and TypeScript. It provides a complete website navigation interface with modern design patterns, flexible layout sections, and customizable content areas.

🚀 Installation

npm install @nodeblocks/frontend-navbar-block

📖 Usage

import {Navbar} from '@nodeblocks/frontend-navbar-block';

Basic Usage
Advanced Usage

Live Editor

function BasicNavbar() {
  return (
    <Navbar
      leftContent={
        <Navbar.Logo src="/img/icon-small.png" alt="Company Logo" style={{height: '32px'}} />
      }
      centerContent={
        <div style={{display: 'flex', gap: '16px'}}>
          <Navbar.Link href="#home"><span>Home</span></Navbar.Link>
          <Navbar.Link href="#about"><span>About</span></Navbar.Link>
          <Navbar.Link href="#services"><span>Services</span></Navbar.Link>
          <Navbar.Link href="#contact"><span>Contact</span></Navbar.Link>
        </div>
      }
      rightContent={
        <Navbar.ButtonLink href="#login">Login</Navbar.ButtonLink>
      }>
      <Navbar.Left />
      <Navbar.Center />
      <Navbar.Right />
    </Navbar>
  );
}

Result

Live Editor

function AdvancedNavbar() {
  return (
    <Navbar
      leftContent={
        <Navbar.Logo src="/img/icon-small.png" alt="Company Logo" style={{height: '32px'}} />
      }
      centerContent={
        <div style={{display: 'flex', gap: '16px'}}>
          <Navbar.Link href="#home"><span>Home</span></Navbar.Link>
          <Navbar.Link href="#about"><span>About</span></Navbar.Link>
          <Navbar.Link href="#services"><span>Services</span></Navbar.Link>
          <Navbar.Link href="#contact"><span>Contact</span></Navbar.Link>
        </div>
      }
      rightContent={
        <Navbar.ButtonLink href="#login">Login</Navbar.ButtonLink>
      }>
      {({ defaultBlocks, defaultBlockOrder }) => ({
        blocks: {
          ...defaultBlocks,
          
          // 🏢 Custom Left Section with props override
          left: {
            ...defaultBlocks.left,
            props: {
              ...defaultBlocks.left.props,
              className: "custom-navbar-left",
              style: {
                display: 'flex',
                alignItems: 'center',
                gap: '15px',
                padding: '10px 20px',
                backgroundColor: '#f8f9fa',
                borderRadius: '12px',
                border: '2px solid #e9ecef'
              },
              children: (
                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                  <div style={{
                    width: '40px',
                    height: '40px',
                    backgroundColor: '#007bff',
                    borderRadius: '50%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    color: 'white',
                    fontSize: '1.2rem',
                    fontWeight: 'bold'
                  }}>
                    🚀
                  </div>
                  <div>
                    <div style={{ fontWeight: 'bold', fontSize: '1.1rem', color: '#343a40' }}>
                      TechCorp
                    </div>
                    <div style={{ fontSize: '0.8rem', color: '#6c757d' }}>
                      Innovation Hub
                    </div>
                  </div>
                </div>
              )
            },
          },
          
          // 🧭 Rich Center Navigation with full component override
          center: (
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: '8px',
              padding: '8px 16px',
              backgroundColor: '#fff',
              borderRadius: '50px',
              border: '1px solid #e9ecef',
              boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
            }}>
              {[
                { href: '#home', label: '🏠 Home', color: '#007bff' },
                { href: '#products', label: '📦 Products', color: '#28a745' },
                { href: '#about', label: '👥 About', color: '#17a2b8' },
                { href: '#contact', label: '📞 Contact', color: '#fd7e14' }
              ].map((item, index) => (
                <a
                  key={index}
                  href={item.href}
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: '6px',
                    padding: '10px 16px',
                    borderRadius: '25px',
                    textDecoration: 'none',
                    color: '#495057',
                    fontSize: '0.9rem',
                    fontWeight: '500',
                    transition: 'all 0.3s ease',
                    border: '1px solid transparent'
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.backgroundColor = item.color;
                    e.currentTarget.style.color = 'white';
                    e.currentTarget.style.transform = 'translateY(-2px)';
                    e.currentTarget.style.boxShadow = `0 4px 12px ${item.color}30`;
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.backgroundColor = 'transparent';
                    e.currentTarget.style.color = '#495057';
                    e.currentTarget.style.transform = 'translateY(0)';
                    e.currentTarget.style.boxShadow = 'none';
                  }}
                >
                  {item.label}
                </a>
              ))}
            </div>
          ),
          
          // 🎯 Custom Right Section with props override
          right: {
            ...defaultBlocks.right,
            props: {
              ...defaultBlocks.right.props,
              className: "custom-navbar-right",
              style: {
                display: 'flex',
                alignItems: 'center',
                gap: '12px'
              },
              children: (
                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                  {/* Search Button */}
                  <button style={{
                    background: 'none',
                    border: '2px solid #6c757d',
                    borderRadius: '50%',
                    width: '40px',
                    height: '40px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    cursor: 'pointer',
                    fontSize: '1rem',
                    transition: 'all 0.3s ease'
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.borderColor = '#007bff';
                    e.currentTarget.style.backgroundColor = '#007bff';
                    e.currentTarget.style.color = 'white';
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.borderColor = '#6c757d';
                    e.currentTarget.style.backgroundColor = 'transparent';
                    e.currentTarget.style.color = 'inherit';
                  }}>
                    🔍
                  </button>
                  
                  {/* Login Button */}
                  <button style={{
                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                    border: 'none',
                    borderRadius: '25px',
                    padding: '10px 20px',
                    color: 'white',
                    fontSize: '0.9rem',
                    fontWeight: '600',
                    cursor: 'pointer',
                    transition: 'all 0.3s ease',
                    boxShadow: '0 4px 15px rgba(102, 126, 234, 0.3)'
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.transform = 'translateY(-2px)';
                    e.currentTarget.style.boxShadow = '0 6px 20px rgba(102, 126, 234, 0.4)';
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.transform = 'translateY(0)';
                    e.currentTarget.style.boxShadow = '0 4px 15px rgba(102, 126, 234, 0.3)';
                  }}>
                    🔐 Sign In
                  </button>
                  
                  {/* Profile Avatar */}
                  <div style={{
                    width: '36px',
                    height: '36px',
                    borderRadius: '50%',
                    backgroundColor: '#28a745',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    color: 'white',
                    fontSize: '1rem',
                    fontWeight: 'bold',
                    cursor: 'pointer',
                    transition: 'all 0.3s ease'
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.transform = 'scale(1.1)';
                    e.currentTarget.style.boxShadow = '0 4px 15px rgba(40, 167, 69, 0.3)';
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.transform = 'scale(1)';
                    e.currentTarget.style.boxShadow = 'none';
                  }}>
                    👤
                  </div>
                </div>
              )
            },
          },
        },
        blockOrder: defaultBlockOrder,
      })}
    </Navbar>
  );
}

Result

🔧 Props Reference

Main Component Props

Prop	Type	Default	Description
`leftContent`	`ReactNode`	Required	Content to display in the left section of the navbar (typically logo)
`centerContent`	`ReactNode`	Required	Content to display in the center section of the navbar (typically navigation links)
`rightContent`	`ReactNode`	Required	Content to display in the right section of the navbar (typically user actions/buttons)
`className`	`string`	`undefined`	Additional CSS class name for styling the navbar container
`children`	`BlocksOverride`	`undefined`	Function to override default blocks or add custom navbar sections

Note: The main component inherits all HTML nav element props.

Sub-Components

The Navbar component provides several sub-components. All sub-components receive their default values from the main component's context and can override these values through props.

Navbar.Left

Prop	Type	Default	Description
`children`	`ReactNode`	`leftContent` from context	Content to display in the left section (overrides context leftContent)

Note: This component inherits from HTML div element props.

Navbar.Center

Prop	Type	Default	Description
`children`	`ReactNode`	`centerContent` from context	Content to display in the center section (overrides context centerContent)

Note: This component inherits from HTML div element props.

Navbar.Right

Prop	Type	Default	Description
`children`	`ReactNode`	`rightContent` from context	Content to display in the right section (overrides context rightContent)

Note: This component inherits from HTML div element props.

Navbar.Logo

Prop	Type	Default	Description
`src`	`string`	Required	The source URL of the logo image
`alt`	`string`	Required	Alternative text for the logo image

Note: This component inherits from HTML img element props.

Navbar.Link

Prop	Type	Default	Description
`href`	`string`	Required	The destination URL for the link
`children`	`ReactNode`	Required	The content to display inside the link

Navbar.ButtonLink

Prop	Type	Default	Description
`href`	`string`	Required	The destination URL for the button link
`children`	`ReactNode`	Required	The content to display inside the button

🔧 TypeScript Support

Full TypeScript support with comprehensive type definitions:

import {Navbar} from '@nodeblocks/frontend-navbar-block';
import {ComponentProps, ReactNode} from 'react';

// Main component interface
interface NavbarProps extends Omit<ComponentProps<'nav'>, 'children'> {
  leftContent: ReactNode;
  centerContent: ReactNode;
  rightContent: ReactNode;
  className?: string;
}

// Usage example with comprehensive typing
const customNavbar: NavbarProps = {
  leftContent: <Navbar.Logo src="/logo.svg" alt="Logo" />,
  centerContent: (
    <nav>
      <Navbar.Link href="#home">Home</Navbar.Link>
      <Navbar.Link href="#products">Products</Navbar.Link>
      <Navbar.Link href="#about">About</Navbar.Link>
    </nav>
  ),
  rightContent: (
    <div>
      <Navbar.ButtonLink href="#login">Login</Navbar.ButtonLink>
      <Navbar.ButtonLink href="#register">Register</Navbar.ButtonLink>
    </div>
  ),
  className: 'my-custom-navbar',
};

// Example with sub-component customization
function AdvancedNavbar() {
  return (
    <Navbar {...customNavbar}>
      <Navbar.Left />
      <Navbar.Center />
      <Navbar.Right
        onClick={e => console.log('Right section clicked')}
        style={{backgroundColor: 'lightgray'}}
        className="my-custom-right-section">
        {/* This overrides rightContent from context */}
        <Navbar.ButtonLink href="#custom-action">Custom Action</Navbar.ButtonLink>
      </Navbar.Right>
    </Navbar>
  );
}

Built with ❤️ using React, TypeScript, and modern web standards.

🚀 Installation​

📖 Usage​

🔧 Props Reference​

Main Component Props​

Sub-Components​

Navbar.Left​

Navbar.Center​

Navbar.Right​

Navbar.Logo​

Navbar.Link​

Navbar.ButtonLink​

🔧 TypeScript Support​

🚀 Installation

📖 Usage

🔧 Props Reference

Main Component Props

Sub-Components

Navbar.Left

Navbar.Center

Navbar.Right

Navbar.Logo

Navbar.Link

Navbar.ButtonLink

🔧 TypeScript Support