Menubar

Usage

Use .menubar as a compact row of related Bootstrap dropdown triggers, such as document, editor, or workspace command groups. Keep top-level labels short, group related commands under each trigger, and keep each popup menu built from the same Dropdown Menu item, header, and divider structure used elsewhere.

Label the row as one toolbar-like surface, but do not claim desktop application menubar behavior unless the full keyboard model is implemented. Bootstrap dropdowns already support click opening, item movement, and Escape dismissal; Moo UI should add only the composition and visual frame around those dropdowns.

Use .menubar when the commands are siblings at the same level. If one trigger contains the main action and another only contains overflow, use Button Group or Dropdown Menu instead; if the items are route links, use Navigation so current-page state and link semantics stay clear.

Menubar

{"title": "Moo UI Menubar - Basic", "description": "Each menu keeps documented Bootstrap dropdown trigger and menu markup; the bordered toolbar row is the only additional composition.", "html": "<div class=\"moo-ui\" data-bs-theme=\"light\">\n<div class=\"menubar d-inline-flex align-items-center border rounded-3\" role=\"group\" aria-label=\"Document actions\">\n  <div class=\"dropdown\">\n    <button class=\"btn btn-ghost\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" data-bs-offset=\"0,8\">File</button>\n    <ul class=\"dropdown-menu\">\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>New document</span>\n          <span class=\"ms-auto small text-body-secondary\">\u2318N</span>\n        </button>\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>Open workspace</span>\n          <span class=\"ms-auto small text-body-secondary\">\u2318O</span>\n        </button>\n      </li>\n      <li>\n        <hr class=\"dropdown-divider\">\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>Export</span>\n          <span class=\"ms-auto small text-body-secondary\">\u2318E</span>\n        </button>\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>Print</span>\n          <span class=\"ms-auto small text-body-secondary\">\u2318P</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n  <div class=\"dropdown\">\n    <button class=\"btn btn-ghost\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" data-bs-offset=\"0,8\">Edit</button>\n    <ul class=\"dropdown-menu\">\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>Undo</span>\n          <span class=\"ms-auto small text-body-secondary\">\u2318Z</span>\n        </button>\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>Redo</span>\n          <span class=\"ms-auto small text-body-secondary\">\u21e7\u2318Z</span>\n        </button>\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>Find</span>\n        </button>\n      </li>\n      <li>\n        <hr class=\"dropdown-divider\">\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>Cut</span>\n        </button>\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>Copy</span>\n        </button>\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>Paste</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n  <div class=\"dropdown\">\n    <button class=\"btn btn-ghost\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" data-bs-offset=\"0,8\">View</button>\n    <ul class=\"dropdown-menu\">\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>Zoom in</span>\n        </button>\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>Zoom out</span>\n        </button>\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>Reset zoom</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n</div>\n</div>", "html_pre_processor": "none", "css": "", "css_pre_processor": "none", "css_starter": "neither", "css_external": "https://unpkg.com/@wpmoo/ui@1.2.1/dist/assets/css/moo-ui.css;https://ui.wpmoo.org/assets/css/codepen-demo.css", "js": "", "js_pre_processor": "none", "js_external": "https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js;https://ui.wpmoo.org/assets/js/codepen-demo.js", "tags": ["moo-ui", "menubar", "components"], "editors": "110", "js_module": false}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94<div class="menubar d-inline-flex align-items-center border rounded-3" role="group" aria-label="Document actions">
  <div class="dropdown">
    <button class="btn btn-ghost" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,8">File</button>
    <ul class="dropdown-menu">
      <li>
        <button class="dropdown-item" type="button">
          <span>New document</span>
          <span class="ms-auto small text-body-secondary">⌘N</span>
        </button>
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <span>Open workspace</span>
          <span class="ms-auto small text-body-secondary">⌘O</span>
        </button>
      </li>
      <li>
        <hr class="dropdown-divider">
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <span>Export</span>
          <span class="ms-auto small text-body-secondary">⌘E</span>
        </button>
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <span>Print</span>
          <span class="ms-auto small text-body-secondary">⌘P</span>
        </button>
      </li>
    </ul>
  </div>
  <div class="dropdown">
    <button class="btn btn-ghost" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,8">Edit</button>
    <ul class="dropdown-menu">
      <li>
        <button class="dropdown-item" type="button">
          <span>Undo</span>
          <span class="ms-auto small text-body-secondary">⌘Z</span>
        </button>
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <span>Redo</span>
          <span class="ms-auto small text-body-secondary">⇧⌘Z</span>
        </button>
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <span>Find</span>
        </button>
      </li>
      <li>
        <hr class="dropdown-divider">
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <span>Cut</span>
        </button>
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <span>Copy</span>
        </button>
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <span>Paste</span>
        </button>
      </li>
    </ul>
  </div>
  <div class="dropdown">
    <button class="btn btn-ghost" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,8">View</button>
    <ul class="dropdown-menu">
      <li>
        <button class="dropdown-item" type="button">
          <span>Zoom in</span>
        </button>
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <span>Zoom out</span>
        </button>
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <span>Reset zoom</span>
        </button>
      </li>
    </ul>
  </div>
