Navbar Block

Navbar is a horizontal navigation bar built on MUI Stack (component="nav"), with left, center, and right regions plus link and action primitives.

Installation

npm

npm install @nodeblocks/frontend-navbar-block

yarn

yarn add @nodeblocks/frontend-navbar-block

pnpm

pnpm add @nodeblocks/frontend-navbar-block

bun

bun add @nodeblocks/frontend-navbar-block

What You Need

Item	Why it matters
leftContent (optional)	Left region content, used by the default layout when present
centerContent (optional)	Primary navigation links; omit or pass null when the center is empty
rightContent (optional)	Actions such as login, Navbar.Item icons, or profile controls
Region subcomponents	Navbar.Left, Navbar.Center, Navbar.Right for compound layout

Composition modes

Pass leftContent, centerContent, and rightContent on Navbar to fill the default regions (Navbar.Left, Navbar.Center, Navbar.Right render automatically). Use compound children to replace a region’s markup while still reading root props via context (children wins over the matching *Content prop). Use a function child with blocks and blockOrder to prepend blocks or change order.

Code Examples

Quick Start

Live Editor

function Example() {
  return (
    <Navbar
      leftContent={
        <Navbar.Logo
          src="https://docs.nodeblocks.dev/img/icon-small.png"
          alt="Company Logo"
          style={{height: 32}}
        />
      }
      centerContent={
        <>
          <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>
        </>
      }
      rightContent={<Navbar.ButtonLink href="#login">Login</Navbar.ButtonLink>}
    />
  );
}

Result

Loading...

Links and layout

Customize region content, Navbar.Item actions, and root spacing (sx).

Live Editor

function Example() {
  return (
    <Navbar
      leftContent={
        <Navbar.Logo
          src="https://docs.nodeblocks.dev/img/icon-small.png"
          alt="Acme"
          style={{height: 28}}
        />
      }
      centerContent={
        <>
          <Navbar.Link href="#dashboard">
            <span>Dashboard</span>
          </Navbar.Link>
          <Navbar.Link href="#settings">
            <span>Settings</span>
          </Navbar.Link>
        </>
      }
      rightContent={
        <>
          <Navbar.Item icon={<SettingsOutlined />} label="Settings" />
          <Navbar.ButtonLink href="#signup">Sign up</Navbar.ButtonLink>
        </>
      }
      sx={{px: 4}}
    />
  );
}

Result

Loading...

Navbar.Item labels

label is hidden on extra-small viewports and shown from sm up (display: { xs: 'none', sm: 'inline' }). Use icon-only items on mobile or split desktop/mobile groups with responsive Box wrappers (see Storybook Default).

Compound Components

Use region subcomponents to compose the navigation bar explicitly.

Live Editor

function Example() {
  return (
    <Navbar>
      <Navbar.Left>
        <Navbar.Logo
          src="https://docs.nodeblocks.dev/img/icon-small.png"
          alt="Company Logo"
          style={{height: 32}}
        />
      </Navbar.Left>
      <Navbar.Center>
        <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>
      </Navbar.Center>
      <Navbar.Right>
        <Navbar.ButtonLink href="#login">Login</Navbar.ButtonLink>
      </Navbar.Right>
    </Navbar>
  );
}

Result

Loading...

Block Override

Use function children to prepend blocks or change order.

Live Editor

function Example() {
  return (
    <Navbar
      leftContent={
        <Navbar.Logo
          src="https://docs.nodeblocks.dev/img/icon-small.png"
          alt="Company Logo"
          style={{height: 32}}
        />
      }
      centerContent={
        <Navbar.Link href="#home">
          <span>Home</span>
        </Navbar.Link>
      }
      rightContent={<Navbar.ButtonLink href="#login">Login</Navbar.ButtonLink>}
    >
      {({defaultBlocks, defaultBlockOrder}) => ({
        blocks: {
          ...defaultBlocks,
          customNotice: (
            <div
              style={{
                background: '#eef4ff',
                border: '1px solid #cddcff',
                borderRadius: 8,
                padding: '8px 12px',
                fontSize: 14,
              }}
            >
              New features available
            </div>
          ),
        },
        blockOrder: ['customNotice', ...defaultBlockOrder],
      })}
    </Navbar>
  );
}

