WinMenuBar

A horizontal bar of underlined link-style menu items, mimicking classic desktop menu bars.

When to use

Use WinMenuBar for top-level navigation within a window or dashboard section.

When not to use

Do not use WinMenuBar for page-level navigation. Use sidebar links or WinCard instead.

Installation

Install the package:

npm install win2k-ui

Then import the component:

import { WinMenuBar } from 'win2k-ui'

Make sure you have Tailwind CSS v4 set up, then add this to your root CSS file:

@import "tailwindcss";
@import "win2k-ui/styles.css";

No other dependencies required. The components ship with zero third-party UI dependencies — just Tailwind CSS 4 and React.

Preview

Interactive examples showing various states and configurations. Click “Show Code” to view the source for each variation.

With 3 items

With many items (wrapping)

Props

All available props for the WinMenuBar component.

Prop	Type	Default	Description
`items`	`{ label: string; onClick: () => void }[]`	`—`	Menu items array.
`className`	`string`	`''`	Additional CSS classes.

Usage

Example showing the component in a typical context:

import { WinMenuBar } from 'win2k-ui'

export function Example() {
  return (
    <WinMenuBar
      items={[
        { label: 'File', onClick: () => {} },
        { label: 'Edit', onClick: () => {} },
        { label: 'View', onClick: () => {} },
        { label: 'Help', onClick: () => {} },
      ]}
    />
  )
}