</div>

Menubar

{"title": "Moo UI Menubar - With a header and destructive item", "description": "dropdown_header() and dropdown_item(destructive=true) compose the same way they do in a standalone Dropdown Menu.", "html": "<div class=\"moo-ui\" data-bs-theme=\"light\">\n<div class=\"menubar d-inline-flex align-items-center border rounded-3\" role=\"group\" aria-label=\"Workspace actions\">\n  <div class=\"dropdown\">\n    <button class=\"btn btn-ghost\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" data-bs-offset=\"0,8\">File</button>\n    <ul class=\"dropdown-menu\">\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>New document</span>\n          <span class=\"ms-auto small text-body-secondary\">\u2318N</span>\n        </button>\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>Export as PDF</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n  <div class=\"dropdown\">\n    <button class=\"btn btn-ghost\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" data-bs-offset=\"0,8\">Team</button>\n    <ul class=\"dropdown-menu\">\n      <li>\n        <h6 class=\"dropdown-header\">Members</h6>\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>Invite teammate</span>\n          <span class=\"ms-auto small text-body-secondary\">\u21e7\u2318I</span>\n        </button>\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>Manage roles</span>\n        </button>\n      </li>\n      <li>\n        <hr class=\"dropdown-divider\">\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\" data-variant=\"destructive\">\n          <span>Leave workspace</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n</div>\n</div>", "html_pre_processor": "none", "css": "", "css_pre_processor": "none", "css_starter": "neither", "css_external": "https://unpkg.com/@wpmoo/ui@1.2.1/dist/assets/css/moo-ui.css;https://ui.wpmoo.org/assets/css/codepen-demo.css", "js": "", "js_pre_processor": "none", "js_external": "https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js;https://ui.wpmoo.org/assets/js/codepen-demo.js", "tags": ["moo-ui", "menubar", "components"], "editors": "110", "js_module": false}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45<div class="menubar d-inline-flex align-items-center border rounded-3" role="group" aria-label="Workspace actions">
  <div class="dropdown">
    <button class="btn btn-ghost" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,8">File</button>
    <ul class="dropdown-menu">
      <li>
        <button class="dropdown-item" type="button">
          <span>New document</span>
          <span class="ms-auto small text-body-secondary">⌘N</span>
        </button>
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <span>Export as PDF</span>
        </button>
      </li>
    </ul>
  </div>
  <div class="dropdown">
    <button class="btn btn-ghost" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,8">Team</button>
    <ul class="dropdown-menu">
      <li>
        <h6 class="dropdown-header">Members</h6>
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <span>Invite teammate</span>
          <span class="ms-auto small text-body-secondary">⇧⌘I</span>
        </button>
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <span>Manage roles</span>
        </button>
      </li>
      <li>
        <hr class="dropdown-divider">
      </li>
      <li>
        <button class="dropdown-item" type="button" data-variant="destructive">
          <span>Leave workspace</span>
        </button>
      </li>
    </ul>
  </div>
</div>

Menubar

