NOCTA UI

Menubar

A top-level application menubar with grouped actions, submenus, and full keyboard navigation

Installation

Install the Menubar component with the nocta-ui CLI:

npx @nocta-ui/cli add menubar

Import only the pieces you need:

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
} from '@/components/ui/menubar';

Examples

Default Menubar

Last action: No action selected

Disabled States

API Reference

Menubar

Prop

Type

MenubarMenu

Prop

Type

MenubarTrigger

Prop

Type

MenubarContent

Prop

Type

MenubarItem

Prop

Type

MenubarSeparator

Prop

Type

MenubarSub

Prop

Type

MenubarSubTrigger

Prop

Type

MenubarSubContent

Prop

Type

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Navigation Menu

A hover-driven navigation bar with animated panels that surface nested content and quick actions

On this page

Installation
Examples
Default Menubar
Disabled States
API Reference
Menubar
MenubarMenu
MenubarTrigger
MenubarContent
MenubarItem
MenubarSeparator
MenubarSub
MenubarSubTrigger
MenubarSubContent