Skip to main content

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@0.1.4

πŸ“– Usage​

import {Navbar} from '@nodeblocks/frontend-navbar-block';
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>
  );
}

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
leftContentReactNodeRequiredContent to display in the left section of the navbar (typically logo)
centerContentReactNodeRequiredContent to display in the center section of the navbar (typically navigation links)
rightContentReactNodeRequiredContent to display in the right section of the navbar (typically user actions/buttons)
classNamestringundefinedAdditional CSS class name for styling the navbar container
childrenBlocksOverrideundefinedFunction 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.

PropTypeDefaultDescription
childrenReactNodeleftContent from contextContent to display in the left section (overrides context leftContent)

Note: This component inherits from HTML div element props.

PropTypeDefaultDescription
childrenReactNodecenterContent from contextContent to display in the center section (overrides context centerContent)

Note: This component inherits from HTML div element props.

PropTypeDefaultDescription
childrenReactNoderightContent from contextContent to display in the right section (overrides context rightContent)

Note: This component inherits from HTML div element props.

PropTypeDefaultDescription
srcstringRequiredThe source URL of the logo image
altstringRequiredAlternative text for the logo image

Note: This component inherits from HTML img element props.

PropTypeDefaultDescription
hrefstringRequiredThe destination URL for the link
childrenReactNodeRequiredThe content to display inside the link
PropTypeDefaultDescription
hrefstringRequiredThe destination URL for the button link
childrenReactNodeRequiredThe 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.