Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Requires JavaScript

Installation

rails generate shadcn:component menubar

Usage

<%= render Shadcn::MenubarComponent.new do |menubar| %>
  <% menubar.with_menu do |menu| %>
    <% menu.with_trigger { "File" } %>
    <% menu.with_menu do |content| %>
      <% content.with_item(href: "#") do |item| %>
        New Tab
        <% item.with_shortcut { "⌘T" } %>
      <% end %>
      <% content.with_item(href: "#") do |item| %>
        New Window
        <% item.with_shortcut { "⌘N" } %>
      <% end %>
      <% content.with_separator %>
      <% content.with_item(href: "#") do |item| %>
        Share
      <% end %>
      <% content.with_separator %>
      <% content.with_item(href: "#") do |item| %>
        Print
        <% item.with_shortcut { "⌘P" } %>
      <% end %>
    <% end %>
  <% end %>
  <% menubar.with_menu do |menu| %>
    <% menu.with_trigger { "Edit" } %>
    <% menu.with_menu do |content| %>
      <% content.with_item(href: "#") do |item| %>
        Undo
        <% item.with_shortcut { "⌘Z" } %>
      <% end %>
      <% content.with_item(href: "#") do |item| %>
        Redo
        <% item.with_shortcut { "⇧⌘Z" } %>
      <% end %>
      <% content.with_separator %>
      <% content.with_item(href: "#") do |item| %>
        Cut
        <% item.with_shortcut { "⌘X" } %>
      <% end %>
      <% content.with_item(href: "#") do |item| %>
        Copy
        <% item.with_shortcut { "⌘C" } %>
      <% end %>
      <% content.with_item(href: "#") do |item| %>
        Paste
        <% item.with_shortcut { "⌘V" } %>
      <% end %>
    <% end %>
  <% end %>
  <% menubar.with_menu do |menu| %>
    <% menu.with_trigger { "View" } %>
    <% menu.with_menu do |content| %>
      <% content.with_checkbox_item(checked: true) { "Show Toolbar" } %>
      <% content.with_checkbox_item(checked: false) { "Show Sidebar" } %>
      <% content.with_separator %>
      <% content.with_item(href: "#") { "Zoom In" } %>
      <% content.with_item(href: "#") { "Zoom Out" } %>
    <% end %>
  <% end %>
<% end %>

Examples

Basic

A simple menubar with basic menu items.

<%= render Shadcn::MenubarComponent.new do |menubar| %>
  <% menubar.with_menu do |menu| %>
    <% menu.with_trigger { "File" } %>
    <% menu.with_menu do |content| %>
      <% content.with_item(href: "#") { "New File" } %>
      <% content.with_item(href: "#") { "Open..." } %>
      <% content.with_item(href: "#") { "Save" } %>
    <% end %>
  <% end %>
  <% menubar.with_menu do |menu| %>
    <% menu.with_trigger { "Edit" } %>
    <% menu.with_menu do |content| %>
      <% content.with_item(href: "#") { "Undo" } %>
      <% content.with_item(href: "#") { "Redo" } %>
    <% end %>
  <% end %>
<% end %>

With Shortcuts

Menu items with keyboard shortcuts displayed.

<%= render Shadcn::MenubarComponent.new do |menubar| %>
  <% menubar.with_menu do |menu| %>
    <% menu.with_trigger { "File" } %>
    <% menu.with_menu do |content| %>
      <% content.with_item(href: "#") do |item| %>
        New Tab
        <% item.with_shortcut { "⌘T" } %>
      <% end %>
      <% content.with_item(href: "#") do |item| %>
        New Window
        <% item.with_shortcut { "⌘N" } %>
      <% end %>
      <% content.with_separator %>
      <% content.with_item(href: "#") do |item| %>
        Print
        <% item.with_shortcut { "⌘P" } %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

With Checkboxes

Menu items that can be checked/unchecked.

<%= render Shadcn::MenubarComponent.new do |menubar| %>
  <% menubar.with_menu do |menu| %>
    <% menu.with_trigger { "View" } %>
    <% menu.with_menu do |content| %>
      <% content.with_checkbox_item(checked: true) { "Show Toolbar" } %>
      <% content.with_checkbox_item(checked: false) { "Show Sidebar" } %>
      <% content.with_checkbox_item(checked: true) { "Show Status Bar" } %>
      <% content.with_separator %>
      <% content.with_item(href: "#") { "Zoom In" } %>
      <% content.with_item(href: "#") { "Zoom Out" } %>
    <% end %>
  <% end %>
<% end %>

With Radio Group

Menu items with mutually exclusive selection.

