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.2.0

πŸ“– Usage​

import {Navbar} from '@nodeblocks/frontend-navbar-block';
Live Editor
function BasicNavbar() {
  return (
    <Navbar
      leftContent={<Navbar.Logo src="/img/icon-small.png" alt="Company Logo" style={{height: 32}} />}
      centerContent={
        <div style={{display: 'flex', gap: 16}}>
          <Navbar.Link href="#home">Home</Navbar.Link>
          <Navbar.Link href="#about">About</Navbar.Link>
          <Navbar.Link href="#services">Services</Navbar.Link>
          <Navbar.Link href="#contact">Contact</Navbar.Link>
        </div>
      }
      rightContent={<Navbar.ButtonLink href="#login">Login</Navbar.ButtonLink>}
      sx={{backgroundColor: 'white', boxShadow: 1}}
    >
      <Navbar.Left />
      <Navbar.Center />
      <Navbar.Right />
    </Navbar>
  );
}
Result
Loading...

πŸ”§ 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)
spacingnumber | ResponsiveValue3Spacing between left, center, and right sections
directionStackDirection'row'Layout direction of navbar sections
classNamestringundefinedAdditional CSS class name for styling the navbar container
sxSxProps<Theme>See belowMUI System prop for custom styling
childrenBlocksOverrideundefinedFunction to override default blocks or add custom navbar sections

Default sx:

{
  alignItems: 'center',
  px: 3,
  py: 1.5
}

Note: The main component inherits all MUI Stack props. It renders as a nav element via component="nav".

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.

Renders the left section of the navbar, typically containing the logo.

PropTypeDefaultDescription
childrenReactNodeleftContent from contextContent to display in the left section (overrides context leftContent)
leftContentReactNodeFrom contextAlternative way to provide left content (overrides context)
spacingnumber | ResponsiveValue1Spacing between child elements
directionStackDirection'row'Layout direction
sxSxProps<Theme>{ alignItems: 'center' }MUI System prop for custom styling

Note: This component inherits all MUI Stack props.

Renders the center section of the navbar, typically containing navigation links.

PropTypeDefaultDescription
childrenReactNodecenterContent from contextContent to display in the center section (overrides context centerContent)
centerContentReactNodeFrom contextAlternative way to provide center content (overrides context)
spacingnumber | ResponsiveValue2Spacing between child elements
directionStackDirection'row'Layout direction
sxSxProps<Theme>See belowMUI System prop for custom styling

Default sx:

{
  alignItems: 'center',
  flexGrow: 1
}

Note: This component inherits all MUI Stack props. The flexGrow: 1 causes it to take up available space between left and right sections.

Renders the right section of the navbar, typically containing user actions/buttons.

PropTypeDefaultDescription
childrenReactNoderightContent from contextContent to display in the right section (overrides context rightContent)
rightContentReactNodeFrom contextAlternative way to provide right content (overrides context)
spacingnumber | ResponsiveValue1Spacing between child elements
directionStackDirection'row'Layout direction
sxSxProps<Theme>See belowMUI System prop for custom styling

Default sx:

{
  alignItems: 'center',
  justifyContent: 'flex-end'
}

Note: This component inherits all MUI Stack props.

Renders the logo image for the navbar.

PropTypeDefaultDescription
srcstringRequiredThe source URL of the logo image
altstringRequiredAlternative text for the logo image
componentstring'img'The component used for the root node (fixed)
sxSxProps<Theme>undefinedMUI System prop for custom styling

Note: This component inherits all MUI Box<'img'> props.

Renders a navigation link.

PropTypeDefaultDescription
hrefstringRequiredThe destination URL for the link
childrenReactNodeRequiredThe content to display inside the link
spacingnumber | ResponsiveValue0.5Spacing between child elements (for icons)
directionStackDirection'row'Layout direction
underline'none' | 'hover' | 'always''hover'Link underline behavior (from MUI Link)
colorstring'inherit'Link color
sxSxProps<Theme>See belowMUI System prop for custom styling

Default sx:

