Navbar

ASCII-styled navigation bar with brackets around menu items and optional brand text.

Docs•API Reference

Basic Navbar:

With Brand:

Interactive (click to change active):

Installation

npm install react-ascii-ui

Usage

import { AsciiNavbar } from 'react-ascii-ui';

export default function Example() {
  const items = [
    { label: 'Home', href: '/', active: true },
    { label: 'About', href: '/about' },
    { label: 'Contact', href: '/contact' }
  ];

  return (
    <AsciiNavbar 
      items={items} 
      brand="MyApp"
    />
  );
}

Examples

Basic Navbar

<AsciiNavbar 
  items={[
    { label: 'Home', href: '#', active: true },
    { label: 'About', href: '#' },
    { label: 'Services', href: '#' }
  ]} 
/>

With Brand

<AsciiNavbar 
  items={[
    { label: 'Dashboard', href: '#', active: true },
    { label: 'Users', href: '#' },
    { label: 'Settings', href: '#' }
  ]}
  brand="Admin Panel"
/>

With Click Handlers

<AsciiNavbar 
  items={[
    { 
      label: 'Home', 
      onClick: () => handleNavigation('home'),
      active: activeItem === 'home'
    },
    { 
      label: 'About', 
      onClick: () => handleNavigation('about'),
      active: activeItem === 'about'
    }
  ]}
  brand="Interactive"
/>

Mixed Links and Buttons

<AsciiNavbar 
  items={[
    { label: 'Home', href: '/' },
    { label: 'Shop', href: '/shop', active: true },
    { label: 'Cart', onClick: () => openCart() },
    { label: 'Account', onClick: () => showAccountMenu() }
  ]}
  brand="E-Shop"
/>

API Reference

AsciiNavbar Props

PropTypeDefaultDescription
itemsAsciiNavbarItem[]-Array of navigation items
brandstring-Optional brand text displayed on the left
classNamestring""Additional CSS classes

AsciiNavbarItem Interface

PropertyTypeRequiredDescription
labelstringYesText label for the navigation item
hrefstringNoURL for navigation link (creates anchor tag)
onClick() => voidNoClick handler function (creates button)
activebooleanNoWhether this item is currently active

Behavior Notes

  • Link vs Button: Items with 'href' render as anchors, items with 'onClick' render as buttons
  • Active State: Active items are highlighted in green color
  • Hover Effect: All items show green color on hover
  • Bracket Styling: All nav items are wrapped in square brackets [item]
  • Click Handling: onClick handlers prevent default if href is also provided

AsciiNavbar extends all HTML nav element attributes and supports all React nav props.