<%= render Shadcn::MenubarComponent.new do |menubar| %>
  <% menubar.with_menu do |menu| %>
    <% menu.with_trigger { "Profiles" } %>
    <% menu.with_menu do |content| %>
      <% content.with_label { "Switch Profile" } %>
      <% content.with_separator %>
      <% content.with_radio_group(value: "default") do |group| %>
        <% group.with_item(value: "default", checked: true) { "Default" } %>
        <% group.with_item(value: "work") { "Work" } %>
        <% group.with_item(value: "personal") { "Personal" } %>
      <% end %>
      <% content.with_separator %>
      <% content.with_item(href: "#") { "Manage Profiles..." } %>
    <% end %>
  <% end %>
<% end %>

Disabled Items

Menu items that cannot be selected.

<%= render Shadcn::MenubarComponent.new do |menubar| %>
  <% menubar.with_menu do |menu| %>
    <% menu.with_trigger { "Edit" } %>
    <% menu.with_menu do |content| %>
      <% content.with_item(href: "#") { "Undo" } %>
      <% content.with_item(href: "#") { "Redo" } %>
      <% content.with_separator %>
      <% content.with_item(href: "#") { "Cut" } %>
      <% content.with_item(href: "#") { "Copy" } %>
      <% content.with_item(href: "#", disabled: true) { "Paste (empty clipboard)" } %>
    <% end %>
  <% end %>
<% end %>

API Reference

MenubarComponent

API Reference

Prop	Type	Default	Description
class_name	`String`	`nil`	Additional CSS classes to apply

MenubarMenuComponent

Container for a single menu in the menubar.

Slots

trigger - The button that opens the menu
content - The dropdown content container

MenubarItemComponent

API Reference

Prop	Type	Default	Description
href	`String`	`nil`	Optional link URL
variant	`Symbol`	`:default`	Item variant (:default, :destructive)
disabled	`Boolean`	`false`	Whether the item is disabled
inset	`Boolean`	`false`	Add left padding for alignment with icons

MenubarCheckboxItemComponent

API Reference

Prop	Type	Default	Description
checked	`Boolean`	`false`	Whether the checkbox is checked
disabled	`Boolean`	`false`	Whether the item is disabled

MenubarRadioGroupComponent

API Reference

Prop	Type	Default	Description
value	`String`	`nil`	Currently selected value

MenubarRadioItemComponent

API Reference

Prop	Type	Default	Description
value	`String`	`nil`	Value of this radio option
checked	`Boolean`	`false`	Whether this option is selected
disabled	`Boolean`	`false`	Whether the item is disabled

Stimulus Controller

This component requires JavaScript. The Stimulus controller shadcn--menubar provides interactivity.

Installation

Add to your config/importmap.rb:

pin "shadcn-rails", to: "shadcn/index.js"

Then in your app/javascript/controllers/index.js:

import { Application } from "@hotwired/stimulus"
import { registerShadcnControllers } from "shadcn-rails"

const application = Application.start()
registerShadcnControllers(application)

Install the package:

npm install shadcn-rails

Then in your app/javascript/controllers/index.js:

import { Application } from "@hotwired/stimulus"
import { registerShadcnControllers } from "shadcn-rails"

const application = Application.start()
registerShadcnControllers(application)

Install the package:

yarn add shadcn-rails

Then in your app/javascript/controllers/index.js:

import { Application } from "@hotwired/stimulus"
import { registerShadcnControllers } from "shadcn-rails"

const application = Application.start()
registerShadcnControllers(application)

Install the package:

npm install shadcn-rails

Then in your app/javascript/controllers/index.js:

import { Application } from "@hotwired/stimulus"
import { registerShadcnControllers } from "shadcn-rails"

const application = Application.start()
registerShadcnControllers(application)

Or import just this controller:

import MenubarController from "shadcn-rails/controllers/menubar_controller"

application.register("shadcn--menubar", MenubarController)

Targets

Name	Description
menu	Individual menu containers
trigger	Menu trigger buttons
content	Menu dropdown content
item	Menu items
sub	Submenu containers
subTrigger	Submenu trigger items
subContent	Submenu content

Values

Name	Type	Default	Description
openIndex	`Number`	`-1`	Index of currently open menu

Actions

Action	Description
toggle	Toggle menu open/close
hoverOpen	Open menu on hover when another menu is open
selectItem	Select a menu item
toggleCheckbox	Toggle checkbox item state
selectRadio	Select radio item in group

TypeScript

Type definitions are included. Import types as needed:

import type { MenubarController } from "shadcn-rails"

Accessibility

Uses role="menubar" on the container
Uses role="menu" on dropdown content
Uses role="menuitem", role="menuitemcheckbox", and role="menuitemradio" appropriately
aria-expanded indicates menu open/close state
aria-checked indicates checkbox/radio state
Arrow keys navigate between menus and items
Enter/Space activates menu items
Escape closes the menu