Result

Loading...

When to use block overrides

Use overrides when you need a banner or extra block before the default regions, or a custom blockOrder, while keeping default region styling. defaultBlockOrder is left, center, right, logo, link, buttonLink, item; only left, center, and right render in the default layout—logo, link, buttonLink, and item are available in defaultBlocks for custom compositions.

Important Props

Core Props

Prop	Type	Required	Default	Description
leftContent	ReactNode	No	undefined	Content for the left region (e.g. Navbar.Logo)
centerContent	ReactNode	No	undefined	Content for the center region (e.g. Navbar.Link list)
rightContent	ReactNode	No	undefined	Content for the right region (e.g. Navbar.Item, Navbar.ButtonLink)

Content Props

Set leftContent, centerContent, and rightContent on the root when using the default regions. Subcomponents read them from context unless you pass children on the region (compound mode).

Component	Prop	Type	Required	Default	Description
Left	children	ReactNode	No	Root leftContent	Left region markup
Left	leftContent	ReactNode	No	Root leftContent	Overrides context for this region
Center	children	ReactNode	No	Root centerContent	Center region markup
Center	centerContent	ReactNode	No	Root centerContent	Overrides context for this region
Right	children	ReactNode	No	Root rightContent	Right region markup
Right	rightContent	ReactNode	No	Root rightContent	Overrides context for this region
Logo	—	BoxProps<'img'>	No	-	Image logo (src, alt, style, className, etc.)
Link	—	StackProps<typeof Link>	No	-	Inline nav link; pass href and label children
ButtonLink	—	StackProps<typeof Button>	No	-	Contained action link; variant="contained", size="small"
Item	icon	ReactNode	No	undefined	Icon before label (optional badgeProps on icon)
Item	label	ReactNode	No	undefined	Text label (sm+ only)
Item	badgeProps	BadgeProps	No	undefined	MUI Badge on icon
Item	children	ReactNode	No	undefined	Extra content inside the control

Left, Center, Right, Logo, Link, ButtonLink, and Item are Navbar.Left, Navbar.Center, etc. Item inherits ButtonBase props (e.g. onClick).

Layout and Composition Props

Prop	Type	Required	Default	Description
children	BlocksOverride | ReactNode	No	undefined	Compound region components or function override returning blocks and blockOrder
component	React.ElementType	No	'nav'	Root element type
className	string	No	undefined	Class name for the root container (nbb-navbar is applied by default)
sx	SxProps	No	undefined	MUI system styles for the root container

Navbar inherits StackProps<'nav'> (except children), including direction (default row), spacing (default 3 on the root), height (56 / 64 at xs / sm), horizontal padding, and bottom border. Root render order is left, center, right; defaultBlockOrder is left, center, right, logo, link, buttonLink, item.

Default UI Blocks

Block	Built on	Notes
Navbar (root)	Stack (component="nav")	direction="row", spacing={3}, height 56px (xs) / 64px (sm+)
Navbar.Left	Stack	direction="row", spacing={1}
Navbar.Center	Stack	flexGrow: 1, spacing={2}
Navbar.Right	Stack	justifyContent: flex-end
Navbar.Logo	Box (component="img")	Logo image
Navbar.Link	Stack + Link	Inline nav link
Navbar.ButtonLink	Stack + Button	Contained action link
Navbar.Item	ButtonBase + Badge + Typography	Icon/label action; optional badge on icon

TypeScript

import { Navbar } from '@nodeblocks/frontend-navbar-block';
import { SettingsOutlined } from '@mui/icons-material';
import type { ReactNode } from 'react';

type NavbarRegions = {
  leftContent: ReactNode;
  centerContent?: ReactNode;
  rightContent?: ReactNode;
};

const config: NavbarRegions = {
  leftContent: (
    <Navbar.Logo src="/logo.svg" alt="Company" style={{ height: 32 }} />
  ),
  centerContent: (
    <Navbar.Link href="#home">
      <span>Home</span>
    </Navbar.Link>
  ),
  rightContent: <Navbar.Item icon={<SettingsOutlined />} label="Settings" />,
};

<Navbar {...config} />;