Accent UI

Menus

The panel, its rows, and CmsSelectMenu — the select an admin surface actually reaches for.

The control Accent UI was born from: the dropdown. The panel, its rows, and the one component the admin adds to Bootstrap's vocabulary — CmsSelectMenu.

The panel

A .dropdown-menu gets the app radius, an ink hairline border, and an elevation drawn in ink rather than grey — which means the shadow flips with light and dark for free, because the ink does.

Rows

<button type="button" class="dropdown-item" role="menuitemradio" aria-checked="true">
  Landing
</button>
  • Every row speaks at control size — the small class is a no-op, and a menu that forgets it no longer renders a size of its own.
  • Hover is a soft accent wash.
  • Selected (.active, aria-checked, aria-selected) is the wash plus accent ink — tint alone reads as hover; ink is what says "this one."
  • Keyboard focus is the ring, not a background swap — a row can be focused and selected, and two backgrounds cannot say that.
  • Group headers (.dropdown-header) wear the tiny-caps voice. Write the bare class; no inline letter-spacing, no text-uppercase.

CmsSelectMenu

The select for admin surfaces. A native <select> is the one part of a form the browser refuses to let a skin touch — its option list always arrives looking like the OS. CmsSelectMenu replaces it with a real menu: menuitemradio rows, a check on the current value, and the native keyboard contract re-implemented rather than skipped — Escape closes and refocuses, arrows walk, Home/End jump, and the menu opens with the current value focused.

It has two modes behind one shell: a grouped flat list (the classic select), and a browse mode that drills a tree like a finder — for choosing content types, locations, anything with an IA. The trigger is a plain .btn at the one control height, and wears the open tint while its menu is up.

Reach for a native .form-select only where the choice is incidental — a dense settings form, a filter. Anywhere the choice is the point, the menu is CmsSelectMenu.

Don't

  • No shadow-sm on a menu — it is !important and blocks the ink elevation.
  • No per-menu font sizing — rows have one voice.
On this page