{
  display: 'inline-flex',
  alignItems: 'center'
}

Note: This component uses MUI Stack with component={Link}. It inherits both StackProps and MUI Link props.

Renders a button-styled link.

PropTypeDefaultDescription
hrefstringRequiredThe destination URL for the button link
childrenReactNodeRequiredThe content to display inside the button
variant'text' | 'outlined' | 'contained''contained'Button variant
size'small' | 'medium' | 'large''small'Button size
colorstring'primary'Button color
spacingnumber | ResponsiveValue0.5Spacing between child elements (for icons)
directionStackDirection'row'Layout direction
sxSxProps<Theme>undefinedMUI System prop for custom styling

Note: This component uses MUI Stack with component={Button}. It inherits both StackProps and MUI Button props.

🎨 Configuration examples​

Custom Logo Styling​

<Navbar.Logo
  src="/logo.svg"
  alt="Company Logo"
  sx={{height: 40, width: 'auto'}}
/>
<Navbar.Link href="#products" sx={{fontWeight: 600, color: 'primary.main'}}>
  Products
</Navbar.Link>
<Navbar.ButtonLink href="#register" variant="contained" sx={{px: 3, py: 1}}>
  Get Started
</Navbar.ButtonLink>

Custom Styled Components​

function StyledNavbarComponents() {
  return (
    <Navbar
      leftContent={<Navbar.Logo src="/logo.svg" alt="Company Logo" sx={{height: 40, width: 'auto'}} />}
      centerContent={
        <Navbar.Link href="#products" sx={{fontWeight: 600, color: 'primary.main'}}>
          Products
        </Navbar.Link>
      }
      rightContent={
        <Navbar.ButtonLink href="#register" variant="contained" sx={{px: 3, py: 1}}>
          Get Started
        </Navbar.ButtonLink>
      }
    >
      <Navbar.Left />
      <Navbar.Center />
      <Navbar.Right />
    </Navbar>
  );
}

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {Stack} from '@mui/material';
import {Navbar} from '@nodeblocks/frontend-navbar-block';
import React from 'react';

// Example with comprehensive typing
function CustomNavbar() {
  return (
    <Navbar
      leftContent={<Navbar.Logo src="/logo.svg" alt="Logo" />}
      centerContent={
        <Stack direction="row" spacing={2}>
          <Navbar.Link href="#home">Home</Navbar.Link>
          <Navbar.Link href="#products">Products</Navbar.Link>
          <Navbar.Link href="#about">About</Navbar.Link>
        </Stack>
      }
      rightContent={
        <Stack direction="row" spacing={1}>
          <Navbar.ButtonLink href="#login" variant="text">
            Login
          </Navbar.ButtonLink>
          <Navbar.ButtonLink href="#register">Register</Navbar.ButtonLink>
        </Stack>
      }
      spacing={4}
      sx={{
        backgroundColor: 'background.paper',
        boxShadow: 1,
        borderRadius: 2,
      }}
    >
      <Navbar.Left sx={{minWidth: 150}} />
      <Navbar.Center justifyContent="center" />
      <Navbar.Right sx={{minWidth: 200}} />
    </Navbar>
  );
}

πŸ“ Notes​

  • The main component uses MUI Stack with component="nav" and direction="row" with spacing={3} by default.
  • All section components (Left, Center, Right) inherit MUI Stack props and support the sx prop for styling.
  • The Center section has flexGrow: 1 by default, causing it to expand and fill available space.
  • The Right section has justifyContent: 'flex-end' by default, aligning its content to the right.
  • Navbar.Logo uses MUI Box with component="img" for proper image rendering with MUI styling support.
  • Navbar.Link combines MUI Stack layout with MUI Link navigation, allowing for icons alongside text.
  • Navbar.ButtonLink combines MUI Stack layout with MUI Button, using variant="contained" and size="small" by default.
  • Context values (leftContent, centerContent, rightContent) are shared via React Context and can be overridden at the sub-component level.

Built with ❀️ using React, TypeScript, and MUI.