Menubar

A pill menubar: a rounded track with pill triggers that open the kit’s 16px-radius menus.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { MenubarRounded } from '@/components/component-kit/items/menubar-rounded';
2
3export function Example() {
4  return (
5    <MenubarRounded
6      menus={[
7        { id: 'file', label: 'File', items: [{ id: 'new', label: 'New window', shortcut: '⌘N' }] },
8        { id: 'edit', label: 'Edit', items: [{ id: 'undo', label: 'Undo', shortcut: '⌘Z' }] },
9      ]}
10    />
11  );
12}

Props

Menubar properties
Prop	Type	Default	Description
`menus`	`MenubarRoundedMenu[]`	`—`	Top-level menus, each with a label and its rows.

Loading component kit…

Skip to components

nextbase./Component Kit

Get Nextbase

Menubar

A pill menubar: a rounded track with pill triggers that open the kit’s 16px-radius menus.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { MenubarRounded } from '@/components/component-kit/items/menubar-rounded';
2
3export function Example() {
4  return (
5    <MenubarRounded
6      menus={[
7        { id: 'file', label: 'File', items: [{ id: 'new', label: 'New window', shortcut: '⌘N' }] },
8        { id: 'edit', label: 'Edit', items: [{ id: 'undo', label: 'Undo', shortcut: '⌘Z' }] },
9      ]}
10    />
11  );
12}

Props

Menubar properties
Prop	Type	Default	Description
`menus`	`MenubarRoundedMenu[]`	`—`	Top-level menus, each with a label and its rows.

Menubar

A pill menubar: a rounded track with pill triggers that open the kit’s 16px-radius menus.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { MenubarRounded } from '@/components/component-kit/items/menubar-rounded';
2
3export function Example() {
4  return (
5    <MenubarRounded
6      menus={[
7        { id: 'file', label: 'File', items: [{ id: 'new', label: 'New window', shortcut: '⌘N' }] },
8        { id: 'edit', label: 'Edit', items: [{ id: 'undo', label: 'Undo', shortcut: '⌘Z' }] },
9      ]}
10    />
11  );
12}

Props

Menubar properties
Prop	Type	Default	Description
`menus`	`MenubarRoundedMenu[]`	`—`	Top-level menus, each with a label and its rows.