AsciiSidebar

A collapsible sidebar navigation component with ASCII styling and bracket notation.

Preview

Main Content

Current section: dashboard

Click on sidebar items to see active state changes. The sidebar uses bracket notation and supports icons, active states, and click handlers.

Installation

npm install react-ascii-ui

Usage

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

const items = [
  { 
    label: 'Dashboard', 
    onClick: () => console.log('Dashboard clicked'),
    active: true,
    icon: '⬢'
  },
  { 
    label: 'Users', 
    href: '/users',
    icon: '👤'
  }
];

export default function App() {
  return (
    <AsciiSidebar
      title="My App"
      items={items}
      width="w-64"
    />
  );
}

Examples

File Explorer Sidebar

Selected: None

Sidebar with Links

These items are links that will navigate to different pages.

API Reference

PropTypeDefaultDescription
itemsAsciiSidebarItem[]-Array of sidebar items
titlestringundefinedOptional sidebar title
widthstring"w-64"Sidebar width class
classNamestring""Additional CSS classes

AsciiSidebarItem

PropertyTypeDescription
labelstringDisplay text for the item
hrefstringOptional link URL
onClick() => voidOptional click handler
activebooleanWhether item is active
iconstringOptional icon character