{"title": "Moo UI Menubar - With icons", "description": "dropdown_item() already renders a leading icon; the menubar composes it the same way a standalone Dropdown Menu does.", "html": "<div class=\"moo-ui\" data-bs-theme=\"light\">\n<div class=\"menubar d-inline-flex align-items-center border rounded-3\" role=\"group\" aria-label=\"Document actions with icons\">\n  <div class=\"dropdown\">\n    <button class=\"btn btn-ghost\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" data-bs-offset=\"0,8\">File</button>\n    <ul class=\"dropdown-menu\">\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <svg\n            data-icon=\"inline-start\"\n            data-lucide=\"file-text\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n              <path d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\"/>\n              <path d=\"M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8\"/>\n            </g>\n          </svg>\n          <span>New document</span>\n          <span class=\"ms-auto small text-body-secondary\">\u2318N</span>\n        </button>\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <svg\n            data-icon=\"inline-start\"\n            data-lucide=\"upload\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 3v12m5-7l-5-5l-5 5m14 7v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n          </svg>\n          <span>Import file</span>\n        </button>\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <svg\n            data-icon=\"inline-start\"\n            data-lucide=\"download\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n              <path d=\"M12 15V3m9 12v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n              <path d=\"m7 10l5 5l5-5\"/>\n            </g>\n          </svg>\n          <span>Export as PDF</span>\n        </button>\n      </li>\n      <li>\n        <hr class=\"dropdown-divider\">\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <svg\n            data-icon=\"inline-start\"\n            data-lucide=\"printer\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n              <path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6\"/>\n              <rect width=\"12\" height=\"8\" x=\"6\" y=\"14\" rx=\"1\"/>\n            </g>\n          </svg>\n          <span>Print</span>\n          <span class=\"ms-auto small text-body-secondary\">\u2318P</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n  <div class=\"dropdown\">\n    <button class=\"btn btn-ghost\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" data-bs-offset=\"0,8\">Edit</button>\n    <ul class=\"dropdown-menu\">\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <svg\n            data-icon=\"inline-start\"\n            data-lucide=\"undo\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n              <path d=\"M3 7v6h6\"/>\n              <path d=\"M21 17a9 9 0 0 0-9-9a9 9 0 0 0-6 2.3L3 13\"/>\n            </g>\n          </svg>\n          <span>Undo</span>\n          <span class=\"ms-auto small text-body-secondary\">\u2318Z</span>\n        </button>\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <svg\n            data-icon=\"inline-start\"\n            data-lucide=\"redo\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n              <path d=\"M21 7v6h-6\"/>\n              <path d=\"M3 17a9 9 0 0 1 9-9a9 9 0 0 1 6 2.3l3 2.7\"/>\n            </g>\n          </svg>\n          <span>Redo</span>\n          <span class=\"ms-auto small text-body-secondary\">\u21e7\u2318Z</span>\n        </button>\n      </li>\n      <li>\n        <hr class=\"dropdown-divider\">\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <svg\n            data-icon=\"inline-start\"\n            data-lucide=\"copy\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n              <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"/>\n              <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/>\n            </g>\n          </svg>\n          <span>Duplicate page</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n</div>\n</div>", "html_pre_processor": "none", "css": "", "css_pre_processor": "none", "css_starter": "neither", "css_external": "https://unpkg.com/@wpmoo/ui@1.2.1/dist/assets/css/moo-ui.css;https://ui.wpmoo.org/assets/css/codepen-demo.css", "js": "", "js_pre_processor": "none", "js_external": "https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js;https://ui.wpmoo.org/assets/js/codepen-demo.js", "tags": ["moo-ui", "menubar", "components"], "editors": "110", "js_module": false}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64<div class="menubar d-inline-flex align-items-center border rounded-3" role="group" aria-label="Document actions with icons">
  <div class="dropdown">
    <button class="btn btn-ghost" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,8">File</button>
    <ul class="dropdown-menu">
      <li>
        <button class="dropdown-item" type="button">
          <i class="lucide lucide-file-text" data-icon="inline-start" aria-hidden="true"></i>
          <span>New document</span>
          <span class="ms-auto small text-body-secondary">⌘N</span>
        </button>
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <i class="lucide lucide-upload" data-icon="inline-start" aria-hidden="true"></i>
          <span>Import file</span>
        </button>
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <i class="lucide lucide-download" data-icon="inline-start" aria-hidden="true"></i>
          <span>Export as PDF</span>
        </button>
      </li>
      <li>
        <hr class="dropdown-divider">
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <i class="lucide lucide-printer" data-icon="inline-start" aria-hidden="true"></i>
          <span>Print</span>
          <span class="ms-auto small text-body-secondary">⌘P</span>
        </button>
      </li>
    </ul>
  </div>
  <div class="dropdown">
    <button class="btn btn-ghost" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,8">Edit</button>
    <ul class="dropdown-menu">
      <li>
        <button class="dropdown-item" type="button">
          <i class="lucide lucide-undo" data-icon="inline-start" aria-hidden="true"></i>
          <span>Undo</span>
          <span class="ms-auto small text-body-secondary">⌘Z</span>
        </button>
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <i class="lucide lucide-redo" data-icon="inline-start" aria-hidden="true"></i>
          <span>Redo</span>
          <span class="ms-auto small text-body-secondary">⇧⌘Z</span>
        </button>
      </li>
      <li>
        <hr class="dropdown-divider">
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
          <span>Duplicate page</span>
        </button>
      </li>
    </ul>
  </div>
</div>

Menubar

{"title": "Moo UI Menubar - Checkbox", "description": "Toggleable menu options use Bootstrap's button toggle data-api inside dropdown_item-compatible rows, so Arrow keys, Space, Enter, and auto_close=\"outside\" keep the same Bootstrap contract.", "html": "<div class=\"moo-ui\" data-bs-theme=\"light\">\n<div class=\"menubar d-inline-flex align-items-center border rounded-3\" role=\"group\" aria-label=\"View options\">\n  <div class=\"dropdown\">\n    <button class=\"btn btn-ghost\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" data-bs-offset=\"0,8\" data-bs-auto-close=\"outside\">View</button>\n    <ul class=\"dropdown-menu\">\n      <li>\n        <button class=\"dropdown-item dropdown-item-check active\" type=\"button\" data-bs-toggle=\"button\" aria-pressed=\"true\">\n          <span class=\"dropdown-item-check__indicator\" aria-hidden=\"true\">\n            <svg\n              data-icon=\"inline-start\"\n              data-lucide=\"check\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 6L9 17l-5-5\"/>\n            </svg>\n          </span>\n          <span>Sidebar</span>\n        </button>\n      </li>\n      <li>\n        <button class=\"dropdown-item dropdown-item-check\" type=\"button\" data-bs-toggle=\"button\" aria-pressed=\"false\">\n          <span class=\"dropdown-item-check__indicator\" aria-hidden=\"true\">\n            <svg\n              data-icon=\"inline-start\"\n              data-lucide=\"check\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 6L9 17l-5-5\"/>\n            </svg>\n          </span>\n          <span>Compact mode</span>\n        </button>\n      </li>\n      <li>\n        <button class=\"dropdown-item dropdown-item-check\" type=\"button\" data-bs-toggle=\"button\" aria-pressed=\"false\">\n          <span class=\"dropdown-item-check__indicator\" aria-hidden=\"true\">\n            <svg\n              data-icon=\"inline-start\"\n              data-lucide=\"check\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 6L9 17l-5-5\"/>\n            </svg>\n          </span>\n          <span>Focus mode</span>\n        </button>\n      </li>\n      <li>\n        <hr class=\"dropdown-divider\">\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>Refresh</span>\n          <span class=\"ms-auto small text-body-secondary\">\u2318R</span>\n        </button>\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\" disabled>\n          <span>Force refresh</span>\n          <span class=\"ms-auto small text-body-secondary\">\u21e7\u2318R</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n</div>\n</div>", "html_pre_processor": "none", "css": "", "css_pre_processor": "none", "css_starter": "neither", "css_external": "https://unpkg.com/@wpmoo/ui@1.2.1/dist/assets/css/moo-ui.css;https://ui.wpmoo.org/assets/css/codepen-demo.css", "js": "", "js_pre_processor": "none", "js_external": "https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js;https://ui.wpmoo.org/assets/js/codepen-demo.js", "tags": ["moo-ui", "menubar", "components"], "editors": "110", "js_module": false}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46<div class="menubar d-inline-flex align-items-center border rounded-3" role="group" aria-label="View options">
  <div class="dropdown">
    <button class="btn btn-ghost" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,8" data-bs-auto-close="outside">View</button>
    <ul class="dropdown-menu">
      <li>
        <button class="dropdown-item dropdown-item-check active" type="button" data-bs-toggle="button" aria-pressed="true">
          <span class="dropdown-item-check__indicator" aria-hidden="true">
            <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
          </span>
          <span>Sidebar</span>
        </button>
      </li>
      <li>
        <button class="dropdown-item dropdown-item-check" type="button" data-bs-toggle="button" aria-pressed="false">
          <span class="dropdown-item-check__indicator" aria-hidden="true">
            <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
          </span>
          <span>Compact mode</span>
        </button>
      </li>
      <li>
        <button class="dropdown-item dropdown-item-check" type="button" data-bs-toggle="button" aria-pressed="false">
          <span class="dropdown-item-check__indicator" aria-hidden="true">
            <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
          </span>
          <span>Focus mode</span>
        </button>
      </li>
      <li>
        <hr class="dropdown-divider">
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <span>Refresh</span>
          <span class="ms-auto small text-body-secondary">⌘R</span>
        </button>
      </li>
      <li>
        <button class="dropdown-item" type="button" disabled>
          <span>Force refresh</span>
          <span class="ms-auto small text-body-secondary">⇧⌘R</span>
        </button>
      </li>
    </ul>
  </div>
</div>

Menubar

{"title": "Moo UI Menubar - Radio", "description": "Single-select menu options use a real fieldset and radio inputs. data-bs-auto-close=\"outside\" keeps the menu open while a profile is picked.", "html": "<div class=\"moo-ui\" data-bs-theme=\"light\">\n<div class=\"menubar d-inline-flex align-items-center border rounded-3\" role=\"group\" aria-label=\"Profile options\">\n  <div class=\"dropdown\">\n    <button class=\"btn btn-ghost\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" data-bs-offset=\"0,8\" data-bs-auto-close=\"outside\">Profile</button>\n    <ul class=\"dropdown-menu\">\n      <li class=\"px-3 py-2\">\n        <fieldset class=\"radio-group\">\n          <legend class=\"form-label\">Profile</legend>\n          <div class=\"form-check\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"menubar-profile\" id=\"menubar-profile-priya\">\n            <label class=\"form-check-label\" for=\"menubar-profile-priya\">Priya</label>\n          </div>\n          <div class=\"form-check\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"menubar-profile\" id=\"menubar-profile-noah\" checked>\n            <label class=\"form-check-label\" for=\"menubar-profile-noah\">Noah</label>\n          </div>\n          <div class=\"form-check\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"menubar-profile\" id=\"menubar-profile-sana\">\n            <label class=\"form-check-label\" for=\"menubar-profile-sana\">Sana</label>\n          </div>\n        </fieldset>\n      </li>\n      <li>\n        <hr class=\"dropdown-divider\">\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>Edit profile\u2026</span>\n        </button>\n      </li>\n      <li>\n        <button class=\"dropdown-item\" type=\"button\">\n          <span>Add profile\u2026</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n</div>\n</div>", "html_pre_processor": "none", "css": "", "css_pre_processor": "none", "css_starter": "neither", "css_external": "https://unpkg.com/@wpmoo/ui@1.2.1/dist/assets/css/moo-ui.css;https://ui.wpmoo.org/assets/css/codepen-demo.css", "js": "", "js_pre_processor": "none", "js_external": "https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js;https://ui.wpmoo.org/assets/js/codepen-demo.js", "tags": ["moo-ui", "menubar", "components"], "editors": "110", "js_module": false}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37<div class="menubar d-inline-flex align-items-center border rounded-3" role="group" aria-label="Profile options">
  <div class="dropdown">
    <button class="btn btn-ghost" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,8" data-bs-auto-close="outside">Profile</button>
    <ul class="dropdown-menu">
      <li class="px-3 py-2">
        <fieldset class="radio-group">
          <legend class="form-label">Profile</legend>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="menubar-profile" id="menubar-profile-priya">
            <label class="form-check-label" for="menubar-profile-priya">Priya</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="menubar-profile" id="menubar-profile-noah" checked>
            <label class="form-check-label" for="menubar-profile-noah">Noah</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="menubar-profile" id="menubar-profile-sana">
            <label class="form-check-label" for="menubar-profile-sana">Sana</label>
          </div>
        </fieldset>
      </li>
      <li>
        <hr class="dropdown-divider">
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <span>Edit profile…</span>
        </button>
      </li>
      <li>
        <button class="dropdown-item" type="button">
          <span>Add profile…</span>
        </button>
      </li>
    </ul>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37<div class="d-inline-flex" dir="rtl">
  <div class="menubar d-inline-flex align-items-center border rounded-3" role="group" aria-label="إجراءات المستند">
    <div class="dropdown">
      <button class="btn btn-ghost" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,8">ملف</button>
      <ul class="dropdown-menu">
        <li>
          <button class="dropdown-item" type="button">
            <span>مستند جديد</span>
            <span class="ms-auto small text-body-secondary">⌘N</span>
          </button>
        </li>
        <li>
          <button class="dropdown-item" type="button">
            <span>فتح الأخير</span>
          </button>
        </li>
      </ul>
    </div>
    <div class="dropdown">
      <button class="btn btn-ghost" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,8">تحرير</button>
      <ul class="dropdown-menu">
        <li>
          <button class="dropdown-item" type="button">
            <span>تراجع</span>
            <span class="ms-auto small text-body-secondary">⌘Z</span>
          </button>
        </li>
        <li>
          <button class="dropdown-item" type="button">
            <span>إعادة</span>
            <span class="ms-auto small text-body-secondary">⇧⌘Z</span>
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37<div class="d-inline-flex" dir="rtl">
  <div class="menubar d-inline-flex align-items-center border rounded-3" role="group" aria-label="פעולות מסמך">
    <div class="dropdown">
      <button class="btn btn-ghost" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,8">קובץ</button>
      <ul class="dropdown-menu">
        <li>
          <button class="dropdown-item" type="button">
            <span>מסמך חדש</span>
            <span class="ms-auto small text-body-secondary">⌘N</span>
          </button>
        </li>
        <li>
          <button class="dropdown-item" type="button">
            <span>פתח אחרון</span>
          </button>
        </li>
      </ul>
    </div>
    <div class="dropdown">
      <button class="btn btn-ghost" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,8">עריכה</button>
      <ul class="dropdown-menu">
        <li>
          <button class="dropdown-item" type="button">
            <span>בטל</span>
            <span class="ms-auto small text-body-secondary">⌘Z</span>
          </button>
        </li>
        <li>
          <button class="dropdown-item" type="button">
            <span>בצע שוב</span>
            <span class="ms-auto small text-body-secondary">⇧⌘Z</span>
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37<div class="d-inline-flex" dir="ltr">
  <div class="menubar d-inline-flex align-items-center border rounded-3" role="group" aria-label="Document actions">
    <div class="dropdown">
      <button class="btn btn-ghost" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,8">File</button>
      <ul class="dropdown-menu">
        <li>
          <button class="dropdown-item" type="button">
            <span>New document</span>
            <span class="ms-auto small text-body-secondary">⌘N</span>
          </button>
        </li>
        <li>
          <button class="dropdown-item" type="button">
            <span>Open recent</span>
          </button>
        </li>
      </ul>
    </div>
    <div class="dropdown">
      <button class="btn btn-ghost" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,8">Edit</button>
      <ul class="dropdown-menu">
        <li>
          <button class="dropdown-item" type="button">
            <span>Undo</span>
            <span class="ms-auto small text-body-secondary">⌘Z</span>
          </button>
        </li>
        <li>
          <button class="dropdown-item" type="button">
            <span>Redo</span>
            <span class="ms-auto small text-body-secondary">⇧⌘Z</span>
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>

Usage

Basic

With a header and destructive item

With icons

Checkbox

Radio

RTL

Component reference

Settings

Usage

Basic

With a header and destructive item

Members

With icons

Checkbox

Radio

RTL

Component reference

Search documentation

Settings