Navigation

About

A keyboard-accessible vertical or horizontal navigation list with nested submenus, built for monochrome e-ink style interfaces.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Navigation to your project and fits it to your theme.

Code

How Navigation is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Navigation } from "@/components/ui/navigation";

export default function NavigationFixedWidthDemo() {
  return (
    <div
      style={{
        backgroundColor: "var(--eink-color-background, #ffffff)",
        color: "var(--eink-color-primary, #000000)",
        padding: 24,
        fontFamily: "monospace",
      }}
    >
      <div style={{ width: 480, border: "1px dashed grey" }}>
        <Navigation fullWidth={false}>
          <Navigation.Item target="/" icon="home" label="Home" />
          <Navigation.Item label="Products" icon="folder">
            <Navigation.Item target="/products/new" label="New" />
            <Navigation.Item target="/products/archived" label="Archived" />
          </Navigation.Item>
          <Navigation.Item
            target="/settings"
            icon="settings"
            label="Settings"
          />
        </Navigation>
      </div>
    </div>
  );
}